0-to-1 Frontend Solutions for a Financial Services Firm

This leading investment research and management firm seeks new partners to deliver custom frontend design and development solutions in connection to their APIs. I was brought on as a Senior Experience Designer to partner with a frontend developer to design a portfolio analysis dashboard using the client’s robust API.

Role:

UI/UX Designer

Industry:

Financial Services

Skills:

UI Design, UX Design, Data Visualization

Key Outcomes

  • Partnered with a front end developer to design and build a portfolio analysis dashboard connecting to Morningstar’s APIs

  • Presented the proof of concept and advanced to the next round in the ongoing selection process

Approach

Develop a user narrative to inform the design process

We created a realistic narrative to design for, and outlined the needs of the financial planner and the financial services company’s client.

We decided to create a portfolio analysis tool for a fictitious bank (Think Bank). The tool would need to enable a financial planner to:

  • Compile a portfolio; add funds, distribute weight

  • Seamlessly navigate and understand the portfolio

  • Explore the composure of the portfolio

  • Export and share the portfolio

Asset A

The narrative we chose to design for

Partner with a developer to understand capabilities of the API and prioritize sections to design and build

We had access to Morningstar’s developer documentation, which we used to discuss what data was available and imagine how it could be presented on a dashboard.

Asset A

Annotating developer documentation

Create low fidelity wireframes to continue discussions with developer and use in interviews with real financial planners

I created low-fidelity wireframes that I used in conversation with two financial planners. These conversations allowed me to test many of the assumptions I made, gain expert feedback, and iterate on my designs.

Overall, each financial planner had his own means of understanding a portfolio and managing what they share with their clients.

  • What they look for when reviewing a portfolio:

    • Sections - overview, asset allocation, and performance

    • Key metrics - each financial planner had their own go-to metrics for evaluating portfolios, but total value, YTD return, asset allocation, P/E and P/B ratios, average expense ratios stood out

  • What they want their clients to see:

    • “Nothing - I have my own template for client materials”

    • “I would want to customize what the client sees here”

Asset A

Wireframes used to have informal interviews with financial planners

Developer Collaboration

The developer and I were in conversation for the entire project, a la the Hot Potato Process. We discussed the API and its limitations. We discussed how she would build specific features and what was worth prioritizing in the build. We reviewed wireframes together. We went through a few rounds of QA. She added a few finishing touches like dark mode and actions within dropdown menus.

Asset A

The final portfolio builder interface

Results

The successful design and development process resulted in a high fidelity prototype and a fully built portfolio analysis dashboard calling live data from Morningstar’s API. The user experience achieves what we set out to solve for our user narrative, and the interface is polished, actionable, and easy to use. We presented our POC and advanced to the next round in the ongoing selection process.

The final portfolio dashboard