Mindamins

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.

SKILLS

UX Design
Art Direction
User Research

TOOLS

Figma
Adobe Illustrator

Screenshot of Mindamins' five screens of onboardingFour packs of physical quote cards from Mindamins with the following themes: "classic," "doodly," "city," and "pups"

Define Problem

Problem

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.

Solution

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.

Brainstorm

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.

Research

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.

Competitor Analysis

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.

Screenshots of competitor daily quotes and Bible verse apps and the Samsung clock app

Personas

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.

Wireframes

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.

Digital wireframes of Mindamins app

Branding & UI

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.

Mindamins brand sheet featuring logos, typography, colors, illustrations, and UI design elements

Prototype

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!

Testing

Using my created personas and user journeys as a script, I asked two users to test my prototype.

User Test 1

User 1: 22 year old graduate student majoring in pharmacy

  • This user ran into some difficulty with what each icon on the homepage represents.
  • As a result, I designed an opening screen that gives instructions on how to advance to the next quote and what each icon on the homepage does.

User Test 2

User 1: 21 year old student majoring in civil engineering

  • With the revisions made after my first user test, this user was able to easily navigate the app.
  • There were some prototyping errors discovered.

Iterations

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.

Revised Colors

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.

Revised Onboarding

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.

Mindamins app with previous screens in greyscale and updated onboarding screens in color

Takeaways

If I were to do this project again, here are things I would do differently.

Use a Flowchart

Test More at Different Stages

Conduct User Research and Testing with a Larger, More Diverse Sample

Back to the top ↑
OverviewDefine ProblemBrainstormResearchPersonasWireframesBranding & UIPrototypeTestingIterationsTakeaways