From seeing new perspectives to increasing one's mood, the benefits of reading quotes are plentiful.
Mindamins combines fun illustrations and an easy-to-follow layout that takes users out of their current situation and into an app where they can learn new perspectives and get new insights on the world.
The app’s soothing color palette and easy to navigate interface makes it easy to save and share quotes. Furthermore, users can also purchase physical quote cards that come in a variety of designs.
Studies have shown that reading can benefit human mental health and reduce stress. At the same time, researchers have also found that the average human attention span has shortened over time.
Books hold centuries of human knowledge, but, in the busy world we live in, it can become difficult to dig into a book to search for the exact life advice we need at the exact moment we need it. A potential solution to this problem is reading quotes — short excerpts from books or speech.
Mindamins aims to improve the mental health of users through the reading of quotes. These quotes can be filtered to tailor toward users' own needs.
To begin my design process, I did some brainstorming. I wrote out what features I would want to include in the app as well as possible style directions.
After some initial brainstorming, I conducted user research by sending a questionnaire to my co-workers through email. From my research, I then created three semi-realistic personas of potential users from different demographics.
Furthermore, to get visual design inspiration and ideas for my app, I looked at different daily quote apps as well as social media daily quote accounts to see how I could best lay out my app. I also looked at lots of apps and design systems for UI ideas. For example, I took lots of inspiration from the Samsung clock app when designing my reminders page for Mindamins.
For the branding of Mindamins, I decided to go with a purple, green, and red color palette and a logo that features a pill capsule with quotation marks on each half. Initially, the colors were a lot lighter than what I ended up with, but in order to have more contrast and increased accessibility, I went with darker tints. The illustration style that drives the app is done in a fun, clay-like style.
My primary action buttons are rectangular and purple with white labels. My secondary action buttons are similarly styled but filled in with a lighter purple.
My chips, or tags, are rounded rectangles with black labels. During an inactive state, the chips are filled with white, and during an active state, the chips are filled with a light green.
I also made sure to include a progress bar so users can see what step they are on during the onboarding process. The grey bar is segmented into uniformly shaped sections and each section gets filled in with green after a step is completed.
To figure out how I would lay out all my pages, I created low-fidelity digital wireframes. These were created to ensure a solid structure to the app that included everything users need to fulfill their app goals.
Using the skeleton of my low-fidelity wireframes, I created a high-fidelity prototype, paying close attention to alignment and consistency.
With my high-fidelity prototype, I conducted some user testing based on prompts that I wrote for each of my personas. One thing I found during my first user test was that some of the icons on the app’s homepage confused the user. As a result, I included an instructions page before displaying the first quote. The instruction page spells out what each icon does and how to navigate through the app.
During the design of Mindamins, I did run into some bumps and hiccups that I learned from and used to improve my app. For example, I initially wanted to go with a soft color palette for buttons and text because I thought it would be comfortable on the eyes of potentially stressed users and help them to relax.
What I later found was that my color choices did not conform to the Web Content Accessibility Guidelines and would be difficult or even impossible for some users to read.
Another area in which I improved my app was within the onboarding process. Initially, after users signed up and picked an avatar, they were shown the main screen where a random quote appeared. Doing this does not tailor the experience and quotes to users right when they sign up. To better welcome users to Mindamins upon first use and give them a more personalized experience, I added two additional steps to the onboarding where users can choose their interests and what kinds of quotes they want to see. I got this tip after I shared my app at a portfolio review.
To get design inspiration for these two new screens, I looked at different dating apps, such as Tinder, that ask for passions or interests upon signing up.
More testing at different stages
Gather Research from a Larger, More Diverse Sample