Terafina, Inc. connects small to mid-size financial institutions to their customers, allowing people to access new financial products from anywhere. Terafina aims to deliver a seamless experience from lead generation to closed sales through a unique, cloud-based communication platform that assists end customers through the process of applying for financial products, such as checking/savings accounts, home/auto loans, and IRAs. Myself and another designer worked with Terafina to perform product research, investigating both the current product as well as comparative services in order to explore areas of improvement in the user experience.
Perform in-depth product research to discover opportunities for improvement in the end-customer, digital experience.
I collaborated with the Terafina team to develop the project strategy and business objectives. I teamed up with another designer to perform product research and explore design recommendations for the client. In order to get smart about the product and market fast, we delegated some roles and responsibilities. I focused primarily on creating a comparative analysis while my partner conducted usability studies. We met frequently to review progress and discuss our findings. After collecting the data, we synthesized our findings and developed a list of design recommendations.
- Client Engagement
- Design Strategy
- Comparative Analysis
- Persona Development
- Task Flows
- Usability Study
- Data Synthesis
- Design Recommendations
PRODUCT & BUSINESS GOALS
I met with the Terafina team to learn team roles, discuss business goals, ask questions about how people were using the product, and to understand what their design goals were. They provided a thorough product walkthrough and highlighted some of the pain points they were already aware of. This helped me develop a focused user experience strategy, scope an initial design sprint, and develop a hypothesis for areas of improvement in the product experience that Terafina and its users would most benefit from.
The Terafina team had collected thorough quantitative data about how their customers used their product, so we created a conversion funnel to examine the points data indicated users were dropping off in the application flow. To gain a visual sense of where users were dropping off, I drafted a task flow for one of Terafina's most trafficked products. This visualization helped inform and focus our discussion guide for usability studies.
I worked with the Terafina team to cultivate a list of market competitors, and selected several bleeding edge companies that designed a similar service for a different product. We were particularly interested in customer signup flows, so I documented and critiqued five customer signup flows, highlighting weaknesses and strengths. I created a list of 8 key design heuristics to keep in mind as I navigated through the products. Below are selected excerpts from the compiled comparative analysis document.
User Experience Heuristics:
- Organizational Clarity
- Clear Labeling
- Consistent Design
- Effective Visual Design
- Readability & Scannability
- Facilitating User Tasks
- Providing Help
I created personas to build user empathy and to gain a better perspective into who uses the product. Terafina offers a broad array of products, so I wanted to build an understanding of some of the differences between possible customers, as well as gain some clarity about points in the experience that may be shared across the entire user base. This helped focus the potential user base we thought would be most important to have sit down for user testing.
My partner performed several usability studies to gain insights into customer pain points, and to add clarity into the reason people were dropping off where conversion funnels indicated. Each of the sessions were recorded using Silverback.
We reviewed the usability test sessions and wrote down all of our observations on sticky notes. We organized the stickies into key pain point categories to get a better idea of where the most prominent problems existed. With the issues in front of us, we were able to prioritize our time, and had a good idea of what to focus on for design recommendations.
After we had gone through user testing and used the comparative analysis to isolate product gaps, my partner and I developed UI sketches to explore solutions for the most critical user pain points. We generated sketches separately and came together to review and discuss which concepts were strong enough to refine and present in our compilation of design recommendations.
After discussion, we gathered our solutions, continued refinement, and developed wireframes and low-fidelity mockups to present to Terafina's team. We made it clear that all designs and mockups presented were meant to serve as the foundation for future design sprints, and were not ready for immediate implementation.
3 KEY ISSUES & DESIGN RECOMMENDATIONS
FINDING #1: IMPROVING FEEDBACK ON USER PROGRESS
Users had a misrepresented sense of how far they were in the form flow. They would often get through the first two subsections and, seeing they were still under the first heading, believe they had a long way to go. In reality, they had completed more than 50% of the signup process.
"This is a lot of stuff and I'm still on #1... I would save and I might not come back."
In addition, we found Terafina's users wanted to stop and celebrate after completing a step. Some showing excitement, exclaiming, "Woohoo!" after clicking the next button.
RECOMMENDATION: Reward users with a sense of progress after each step, and display the individual steps to give users a sense of where they are in the overall form flow.
FINDING #2: FORM INPUTS AND LAYOUT
Terafina wanted to improve the perception and visual appeal of their product, while creating an experience that was responsive and fit into the Bootstrap framework currently being used. We had been asked to focus our attention primarily on tablet, the device Terafina had determined would be customers would use to access their product. Current users had difficulty using the product on tablets due to the smaller size of the input boxes.
RECOMMENDATION: Increase the height size of input boxes to improve targeting accuracy and facilitate information completion. To meet the needs of the Bootstrap framework, create a column-based layout that spans across the width of the form and keeps user focus on the content.
FINDING #3: DOCUMENTS & DISCLOSURE FLOW
From the perspective of the financial institutions that use Terafin's product, documents and disclosures were a key requirement. It was extremely important to have a process in place for customers to confirm consent and acknowledge important details of the relationship they were establishing through their new financial product. As a part of the original interaction put in place to solve that problem, users had to disable a pop-up blocker to open and save external PDF files. This took users away from the main document flow, some were unable to return, for others it altered their feelings of security.
RECOMMENDATION: We proposed building the documents and disclosures into a modal screen so users would never have to leave the flow of the form signup. Our design had affordances to allow users to save or print the document directly from the screen, or simply accept the terms and move on to the next disclosure.
After presenting the product research and our design recommendations, we continued to work with the Terafina team on a second design sprint. My process and the results from the second sprint can be found here.