Color Palette Inspiration from Client
Kanoe Montaño (she/her)
UX/UI designer
TODAS
Web-based FinTech platform for Latina empowerment
Role
One of five UX and UI designers.
Length
5 weeks from April-May 2022.
Design Tools
Figma, Jira, Design Stripe (graphics and illustrations), UserTesting.com.
Deliverables
Competitive Analysis, User Stories and User Pain points, Iterative designs, Visual Design, Style Guide with Color Palettes and Font Design, Responsive Design, Developer Hand-off and Annotation, Final Presentation.
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.
Problem
Latine/a/x folks are historically marginalized in our society. One facet of this oppression is financial disenfranchisement through systemic educational barriers that limit the access that Latine women could have to financial literacy and competency. There is no tool specifically designed for Latina financial empowerment and education. "Financial literacy programs that address U.S.-born and foreign-born [Latines] separately are likely to experience better results for both groups. Since growth in the U.S. [Latine] population is driven largely by births, the gap in financial literacy should decrease over time. Gains in educational attainment among [Latines] will likely further decrease the gap. Given the modest levels of financial literacy in the general U.S. population, raising the overall level of financial literacy is paramount for sustaining the nation’s fiscal health."
Source: https://www.tiaainstitute.org/publication/financial-literacy-among-us-hispanics
Solution
To best aid in the financial, intellectual, and social capital of Latine women, we designed a multi-faceted website that provides easy-to-understand and navigate financial literacy tools, resources, and courses for beginners and experts in personal financial empowerment. Budget calculators, savings planners, and community forums are just some of the features we integrated into our holistic approach to designing this website.
Research
Setting the Foundation
Our first team meeting focused on understanding our client's tastes and vision, so we could have a clear direction on how to best meet our client's and users' needs. The client provided a foundational inspiration board which we translated into iterative versions of the designs we would deliver. Because of the nature of working with start-up organizations, we had some trusted creative freedom with our design direction but needed to become familiar with the comparative brands in order to define Todas as a unique and individual presence that would stand out from their competitors.
Design Direction
Incorporating our client's design affinities was a primary priority for us. Our first meeting as a UX team was to identify one to three themes so that we could design accordingly. The three themes we agreed on were: light and illustrative, modern and clean, and a hybrid theme of modern and illustrative. I also designed the logo for Todas based on the inspiration given below, but wanted to push her inspiration to meet her brand's mission.
Comparative Analysis
Primary questions we asked when conducting this research were:
What are other financial literacy organizations doing that we could learn from as we design Todas?
What aspects of other FinTech education sites do we want to incorporate and which ones do we want to leave behind?
What are the gaps in competitors' designs? What are their strengths?
How do we make Todas stand out?
Design
Font explorations for Todas website and logo
Ideation
I was on the Modern and Clean design team and I contributed the following color and font explorations to find the voice, tone, and feeling of Todas as a brand. I focused on contrast and familiarity without sacrificing accessibility in these explorations.
Color explorations for Todas
V1 of High Fidelity "Courses" screen and Final Version
Original Designs to Final Designs
My original designs were meant to accomplish the modern and clean feeling that we agreed on in the initial meeting. Using bold bright colors to create a stark contrast with additional visual elements, my cool-toned designs influenced the final designs even when the client selected a more neutral warm palette. One key aspect I personally advocated for was to exclude the Spanish flag icon from the translation button in the upper navigation because the Latine community does not identify in connection with Spain due to a long history of colonization and imperialism. It was an easy solution to exclude the flag from the CTA to translate the page from English to Spanish. I enjoyed being able to update the designs to meet the client's vision more closely.
Style Guide page explaining Todas logo
Todas Logo
The inspiration for the Todas logo and the mission for the site meant that simplicity would go a long way in terms of the logo design. Bold, yet approachable I used the font Capuche Trial in Black with three radial circles above the "s" to symbolize the multitude of communities within the Latine demographic while also showcasing the brand's colors and tone. Todas means "All" in Spanish and this brand wants to connect with all Latine women, and warm tones often appeal to women audiences. The use of these colors is not only in line with current design and color trends but also connects to the brand's mission.
Tools grid and Budget Calculator function
Must Have: Tools Page
I knew that a prominent piece of financial literacy is removing barriers. Todas leadership also prioritized the integration of interactive financial tools for their site in order to eliminate the barriers for users to gain financial freedom and control. The tools grid is arranged according to the hierarchy of needs for each tool. Money Management is the highest need for Todas users and Life Hacks is the lowest priority. I designed the Budget Calculator to be functional and easy to understand with clearly labeled columns, automatic calculation, and an auto-generated pie graph as a visual aid for the distribution of expenses.
Style Guide and Design System
Style Guides and Component Libraries were created to help make the development process simple and straightforward.
Developer Hand-Off
Todas screens with annotations
Annotations translate designs
All screens were annotated for software developers, who we did not get to directly work with due to the nature of working with a start-up, so our notes had to be comprehensive and nuanced. We were sure to focus on the following while annotating:
Interactions
Usability
Consistency
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
Design must be easy to understand
Users will not experience challenge in completing user flows.
Tools will solve the problem given
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
Reflections
From the beginning having been trusted with a client that I identify with was a strong influence on the designs we finalized. This design process cemented my goal to design digital experiences and products for Social Impact organizations. This project was not without its challenges:
Designing three different iterations of the entire website (atypical for this kind of project)
Integrating financial tools into website while maintaining branding expectations.
Creating an immersive prototype for user testing with minimal copy due to the nature of Todas being in the infancy stages of their start up.
Final Thoughts
User experiences are interlinked with their identities and their humanity. For Todas I was able to gain experience in designing from within the Latine community, and I was also able to connect that to evidence-based psychology principles to make the product not only relevant but usable and accessible to future Latina Todas users.