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.
Led end-to-end product design, visual design and hand-off to development teams.
Cross-functional technical team including Business Analyst, Quality Assurance, Front End and Back End Developers.
November 2023 — February 2024
10 Sprints
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.
As sole UX/UI designer, my job was to shape the design direction and execute deliverables for all designs. But first, where to start?
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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?
How do users react to these questions? Do they improve user experience or just make a long task longer?
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.
Account creation and loan application flows are similar in length. The shortened loan application leverages data collected during account creation.
Progress indicators, clear microcopy and transparent messaging work together to build a trustworthy environment and hopefully reduce stress.
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.
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.
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.
MVP account creation and loan applications
more loan applicants completing loan applications
our flow performs better than the industry average conversion rate (3%).
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.
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.
— 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.