Kanoe Montaño (she/her)
UX/UI designer

TODAS

Web-based FinTech platform for Latina empowerment

Image alt tag

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

Color Palette Inspiration from Client

Color Palette Inspiration from Client

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

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

Color explorations for Todas

V1 of High Fidelity

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

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

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

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 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.