Prosperous* Finance Case Study

How I used design-thinking to improve project planning and gain stakeholder investment for better UX

With no time originally budgeted for UX and a full team of developers awaiting direction, this is my journey to plan, define and start building scalable solutions for a suite of financial services within just 2 sprints.

Leadership
UX
UI
IA

* NDA-bound content. Identifiable names and details have been changed.

Home screen for mobile app

Role

Led end-to-end product design, visual design and hand-off to development teams.

Team

Cross-functional technical team including Business Analyst, Quality Assurance, Front End and Back End Developers.

Timeline

November 2023 — February 2024
10 Sprints

Client + Scope

Prosperous offers alternative financial services, specifically targeted toward underbanked communities.

They approached my consultancy* to build out solutions to leverage their latest proprietary technology to build:

— Customer-facing apps for native mobile, desktop and an ATM-style kiosk.

— Internal platform for product and customer management.

The MVP scope was a high level list of nearly all features of the full project — with no clear priorities.

Initial MVP scope

As sole UX/UI designer, my job was to shape the design direction and execute deliverables for all designs. But first, where to start?

My Strategy

Address high level planning and priorities

I quickly recognized a need for high level planning and someone to lead the effort. I knew that design-thinking strategies would be very effective (and as a designer were what came most naturally!) for both my work and the rest of the team.

I adopted the double diamond design process and started by leading the team in exercises to better understand Prosperous’s business, users and constraints.

Double diamond graphic

Adjust stakeholder expectations for design

Initial stakeholder expectations wouldn't support a realistic workflow and little to no time was initially budgeted for design itself.

By taking the lead during early planning I was also able to demonstrate the benefits of design-thinking. This helped to adjust those initial expectations and gain buy-in to invest further in design later on.

Efficiency of design

I aimed to balance maintaining design integrity while also handing off designs to the development team quickly.

— Leverage design system base

My consultancy had our own white label design system which I could update with Prosperous branding and hand off to the Front End team to start on.

— Work on flows in testable chunks.

It’s easy for stakeholders to get weighed down and lost in the details of lengthy flows and tangential sad paths. I planned to concentrate on shorter, but still meaningful flows and features.

— Design with growth in mind.

I prioritized flexible, scalable solutions to minimize the need for re-work. I encouraged an iterative mindset to prepare all stakeholders for the very real possibility that some re-work was actually inevitable.

Double diamond icon

Discover

We digested the client's existing documentation

As a team, we listed questions, assumptions and suggestions and had frequent reviews with the client’s Product Owner.

I noticed a significant issue — we had no consensus on how features related to each other and within the context of each device.

Document review

Taking the time to better understand our users

Unfortunately it was out of scope to interview individuals from Prosperous’s target audience — under and un-banked people, but I managed to lead an empathy map workshop with the client to gain the best understanding possible and also establish a user-first mindset for the effort.

I paired this with a certainties vs. assumptions exercise for validation and finally created user personas. Core takeaways include:

— These populations highly value trustworthiness, transparency and ease of use.

— They have often had negative experiences with other financial institutions in the past.

— The circumstances that bring them to seek financial services are most often stressful.

Empathy map

I created a diagram to visually divide initial use cases by device.

Loans were reported by Prosperous as their most profitable product. I've designed loan flows previously so I was able to roughly order use cases to reflect a typical lending scenario.

The diagram gave critical context to our assumptions and questions. Key takeaways from conversations with the PO:

— Due to a technical limitation from the existing tech, user accounts would be created from a mobile device only.

— In order to prevent fraud, first time borrowers needed to receive funding at an AC kiosk only.

— The original vision was to offer loan servicing on desktop only and as a lower priority.

Use cases by device diagram
Double diamond icon

Define

Impact/effort diagraming

With a better high-level understanding of the full scope, I felt we were in a better position to start prioritizing features.

Again, a more visual approach to this conversation helped orient our PO and gave us clear documentation to share with the rest of the team.

Pairing with the BA, PO and PM I led an impact/effort exercise to sort and prioritize features.

Impact/effort matrix

Clear priorities emerged to align business goals, user needs and technical constraints.

We refined the matrix results to establish 2 goals for the next sprint:

Account creation was a critical access point for nearly all products.

Loan application funnel would service Prosperous’s most profitable and popular products.

Impact/effort matrix results

UX Win!

🙌 Demonstrating the value of design-thinking strategies had by now gained client buy-in to invest in UX.

I seized the opportunity to advocate for additional design resources:

— A second UX Designer

The demand was high and the current ratio of developers to designers was 12:1.

— Weekly UX Syncs

I continued to see a lack of communication as a core issue so I introduced dedicated time with both internal and client teams.

Internally, I reviewed designs in all stages, gathered feedback, asked my own questions and answered theirs in order to improve alignment and encourage a collaborative mindset.

On the client side, I noticed some disconnect between PO, technical lead and CEO so the intention here was to block off time with the full team of stakeholders to gain alignment on the product.

— Surface tablet for testing

The initial kiosk would use a Microsoft Surface Go 3 Tablet. Designing for a kiosk experience was new for me and I was unfamiliar with that device in particular, so I knew that being able to test on the actual device would be critical to validate my designs.

Double diamond icon

Develop

Now, how can we ease friction in these long workflows?

With significant experience designing both account creation and loan application flows, and the tight timeline,  I chose to create user journeys next for their efficiency uniting UX, IA and technical conversations.

For context, I used legacy designs where available and included user personas.

I worked closely with our BA and produced two options to start.

User journey closeup

Converging on a solution through iteration

We performed 2 rounds of iteration on the user journeys.

Both account creation and loan application flows had many technical considerations so conversations were highly collaborative across teams to ensure that proposals were not only in the users’ best interest, but technically plausible.

User journey

Impact/effort diagraming

With a better high-level understanding of the full scope, I felt we were in a better position to start prioritizing features.

Again, a more visual approach to this conversation helped orient our PO and gave us clear documentation to share with the rest of the team.

Pairing with the BA, PO and PM I led an impact/effort exercise to sort and prioritize features.

Impact/effort matrix

Clear priorities emerged to align business goals, user needs and technical constraints.

We refined the matrix results to establish 2 goals for the next sprint:

Account creation was a critical access point for nearly all products.

Loan application funnel would service Prosperous’s most profitable and popular products.

Impact/effort matrix results

...and then
there were two

Adding a second UX designer made it possible to advance mobile and kiosk designs in parallel.

Dividing the design effort loosely  between devices allowed us each to gain better focus and avoid any miscommunication.

We also staggered designs so that we were both advancing with definitions - designing different features independently for ‘our’ device, then switching features.

We took advantage of this dynamic to iterate on each other’s work, leveraging strengths and improving on weaknesses.

Design system

While working through the user journeys, I capitalized on time waiting for feedback to implement an initial design system.

I was able to do so relatively quickly using our in-house, customizable design system, Mate UI.

This allowed the front end team to get a head start preparing core components like type styles, buttons, and inputs. It was a win for the client, who was concerned with unused resources at this stage.

It also allowed me to transition efficiently from ideation to final deliverables.

Double diamond icon

Develop

1st Iteration

Short account creation + long loan application

Next I began iterative mockups based on the final user journeys.

The initial direction prioritized keeping account creation as short as possible because:

Not all users will be interested in products that require them to provide additional personal data.

— A shorter flow provides both a quick win for users and incentivizes them to move forward.

1st iteration
2nd Iteration

Turning technical constraints into design opportunities

We learned late that ID scan was required during account creation.

In order to preserve grouping for similar entries related to identity, we explored a more equal distribution between account creation and loan application.

This approach prioritized maintaining an intuitive workflow and ultimately reduced clicks by removing redundant entries.

2nd iteration
3rd Iteration

How unhappy paths helped shape the final solution

Work on unhappy paths uncovered:

— Some requirements to qualify for products were so basic that we realized users would be frustrated if they had to get deep into a flow to find out they don’t qualify.

A significant expense was associated with each user account created.

We needed to filter out users early.

3rd iteration definition
3rd Iteration

Pre-screening questions save users time and save Prosperous money

We added pre-screening questions at the start of account creation and divided them into 2 steps:

— What products are available in your state?

— Do you meet the basic requirements?

User Testing Opportunity

How do users react to these questions? Do they improve user experience or just make a long task longer?

3rd iteration result
Double diamond icon

Deliver

Financial flows may be lengthy

but they don’t have to be stressful.

Prototype details

Polishing MVP designs + handoff to development

Since I iterated with components directly from the design system, I could finalize the UI for approved designs quickly.

I chose to handoff non-interactive prototypes because they prioritized:

— Communicating the full scope of each flow, at a glance.

— Clear documentation to efficiently unite visual design, architecture/integrations, information architecture and interactions.

— Easy to reference for both developers and stakeholders.

Evenly distributed content

Account creation and loan application flows are similar in length. The shortened loan application leverages data collected during account creation.

Clear communication

Progress indicators, clear microcopy and transparent messaging work together to build a trustworthy environment and hopefully reduce stress.

Example mobile screens

Maintaining cohesive workflows while

switching devices.

Users need to frequently switch between mobile and kiosk devices. Designs work together to present a cohesive experience, while still adapting to the context of each device.

Example mobile screens

Testing

Testing the MVP build

Kiosk design was new to me and the team as well, so I’ve been testing on a Surface tablet for any UX or UI issues myself.

So far the visual designs are displaying as expected. These tests have helped identify issues unique to the kiosk experience such as  keyboard display issues and session timeout.

MVP Kiosk testing

Hypothesis for further validation with users

Tight deadlines and budget prohibited user testing thus far, but I’ve advocated for testing the MVP and conducting interviews.

In particular, I would like to better understand:

— Users’ reactions to the long flows and the conversion/abandonment rates.

— Any issues switching between devices.

— Kiosk friction points in real world conditions.

We believe that

MVP account creation and loan applications

will achieve

more loan applicants completing loan applications

and we'll know this is true when

our flow performs better than the industry average conversion rate (3%).

Conclusion

An iterative and highly collaborative process kept both efficiency and spirits high.

Although the results of the product are still pending validation, the process I helped shape provided the entire team with a framework and support system to effectively make sense of a large, complex project.

Early stage ideation and planning workshops introduced a design-first approach while still meeting tight deadlines.

2

sprints to move enough designs into development to occupy the full team.

3

sprints to define and design the most critical flows.

80%

of our team reported that the latest release of our white label design system had a significant positive impact on their work.

"Design is the art of planning."

– Paula Scher

Insights + Next steps

I developed new strategies to expand my design leadership skills and benefit the entire team.

At the start of the project I had so many questions and little encouragement to pursue answers. I felt a little alone, but I also could see that the overall lack of direction and context to even formulate questions.

Persistently advocating for design-thinking early not only improved the product but the process for the entire team. It provided the context and encouragement to start asking their own questions and generated a collaborative environment.

Just before release, the project was paused due to client-side complications. I’m happy with what we were able to achieve but would love to know how it tests in wild.

Some things I'll remember for next time:

— Identify final decision-makers early and involve them often

The Product Owner isn’t always the final decision maker - whether they want to admit it or not. Make sure that everyone that needs to sign off is involved as early and often as logistically possible.

— The power of visual documentation

It doesn’t have to be polished. Simple diagrams are so impactful to gain clarity, alignment and buy-in from both internal teams and clients.