2020
Acme is a large company that helps people save for retirement. When a customer creates a retirement plan with their Financial Advisor they are more likely to contribute towards their retirement.
Project Goals
- Simplify the Customer’s ability to create a retirement plan
- Allow easy collaboration with a Financial Advisor
- Seamlessly integrate into Acme’s existing customer portal
- Remain accessible to all age groups and all technical abilities
- Be welcoming in an industry known for being intimidating and difficult to understand
Team Overview
A medium-sized team that consisted of client members and members of our consultancy. Their Product Owner, Analysts, and Designers teamed up with our Project Manager, Developers, Analysts, and Subject Matter Experts to comfortably collaborate, united as one team to solve a bigger problem.
My role
Lead UX Designer
My responsibilities
- Partner with executives on product strategy and concepts
- Create and present strategy decks
- Conduct aspirational and competitive analysis
- Document requirements (business, user, and functional)
- Parter with Technology to define feasibility constraints
- Partner with client-side design team on UI patterns and design systems
- Responsible for end-to-end UX experience
Design process
This process is simplified due to each project having its own specifications and needs. No project has been purely linear for me; instead they are a web of relationships that impact one another in complex ways.
However, most projects align to the following steps.
1. Understand the problem
Discover, Define
2. Design the experience
Design, Feedback, and Iteration
3. Deliver a solution
Develop, Deploy
1. Understand the problem
- Stakeholder interviews
- Competitive analysis
- Brainstorming
- Technical Feasibility
Designing without understanding “Why” is like driving without a destination. It can be fun, but it is not actively accomplishing anything with purpose. To gain that purpose, we define what we need to accomplish and strategize how to get there.
Stakeholder interviews
Not having direct access to the Customers or Advisors, we relied heavily on our client partners at Acme for insights. They trusted me to listen, distill, and recommend a way forward to meet the goals of the project.
From these discussions I was able to:
- Identify the Ask
- Understand historical background information
- Learn about critical pain points
- Establish tenets for proceeding
After understanding the business and user goals, we were then asked to come up with high-level concepts for how to solve the problems.
The primary ask
Competitive analysis
My team took a few days to work independently before meeting up to discuss our ideas. I took a broad look at many other financial institutions that focus on retirement and savings. I also looked at “aspirational” brands - Nest, Pinterest, Lookout, other non-financial companies - that focus heavily on problem-solving in hopes of finding inspiration.
I also signed up for a Betterment account, for research, days before COVID-19 crashed the markets in March 2020. This got a good chuckle from the client for my “dedication to research”.🤣📉
There is a lot of value for being able to see the specifics of how other companies solve similar problems.
A screenshot from my Betterment account. Also a case study in how to display rapid losses.
Brainstorming
I regrouped with my internal team to discuss our independent ideations. I took the lead in consolidating and organizing the thoughts into a concise and direct deck, complete with notes, summaries, and imagery from the competitive analysis.
I presented 13 concepts and Acme chose two; “Configure Your Future” and “Financial Health Meter”. These would become our north stars throughout the design process.
Project setup slides with the two chosen directions
Technical feasibility
I spent time understanding the current environments - both the User Portal and the data structures of the Advisor Tool - by receiving test account information for both and poking around. I also met with Lead Developers to bounce ideas for changes and learn about which sections of the software could be easily modified and which parts needed to remain as-is.
It’s good to have an understanding of the true scope upfront as it saves time, energy, and money over the course of the project.
I explored the Advisor-facing product to understand technical feasibility and backend requirements that would also be applied to the Customer-facing product
Result
We defined what success would look like - Allowing customers to create and manage their own retirement plans - and agreed on the strategies to get there.
We discussed pain points, meaningful additions, and set boundaries together so we knew where to efficiently apply pressure. Having a strong understanding of backend functionalities and calculations not only armed me with what I needed to create realistic content; it also established a trusting relationship between Design and Development.
All of this, along with the support of my team, allowed me to start meaningfully putting pen to paper.
2. Design the experience
- Requirements and content
- User scenarios
- Sketching and process flows
- Wireframes and prototyping
- Feedback
In the Design phase, my goal is to translate the abstract nature of goals, user needs, and strategy into tangible flows, pages, content, and clicks. Our cadence evolved into weekly “sprints” that involved Friday design reviews that doubled as planning for the week ahead. Wednesdays were for meeting internally to validate while leaving enough time for adjustments before the Friday review.
Requirements and content
This project revolved around financial accuracy, retirement savings, and other complex calculations that made using “lorem ipsum” and FPO monetary values unrealistic. In order to validate if a design was working, we needed 100% realistic savings values, years until retirement, types of accounts, financial predictions, actual expenses to consider, and more.
I created and maintained a requirements folder that become home to spreadsheets with complex calculation models, content needs, user scenarios, net new systems for communicating financial health, required form fields, and other specifics that became the backbone of the product. Much of this information was created in collaboration with Acme’s analytics department, our financial experts, and the other savvy professionals that made up our team.
Different data sets and values that I constructed and organized to maintain a source of truth.
User scenarios
Collaborating with our Business Analyst, we defined user scenarios for Customers, Advisors, and how their actions impact one another (since they share the same backend information).
User scenarios worksheet made in collaboration with the team
Sketching and process flows
This task was not a deliverable, but I find sketching supremely beneficial to my process. I will take a feature and deconstruct it by understanding the process flows. Optimizing the flow and then sketching out the page/component states helps me see how each piece of the application is impacted by user interaction. It also helps me identify tangential components that may be altered.
I move quickly on a whiteboard and this helps me to be more efficient once I sit down with my digital design tools. “If you have only have five minutes to do something, use the first minute to plan the next four.”
Sketches and flows from various points in the process on my whiteboard.
Wireframes and prototyping
Leveraging the realistic data in my requirements as well as the structure provided by the sketching phase, I’m ready to create wireframes in Sketch. I build my wireframes with a Design System in mind, using repeatable components whenever possible. There can be some churn at the beginning of a new project, but it is ultimately worth it to push towards global patterns - even if they don’t translate 1-to-1 after they leave the UX phase.
I took a modular (component-based) approach to this project since my designs in Sketch were really being used to feed my prototype in Axure. Each page had to be thought through under many different scenarios - single or spouse, savings or no savings, time until retirement, etc.
We were not building an app version of the product, but we were concerned with it being responsive down to mobile sizes, so each pattern took both mobile and desktop sizes into account. I’ve been using Axure for all high-fidelity prototypes I’ve created in my career because no other prototyping tool matches the specificity gained with Dynamic Panels.
Desktop and mobile wires created in Sketch and then brought over to Axure for high-fidelity prototyping.
Feedback
This was a lean project and we used our weekly design meetings to validate requirements, uncover new features, adjust priorities, and tackle technical feasibility. I created an agenda for each meeting to stay focused, as the product had many moving parts.
One major benefit of our “weekly sprint” schedule was that my team at Acme was running user testing during the week and would provide me with their stakeholder feedback AND testing feedback every Friday. Testing was another reason for us to have accurate and realistic data for our UI elements. “Lorem” did not fly. If the test subjects couldn’t make sense of it, then it had to be refined.
Result
The end result was a concise, organized, and highly-detailed retirement savings portal that will help more people be prepared for their retirement years. Through collaboration and diligence, we were able to create new concepts, document our progress, and be prepared to hand off to UI and Development.
3. Deliver the solution
- Documentation and handoff
My goal in delivering a solution is to communicate all of the context and nuance included in the design decisions so that the UI Designer and Developers have the information they need to make informed decisions. Ideally, I would stay on a project as a consultant through QA all the way to deployment, but that was not the plan for this project.
Documentation and handoff
Both prototypes (Desktop and Mobile) were designed to be a visual representation of the requirements, even including multiple states for the same component. Several spreadsheets that served as the Requirements were also circulated as a companion piece.
A UX representative was not scoped for the following phases of the project, so I created a 27-page Pages document for downstream team members to reference as well as a recorded video presentation that served as a personal walkthrough of the entire product with voiceover. This is helpful for both the other team members as well as for Future Me if I am ever called upon to assist on the same project.
The setup in Axure.
Screenshots from the 27-page Google Pages document outlining all design decisions and the context that brought us there.
Final Result
The financial space is complex and challenging. But coming to an elegant, thoughtful solution was very rewarding. Partnering with such a knowledgeable and collaborative team made my job fun and exciting.
The final product is set to release in Q3 2020 and will meet our goal of making it easier for Customers to create a retirement plan and ultimately contribute more funds towards their later years.
Wins
- Successfully created a Customer-facing Plan Creation tool.
- Successfully created a Customer-facing Plan Management tool.
- The product was designed to connect with a shared data source for future features involving more Customer-and-Advisor collaboration.
- User testing shows signs that Customers without retirement plans will be more likely to create plans and contribute.
- Based on current metrics, this software could help save an additional $1B - $2.25B per year, collectively, among Acme Customers.