Wireframes

Design rationale

Gamification

The wireframe prototype is largely based on our paper prototype of Design 1 (the game-like learning app) since this design had a positive reception from our peers. We implemented the changes mentioned under “In-class Design Review Takeaways” (which is at the bottom of the Ideation page that can be accessed above) in order to further gamify the app.

Simple and Minimalistic

We designed our wireframe prototype to be simple and minimalistic. In this prototype, we used the default fonts and UI/UX symbols and icons provided by the prototyping tool that we were using, since we were focusing on designing the site’s functionality and not on determining its aesthetics.

We also designed our prototype to be simple and minimalistic since we wanted to only include useful features in the app. This will allow it to not be cluttered, which will make the app easier to learn how to use and easier to remember how to navigate. It was important to us to make the app easy to use so that it’s features do not overwhelm the user and add to the stress that they may be feeling as a result of actively thinking about their personal finances while using the app. To further increase the app’s learnability and memorability, we included a tutorial that a user can use to learn how to use the app’s main features when they open the app for the first time.

General Structure and Hierarchy

Additionally, we referenced other apps when designing our own to see where different features and functionalities are typically placed on learning and streaming apps. We wanted to place features in spots where they commonly are in apps in order to further increase how easy the app is to learn and remember how to use. As a result, we made the main navigation buttons to be the two most important pages of the app, the landing pages of the game, or “Path”, feature and of the Explore feature. We made links to the Path and Explore features to be the main navigational buttons since these are the two main functionalities of the app. We also did so since this makes the most important features of the app easy to access and toggle between no matter what page of the app the user is on, which increases the app’s usability.

Mockups

Design rationale

Content and Structure

The app is structured so that navigation is logical, intuitive, and similar to the structure of other learning and streaming platforms. We made the first landing page of the app to be the “Path” feature, since this is the app’s most important feature. We added the “Profile” page and included features in it to make the app more customizable so that it would feel more personable. We removed the starting level feature and added the Quiz to determine the user’s starting level since it will more accurately determine the user’s starting level on the Path than their financial confidence level possibly could.

Graphics

We based our other design decisions on our goal to create a fun, non-stressful way for users to improve their financial literacy. To reduce the potential stress that the user might feel when reflecting on their personal finances, we aimed to make the app feel playful.
We incorporated fun graphics that would make the app feel playful but not childish. The main background graphic of a girl traversing small hilltops, the smiling location marker, and the logo of a hand holding a coin were designed to be fun graphics that make the app feel more lighthearted and enjoyable to use.
We also choose to create graphics that would create a metaphor between the user completing levels in the path and “leveling up” in life by growing their personal literacy. This intended metaphor is the main reason why the main background graphic is a figure traversing a path lining the top of small hilltops.

Color Scheme

For our color scheme, we decided to use a color palette consisting of shades of green, blue, and orange. Calming blue and green colors were used to reinforce the theme of a nature path. Green and blue are also the app’s main colors since these colors have a calming effect that we intend to transfer to the users while they use the app. We used pops of orange in order to make the app feel more playful and lighthearted.

Accessibility

Our design decisions are also largely based on accessibility, since we want our app to be accessible to as many potential users as possible. We used WebAim to check the color contrast between the font types and their backgrounds so that fonts would be easily legible and so that colors would be color-friendly to those with vision disabilities. For the screens for viewing the podcasts and videos, we used a black background to make the album covers pop out, which is better for visibility. We used black and white for the font colors and occasionally for the button colors in order to create strong contrasts between them and their backgrounds, so that text would be easy to read and buttons easy to spot. We chose Helvetica for our font-family because it’s a widely used and easily legible typeface, but still has character.

Heuristic Evaluation Takeaways

The heuristic evaluation using Jakob Nielsen's 10 Usability Heuristics revealed three severe usability issues with the prototype's design.

User freedom and control: The system failed to support undo and redo functions. There was little autonomy to self-correct, which led to frustration. Returning to previous pages was confusing, and navigation occurred through trial and error because the design was unpredictable. Furthermore, the app did not allow for customization and forced users to engage with the same material and content.

Flexibility and efficiency of use: The app has a lack of accelerators and unclear signifiers slowed navigation.

Did not help users recognize, diagnose, and recover from errors: The system did not allow users to correct their mistakes because it did not include "help" options or a search and navigation bar.

We corrected these errors when iterating upon our final prototype.

Prototypes

Wireframes

Design rationale

Gamification

Simple and Minimalistic

General Structure and Hierarchy

Prototype

Mockups

Design rationale

Content and Structure

Graphics

Color Scheme

Accessibility

Screens in the Order of a Potential User Flow Through the App

Heuristic Evaluation Takeaways

Final Prototype