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.
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.
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.
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.
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.
Programs Used for Phase 1: Adobe Illustrator & InDesign
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).
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.
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.
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.
Ash Hopkins has worked with a multitude of high-priority clients—both domestic and international.
Make more GIFs
Interaction Mockup: Capital Group
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
Personal exploration of micro-interactions through quarterly personal objectives.
Color palette: Material Design
Programs used: Adobe Illustrator, After Effects, Photoshop