App Concept & Design
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 decrease stress.
The app’s soothing color palette and easy-to-navigate interface makes it simple to save and share quotes. Furthermore, users can also purchase physical quote cards that come in a variety of designs.
UX Design
Art Direction
User Research
Figma
Adobe Illustrator
Reading has many health benefits such as expanding knowledge, reducing stress, and improving one's mood. But, in today’s busy world, it can be difficult to find time to read many books from start to finish.
Mindamins aims to provide all the benefits of reading through the power of quotes! Quotes can offer humor, motivation, new perspectives and more in snackable, bite-sized packages. With this app, users can read quotes that come from people of all different eras, backgrounds, and locations. They can also filter, save, and share quotes.
To begin the design process, I did a brainstorm in which I spilled out any and all ideas from potential app features to visual styles.
After some initial brainstorming, I conducted user research by sending a questionnaire to my coworkers through email and gathered their responses. I wanted to know the current emotional states as well as quote preferences of potential users.
To get visual design and user flow ideas, I analyzed different daily quote/Bible verse apps and social media accounts to see how I could best structure Mindamins. I paid close attention to the navigation, screen layouts, onboarding, and branding. Some of the apps I analyzed include “Motivation,” “Life Quotes and Sayings,” and “Holy.”
I also looked did some research to find UI ideas. For example, I took lots of inspiration from the Samsung clock app when designing the daily quote reminders page for my app.
From my research, I created three semi-realistic personas of potential Mindamins users from different demographics. I also created user journey maps/scenarios for each persona to guide me when I design and test my app.
To figure out how I would lay out my app pages, I created digital wireframes. These ensured a base structure for the app that included buttons and screens users would need to fulfill their app goals.
Something I noticed when I did my competitor analysis was that a lot of quote apps lack a distinct visual style and clear branding. As a result, many of these apps look very similar to each other, often depicting only a featured quote accompanied by a generic background image.
For Mindamins, I wanted the app to be recognizable and unique among the many daily quote apps available, so I found a clay-styled illustration library to use in combination with a purple, green, and red color palette to guide the app’s visuals.
To make my prototype, I combined my low-fidelity wireframes with my brand guidelines and illustration library. I also made the prototype interactive so it can resemble a developed app for testing.
Check out the prototype below!
Using my created personas and user journeys as a script, I asked two users to test my prototype.
User 1: 22 year old graduate student majoring in pharmacy
User 1: 21 year old student majoring in civil engineering
After sharing my app design with more people and reviewing the design multiple times on my own, I continued to make revisions and iterations to my design.
For my app call-to-action (CTA) buttons, I initially used white text on a soft green background because I thought a soft color palette would help users relax.
I ended up changing out my CTA colors because they lacked contrast and did not conform to The Web Content Accessibility Guidelines, making it difficult or even impossible for some users to read.
Initially, after users signed up and picked an avatar, they were shown the main screen where a random quote appeared. Doing this does not give users a tailored experience upon joining the app.
To better onboard users and give them a personalized experience, I added two additional steps to the onboarding process where users can choose their interests and what kinds of quotes they want to see. To find inspiration for my new onboarding, I looked at different dating apps, such as Tinder, that ask for passions or interests upon signing up.
If I were to do this project again, here are things I would do differently.
If I used a flowchart prior to making wireframes, it would've made it easier for me to visualize how users would navigate my app and would've made it easier for me to create wireframes.
If I did A/B testing earlier with a static mockup, I could've found out what colors were accessible for most users and what icons are more universally understood before making a prototype.
For my user research, I only reached out to my co-workers at the agency at which I was interning. If I had used a larger sample with people of different ages, backgrounds, and demographics, I believe I would've gotten much different results. I also would ask more questions relating to the interviewee's favorite apps and why.
For my user testing, I tested with two college students. If I had tested with more people from different demographics, I believe I would've found more things to change in my design. For instance, if I tested my app with a 70-year-old who isn't tech-savvy, there would be a lot more insight into how I can make apps more accessible for older users.