ASH HOPKINS
ASH HOPKINS
multidisciplinary designer
 
Site Concept.jpg
 
web-presentation.jpg
 

 
ResearchCenter_Responsive.jpg

Client: A mega cap American international banking and financial services holding company
Agency: IHS Markit - Markit Digital | Ashley Hopkins, UI Designer

This 2-year project reimagines the client's internal financial analyst Research Center, as well as other tools within the platform, that warrant consolidation.
WellsFargo_ResearchCenter_Redesign.jpg

Discovery

The project began as a pitch in which our team (2 designers) created a Discovery Document containing a combination of business and design goals which informed research and a preliminary collection of visual design direction. We also collaborated with the Business Development team to include pricing quotes for a full start-to-finish design, development, and quality assurance experience.

This initial phase covered an estimated 60% of the foundational designs & thinking required for completion of the proposed design engagement.

research, site architecture, workflows

Research was crucial during this initial phase. We had a handful of tools at our disposal that allowed us to forego a full user interview process—current site analytics, including page usage, device operation, screen sizes, and user stories and testimonials from the client. By combining the data with user testimonials, we were able to dive into the experience, both how it is currently presented, and how the analysts wish it would function.

One of our main goals was to streamline the experience for the FA, so they could quickly navigate through the site and compile helpful information to pass onto their clients. On average, the FAs on our client's side have anywhere from 900–1200 CUSIPS in their book of business. Without help and insight from their research platform, this amount of management is humanly impossible to cover effectively in a working day.

 
 
 The current site architecture from a bird's eye view displays a perplexing web of connections

The current site architecture from a bird's eye view displays a perplexing web of connections

 The updated site architecture proposes a more organized flow of information

The updated site architecture proposes a more organized flow of information

 

For this initial phase, we narrowed our focus down to five main workflows based on the data we gathered earlier in the process; these workflows then influenced the timeline and deliverables schedule. Our main focus for these workflows revolved around envisioning future-state streamline processes, which included the integration of existing tools outside the research center, while prioritizing the main end-state accomplishments for the FA during each login.

 Workflows 1-2, covering: researching a company, shareable annotated PDF documents, and tool integration

Workflows 1-2, covering: researching a company, shareable annotated PDF documents, and tool integration

 Workflows 3-5, covering: mobile advising, quick search, company tear sheets, personalization, & tool integration

Workflows 3-5, covering: mobile advising, quick search, company tear sheets, personalization, & tool integration

 

Phase 1: Book level data integration & insight

Phase 1 carried no data dependencies, meaning we were able to integrate high-level book insight into the platform to assist the financial advisors' focus. These insights are personalized based on the data within an individual FA's book of business. Also, the platform currently did not integrate news, which we injected throughout the experience. The combination of personalized insights, organized research, and news helped us create a more useful and engaging experience for the users.

 
Whiteboarding-01.jpg

Throughout the process, we heavily relied on whiteboarding our ideas. This allowed us to quickly brainstorm possible solutions for each problem, and enabled us to see problems holistically. These exercises also aided us in creating mid-fidelity wireframes used for final phase 1 visual designs and the discovery document, which we presented to a board of stakeholders on-site with the financial institution. 

 

These exercises also aided us in creating mid-fidelity wireframes used for final phase 1 visual designs and the discovery document, which we presented to a board of stakeholders on-site with the financial institution. 

 
 Wireframe examples

Wireframe examples

 
 A series of Phase 1 visual designs

A series of Phase 1 visual designs

 
 
 Discovery Document presented to the stakeholders on-site after phase 1 for approval

Discovery Document presented to the stakeholders on-site after phase 1 for approval

dicovery-document-2.jpg

Programs Used for Phase 1: Adobe Illustrator & InDesign

 
 
Phase 4 - Compare Portfolios Overlay - Returns - Full Page.png

Phase 2: Full Data Integration & Insights

Following a successful pitch, we received approval to move onto Phase 2 of the research center redesign project. 

The client requested we complete as many designs as possible before the end of 2017. We decided to prioritize the completion of the base designs as well as the designs containing full data integration in order to complete 2-3 interactive prototypes by the proposed deadline.

 

PHase 2: full data integration & Insights

The second portion of this project contained three phases, all of which integrate elevated levels of data through each progression: an FA's book level data, portfolio/household data, and client data. As the lead designer in this phase, I was able to oversee, collaborate, and produce the entire redesign of the site.

As stated earlier, the Phase 1 designs were created in Adobe Illustrator. Between the lapse of Phase 1 and Phase 2, I helped push our larger design team to use Sketch over Illustrator. All designs from Phase 1 were transferred from Illustrator into Sketch, and all subsequent designs were created in Sketch. 

We revisited the workflows completed in Phase 1, re-prioritizing what should be shown for the first set of interactive prototypes. We decided to focus on embedded advice & streamlined research, as well as research & news integration and external trading (linking out to external tools). 

 
 The portfolio comparison tool, which integrates client portfolios and insight

The portfolio comparison tool, which integrates client portfolios and insight

 Change portfolio overlay, with the ability to filter on a multitude of criteria

Change portfolio overlay, with the ability to filter on a multitude of criteria

 

Throughout the process, we referenced various sources of data to complete realistic designs. Some of the sources we used were site analytics, in-house data sets, Excel spreadsheets, physical printouts, and current client tool screenshots.

 Scan of asset class color categories used for charting

Scan of asset class color categories used for charting

 Excel spreadsheet of various asset class levels

Excel spreadsheet of various asset class levels

 Current client portfolio viewer overview

Current client portfolio viewer overview

 

Phase 2 was the most production-heavy phase of this project. We were able to design out all subsequent pages as planned, as well as two interactive prototypes.

Programs Used for Phase 2: Adobe Illustrator, Sketch, Invision, Hype Pro

PHase 2.5: interactive prototypes (desktop )

During the first phase of the interactive prototype, we were able to complete two priority workflows for the client. The final workflows were completed using Invision, although we also experimented with using Hype Pro as well. For our use case, we decided to use Invision for the final deliverable, as the client did not require many microinteractions, but rather a simplified clickable prototype.

 

Phase 3: mid-level data integration & Insights, final interactive prototypes

After completion of all base designs, full data level integration, and the first phase of interactive prototypes, we were able to complete designs for two sets of mid-level data integration. These phases affected the content within the designs, but not the layout, as we had taken these data levels into consideration from the beginning of Phase 2 by creating flexible layouts.

In addition to completing the final data integration designs, we also produced three additional desktop interactive prototypes for delivery.

 
 Interactive prototype example, switching through chart styles on Sector Overview page

Interactive prototype example, switching through chart styles on Sector Overview page

 
 

Phase 4: responsive designs & delivery for development

After all final desktop designs and interactive prototypes were completed, we then transferred all designs to tablet and mobile breakpoints. Because our internal development team was set to develop this project, we were able to set up check-ins and have conversations as needed throughout the entire project to ensure a smooth transition, especially since this project was set as waterfall instead of our typical agile process.

 
 
 
 

Client Experience

Ash Hopkins has worked with a multitude of high-priority clients—both domestic and international. 

 

Make more GIFs

 
 

 

Interaction Mockup: Capital Group

 
microanimation01_recording.gif
 
 
 

Extra exploration of mobile interaction for SMA table elements (outside of scope).

Color palette: Capital Group branding
Programs used: Sketch, Hype, Quicktime Player, Adobe After Effects, Photoshop

Free Mockup from uxinmotion

 
 

Microinteraction: Jelly Icons

 
jelly-icons.gif
 
 
 

Personal exploration of micro-interactions through quarterly personal objectives.

Color palette: Material Design
Programs used: Adobe Illustrator, After Effects, Photoshop