Work Single Main Image

Project Details

I was the sole designer and developer on this project in 2021 where I ideated early concepts, presented to leadership, and delivered the finalized web app. During this project I collaborated with leadership, our education team, and our operations team.

Role :

Product Designer

Year :


Tools :

Figma & Glide

The Problem

Problem Sign

Increasing demand for an app to host & deliver educational content

Up until this point BlackFem had delivered their financial education curriculum to K-12 teachers via email as presentation slides, pdfs, and documents. There was an increasing demand from schools for asynchronous learning experiences in the form of an app.

Did not have the funds to get app developed by agency

The cost for the build of a comprehensive financial education mobile app was too high based on the estimate we received from an app development agency.

The Business Goals

The business goals were to create a MVP of a financial education app, Equiddie, that can be shipped quickly and efficiently to validate our product idea. We did not have any in-house app developers on our team at the time, so I had to figure out a solution to build our MVP on my own.

Background Research - Competitive Analysis

I had some basic coding background, but not enough to build an MVP of our Equiddie app on my own. At the time "no-code" tool had started to become popular and more known. No-code tools can be defined as tools that "enable people without coding skills to create software using graphical user interfaces in place of writing code". [1] I decided that it would be a smart idea to leverage one or more of these tools to build out the MVP. I could essentially code the app visually while using a spreadsheet tool as the backend. I decided to begin researching the different tools that were out there and performed a competitive analysis to determine which tool would be the best fit for this project.

Mobile Screen

Proposed Solution

Solution Tick

Build MVP In-House

The proposed solution was to design and develop a web app in-house to serve as an MVP of our product and run trial runs with classrooms in order to get feedback. Working with an MVP would provide an early opportunity to gather useful qualitative and quantitative data about how users experience our product —rather than waiting until everything is perceived as perfect. This feedback could be used as part of our fundraising process when pitching to funders. I decided to use Glide as the tool to develop the web app because it was easy to use, had good features, and the app could be built very quickly.

Guiding Design Principles & Key Solution Elements

The guiding design principles for this project were: build confidence in our users & keep it simple. We wanted to empower our users with high-quality financial education that they could access from their phones, iPads, etc from anywhere - not just in the classroom at school. This would allow parents to be a part of the learning experience as well if they wanted to. Many parents we worked with in the past had expressed to us that they had an interest in teaching their children financial concepts but they didn't know where to begin. For this reason we want to build confidence in our users by keeping things simple and easily accessible and retainable.

The key solution elements were: credit score, video lesson, and journal features. In the past students would receive a "credit score" in the classrooms we worked with based on their behavior in the classroom - so we wanted to include this as a feature of the web app. We also wanted to include video lessons that made learning asynchronous and a journal feature to give students a space to express their feeling after learning about financial concepts.

Flow Diagram

User Flow

At this point of the project I started considering the pages and features of the web app. However before I actually started designing, I wanted to begin to visualize the user flow to determine the interactions that the users would have within the web app.

User flows are diagrams that visualize the steps that users take when completing tasks — from the starting point to the last interaction (signup, purchase, submission, etc.) [2]. If done before wireframing and prototyping they can help spot areas of friction and prevent us from doing work that isn't necessary. See my user flow below:

Mobile Mockup

Ideating Design Solution

After completing the user flow, I began the design process by generating sketches based on our guiding design principles, key solution elements, and the user flow.

I completed rough sketches on paper and refined these sketches into a more coherent design. Some of the sketches are shown below:

Design Image

Some high level sketching of the credit score feature - what the visual might look like and thinking about the labels.

Design Image
Design Image

Sketches of the teacher's point of view - visualizing her entire class and sketches of the video lessons feature.

Updates After Usability Testing - Activities

After refining the sketches, I created the first iteration of the high-fidelity design. We completed usability testing to see how users interacted with the prototype when trying to complete tasks assigned to them. Since this project was time-sensitive we recruited 5 students (age 17-19) to partake in the usability testing because students of this age group were the most accessible to us at this time, and a major constraint of this project was to complete the MVP within a short timeline. Following the completion of the usability test the results were analyzed and updates were made to the prototype based on those results.

In the first iteration of the design of the prototype there were videos assigned to students with accompanying activities to complete. However, the activities and video lessons were on separate pages of the app which caused some confusion during the usability testing. When the students were asked to complete the matching activity to the video lesson they just watched, around 40% of them had trouble locating the matching activity. To solve this issue we made the activity accessible on the same page as each video lesson so there was no guessing involved in finding the right activity or trouble locating them.

Flow Chart

Updates After Usability Testing - Mood Tracker

The next update we made was adding emojis to the mood tracker labels. This change was made based on the feedback we received after usability testing. Many of the students commented that mood trackers they’ve used in the past “usually have icons or illustrations to represent the different moods”, and that was something that was lacking in our prototype. Since emojis are pretty universal, I decided to add emojis to the mood labels to help visually represent the different moods.

Flow Chart

Updates After Usability Testing - Score Scale

In the first iteration of the design there wasn’t a key to explain the different categories for the credit score, for example a score of 500 being classified as “poor”. When discussing this feature with my team, which included leadership and our education team, we went back and forth on if a credit score feature should even be included. We didn’t want students to fixate on their credit score number or credit score label so I didn’t include a label in the first iteration of the design. However, after completing usability testing I found that without the labels or explanation students were more confused about their score. So I decided to include a scale in the updated design, although we wanted to put more of a focus and highlight the educational content as the most important aspect of the app instead of the credit score.

Flow Chart
Mobile Screen

The "Why" Behind the Design - Classroom

The final design of the Equiddie web app was developed using Glide. The final design incorporated the guiding design principles, as well as the key solution elements.

The design choices for this project were very intentional in order to complete the MVP within the given constraints while designing for the opportunity at hand. The classroom page was only visible to the teacher users and was accessible via the classroom tab in the bottom navigation bar. We focused on keeping the design simple and clean. Teachers could select a student from the class list or search for their name in the search bar to give them a boost or inquiry.

Flow Chart
  1. I used a list component to include all students in the teacher's classroom along with their credit score. Left align text was used in the list for better readability, and the names of students were in a darker and larger font so the list was easy to scan. Teachers also had the option to search for a student in the search bar as well to find that student quickly without having to scroll through the list.
  2. Once a teacher clicked on a specific student they could view their credit score along with the option to give them a boost or inquiry. The boost button was the primary button indicated by the stronger visual weight in dark purple, and the inquiry button was the secondary button.

The "Why" Behind the Design - Money Mood

Including a journal feature in the MVP of Equiddie was a key solution element that was identified early on in the project. We decided to also include a "money" mood journal so students could track their mood along with journaling. The primary research focus at Equiddie is "financial trauma" which was coined by our founder. Therefore, we wanted to create a space for students to freely express their emotions in relation to learning financial concepts which can be an uncomfortable experience for many adults.

Flow Chart
  1. I included a visualization for the moods that students tracked that gave a quick overview of the different types and frequencies of moods that they were experiencing. This visualization was intended to allow the students interpret the data in an efficient and meaningful way. Emojis were used along with the labels for the moods visually express the different moods in a form that was universal.

The "Why" Behind the Design - Video Lessons

Another key solution element was including educational financial content in video format. We wanted to make the content simple, engaging, and easily accessible. Students could watch these videos with their families as well.

Flow Chart
  1. I designed the the lessons page to be simple but exciting with bold bright colors. Our education team generated the video content that was displayed on this page.

The "Why" Behind the Design - Credit Score

Including a credit score function was another key solution element, and it's something that our team went back and forth on throughout this project on whether it should even be included or not. We didn't want students to fixate on their credit score or it to become a source of anxiety for them in addition to their grades. We decided as a team to still include the credit score function but we didn't promote it as the primary function of the web app. Instead we promoted the educational content as the most important feature of the app, because spreading financial education knowledge was most important to us.

Flow Chart
  1. I included a simple graphic visual to represent the credit score, and the score itself was in a smaller lighter font in order to make the graphic the primary visual of the page instead of the "number" of the score. We changed the labels from typical credit scores to more encouraging labels which we felt were more appropriate for K-12 students. We wanted students to focus on having a growth mindset, instead of included language that could be deemed as negative for lower credit scores.

The "Why" Behind the Design - Simplicity

Lastly, I was intentional with the colors and design components used in the web app. We wanted to build confidence in our users by employing a simple and pleasant design.

Flow Chart
  1. The primary color used in Equiddie was a deep purple. This color was used because according to color psychology purple promotes feelings of elegance and power. We wanted to empower our students to understand financial concepts and feel confident.
  2. I focused on using simple consistent elements so that the interface was easier for students to learn with a reduced cognitive load. I leveraged white space to create harmony and balance in the design. The white space removed potential distractions and helped build focal points in the interface.


During this project I collaborate with leadership (2 team members), the lead of our education team, along with a member from our operations team. This collaboration was essential as it allowed me to balance our business goals, timelines, and educational goals with the support of my team.

Flow Chart

The Results

The MVP of Equiddie was implemented in 8 classrooms over a span of 3 months. Through this initial trial run, we were able to validate our MVP. We received overall positive feedback that supported continuous fundraising to build something more large scale

Flow Chart