.png)
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.
Product Designer
2021
Figma & Glide
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 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.
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.
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.
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.
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:
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:
.png)
Some high level sketching of the credit score feature - what the visual might look like and thinking about the labels.
Sketches of the teacher's point of view - visualizing her entire class and sketches of the video lessons feature.
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.
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.
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.
.png)
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.
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.
.png)
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.
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.
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.
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
.png)
.png)
