Competitive Analysis
Overview
Todas is the financial wellness brand for underrepresented women in LATAM + US. It will enable users to learn personal finance and have a chance to win rewards such as digital collectibles (NFTs) or brand coins that can be used towards purchases on other courses or 1:1 real-time advice from financial advisors.
Todas is a startup business therefore we were starting from the ground up.
The Problem
When it comes to access to financial wellness and education, the Latinix community is severely underrepresented. There are not a lot of options out there for individuals who want to take control of their finances. In addition, when it comes to the options that are available, they can be overwhelming and hard to navigate.
The Solution
Create an easy to understand educational platform that guides the user through their financial wellness journey and motivates them to continue to learn.
Role
For this project, I was selected as the team lead.
My responsibilities included:
Collaborating with my team of five to create a cohesive design.
Managing deadlines for my team.
Maintaining communication between the team and our project manager.
Maintaining communication with the client and conveying their goals and aspirations for this project.
UX/UI design.
Timeline
5 Weeks
Tools
Figma
Usertest.com
Design Stripe (Illustrations)
Desktop Design
Kick-off Meeting
I started this project by holding an initial meeting with my team to clarify our project plan, deliverables and deadlines. We also discussed how we would be collaborating throughout the project and compiled a list of questions for the client to help us better understand their goals and visions.
I then scheduled a meeting with the client to discuss the questions my team and I created and allow the client the opportunity to do the same. When we started this project, Todas had no branding or initial designs but the client did provide inspirations for our consideration throughout the project.
Research
Competitive Analysis
Our client provided us with previous user research that they conducted to start the project. From there my team created a competitive analysis to compare the strengths and weaknesses of platforms similar to Todas.
During the Competitive Analysis we concluded that there were a few products similar to Todas but there were some big differences in how they provided educational services and very few of them were catered to the Latinix community.
Many offered a large library of resources but they were hard to navigate and unfortunately not very user friendly. Most of the content on the competitors websites consisted of pages and pages of text and articles that would quickly lose the users interest. Only one of them offered usable budgeting tools and none of them offered incentives.
Ideation
At the beginning of the project, the client provided our team with extensive font, color and design inspirations. This was a great starting point for the project and helped us determine the direction for the UI design. We were tasked with creating three iterations based on the client's inspiration with the client choosing the final design later. Additional mood boards were created to give us plenty of options for the three design iterations.
Client Inspirations
Client Inspiration
In the inspiration file provided by the client they noted:
For the font the client wanted a "bold & bubbly" style.
Bright bold colors that are commonly associated with Latin American art and styles.
For the design the client noted that they preferred clean designs with illustrations, pops of color and a bold call to action.
Style Inspirations
Design Choices
We ultimately chose to go with a bold serif font for the Logo and a simple sans-serif for the headers and body text. This decision was made with the clients preferences for a bright and bold design while also keeping it clean and uncluttered.
Wireframes
Wireframes
After reviewing the inspirations we now had a direction for the designs. We wireframed three versions of the Homepage to give the client options to choose from.
When creating the designs, we really wanted to use the Homepage as a way to show off all of the features and tools that Todas has to offer while maintaining a clean and organized design.
UI Iterations
Hi-Fi Iterations
Hi-Fi Iterations
The goal for each iteration was to stay true to the inspirations created for the designs while also creating three versions that could stand on their own.
Web About Page
Clients Choice
Once the three iterations were completed, I sent them to the client for review and scheduled a meeting to go over any questions they had in regards to the design. While they liked elements from each design, Version 2 was their final choice. We did discuss taking a few elements from Version 1 and Version 3 and incorporating them into the final design for Version 2.
I notated the changes and relayed them to my team. From there we finalized the Version 2 design.
Mobile Landing Page
Mobile example
The main goal for the project was to design and test the website itself but mobile screens were created to show responsive design. The mobile screens would continue to be designed and tested at a later date.
Style Guide
Style Guides and Component Libraries were created to help make the development process simple and straightforward.
Annotations.
Additionally all screens were annotated for development to note:
Interactions
Sizing & Spacing
Grid Layout
User Testing
User Flows
At this point we created a prototype to prepare for User Testing. The User Tests were conducted through Usertesting.com and were unmoderated. Three main user flows were created and were tested with five individuals that met our demographic.
Goals for User Tests
Is the design easy to follow and understand?
Do the users have trouble following the selected User Flows?
Do the tools provided actually solve the users problems?
What is the overall opinion of this product and its functionality?
Results
What they Liked
Visually appealing Design.
Overall the website was straightforward and easy to navigate.
Great options to help the user learn more about finances.
User Concerns
Would like a longer test to see more features and tools.
Struggled with the Notifications on the Community Page.
Had some trouble finding the Budgeting Tool itself.
Recommendations
Conducting a longer more in depth user test once final content is added.
Fix NavBar to the top of the page to make it easier for users to find those features.
Find a way to make the Notifications Icon on the Community page more prominent. Or remove the icon and only use the Notifications tab in the sidebar.
For the Budgeting page, possibly using the tools page as an informational dashboard and using the Tools Icons to take the user to the different tools pages.
Conclusion
From this point I presented the User Test Results to the client and we discussed the recommended changes and the continued design of the website and mobile application. Moving forward, once the recommended changes were made I would conduct a more thorough User Test.
Final Thoughts
This was my first time leading a team on a project and although I was nervous about the responsibility, I was also very excited for the opportunity. I gained knowledge and new experiences by communicating with the client and explaining our design process on a regular basis.
It has reaffirmed that every design decision is made intentionally and with research behind it in order to ensure success in the product and clarity in our decisions.