Usable logo
back arrownext arrow

Designing a consistent usable Fintech experience from complex requirements in a fast paced agile environment

Sketch file on the screen of an imac on a desk

Date Completed

January, 2021

Overview

SEI Investments is a fintech company currently developing an enterprise wealth management platform servicing financial and insurance clients.

I collaborated closely with business analysts and senior team members to translate requirements into high-resolution user interface files and clickable prototypes in Sketch and Invision to create consistent intuitive features within a sophisticated financial management SAS platform.

Working remotely as one of a team of five, I managed all aspects of interpreting requirements for consistent implementation for several Jira tickets in three week sprints.

Team Goals

  1. Complete assigned tickets on schedule and move the project forward to meet SEI contract deadlines.
  2. Identify and improve usability, information architecture and development issues based on requirements provided by business analysts.
  3. Develop and maintain a Sketch symbol library which ensures consistency and reduces UI design time on task.
  4. Effectively prototype pixel accurate Invision prototypes for presentation to product owners and handoff to developers.

Process

Agile

The SEI One project is a consolidation of disparate existing SAS platforms lead by business analysts.

Jira tickets are assigned

Assigned tickets are shared in teams meetings with design team members in which related existing Sketch files are identified.

Requirements are evaluated

Design team and Business Analyst Teams meetings are held in which ticket requirements are discussed.

The design team analyses the ticket

The design team meets and identifies requirements which fall outside of currently developed parts of the atomic design system developed in sketch. When these circumstances prevail we choose between a lo-fi or hi-fi approach for the development of potential UI solutions based on best practices.

Sketch and Invision prototypes are created

Working from existing Sketch symbols which are linked to the master library, a file is created and Craft is used to produce a clickable prototype for presentation to business analysts and handoff to developers when revisions are not required.

Requirements Example

Onboarded during the initial phase of UI design for SEI One, experience design consisted in team discussion of the most consistent and intuitive UI patterns to use for a given context of use

When a new component was required research was done to find examples of other components developed for similar platforms and use-cases, as well as material design and other pattern libraries.

Insight Bulk Processing, was a ticket I completed as an Invision clickable prototype. The user is selecting creating or uploading a document. This ticket began with locating and collecting elements of the selection fields and creating a user-flow.

Clickable prototypes are created for use in presentation of the solution to the SEI team who had designed and developed the existing Insight platform. Once approved the prototype is shared with our teams engineer who produced it and presented it before it was approved for assignment to engineering.

an image of stock tickers
User flow of bulk processing

A stock ticker and page from accounts demonstrates the low and hifi work done for SEI based on consistency and styles

an image of stock tickers
a sketch file from SEI One dashboard

A graph view of top holdings was needed which could display a list view of companies and a detail view with date ranges for individual companies.

A low fi was created in Invision Freehand for presentation to the team prior to rendering it in Sketch. The dashboard below shows the previous list view of top holdings at the bottom left.

Requirements for this ticket included a few of the data points needed and left the rest open for the team to investigate. In our daily design crit we screen shared a google search for similar graphs and collected screenshots into a Freehand document to start the project.

Reflections & takeaways

The most complex SAS application I have ever worked on with the largest set of existing sketch symbols. Due to the complexity of the practices involved in investment processing, portfolio management and administration, understanding requirements began with accessing all related parts of the platform previously developed in Sketch.

Requirements together with the context provided by related developed parts of the platform are enough to inform an iterative process of lo-fi work in Invision Freehand leading to Sketch and Invision clickable prototypes.

usable logo