top of page

become

‘become’ is an app that provides daily affirmation quotes, journaling, vision board and meditation features to help users become more self-aware and motivate them to accomplish their goals.

become.png
Group.png
Design Role
・UX Designer ・UX Researcher・UI Designer
cloud 1.png
Duration & Tools
・3 Weeks ・Figma・Maze ・Google Workspace

Part 1: Overview

loupe 1.png
The Problem

Due to COVID-19, we are living in an unprecedented time. With the uncertainty of what is to come, people are experiencing high levels of anxiety, loneliness, stress, and lack of motivation. Like any other muscle in the body, constant exercising of the mind is the key to a healthy mindset for all of us.

idea 1.png
Solution

‘become’ offers four features:

  • Journaling: Journaling is an incredibly powerful tool to gain clarity and insight. Writing about your emotions and thoughts helps you become self-aware.

  • Affirmations: Affirmations can reaffirm the positivity back into your life and help regain or increase your self-confidence.

  • Vision boards: Vision boards provide you with a daily visual reminder of your dreams and goals. Visualization is one of the most popular and effective mind workouts.

  • Meditation: Meditation helps nurture a tired soul so that peace can be transferred to the rest of the body and the potential for healing on many levels can open up.

target-audience 1.png
Audience
  • Around the ages of 16-40

  • Interested in self-care practices

Part 2: Research & Discovery

qualitative-research 1.png
User Survey

To find out more about my potential users, I launched an online survey (56 people answered) and conducted five interviews with people fitting the profile of my target group. The questions focused on what they do to stay motivated/positive, whether they write a journal to be aware of their feelings and what makes them keep at a goal or routine.

Key insights:

  • People would most likely stick to a goal they have set if they have good motivation behind it and receive a weekly or daily reminder.

  • About 45% of people use planners, journals, or notebooks to track their goals and tasks.

  • About 90% of people want to be more mindful and self-aware.

Screen Shot 2021-12-28 at 7.50.31 PM.png
Screen Shot 2021-12-28 at 7.48.52 PM.png
Screen Shot 2021-12-28 at 7.50.02 PM.png
Screen Shot 2021-12-28 at 7.49.40 PM.png
research 1.png
Competitive Analysis
Screen Shot 2021-12-30 at 10.56.26 PM.png
stoic.
Strengths
  • Modern, minimal User Interface design

  • Various features: journaling, meditations and breathing exercises

  • Analyzes your daily entries to give you insight into what influences your emotions

Weaknesses
  • A lot of questions are confusingly worded

  • There is no shuffle mode for quotes

UI Design
Untitled (2).png
Untitled (1).png
Untitled (3).png
Screen Shot 2021-12-30 at 10.57.48 PM.png
Gratitude
Strengths
  • Various features: gratitude journaling, constructing self-affirmation, receiving daily quotes and building a vision board that consists of images and goals

  • The free version of the app is extremely generous (The paid version allows you to add more photos and export your data)

Weaknesses
  • No color/photo options for the backdrop

  • User interface design not attractive

UI Design
Untitled (7).png
Untitled (8).png
Untitled (9).png
famous 1.png
User Personas

Taking all the findings from the user surveys and competitive analysis, I created four user personas to help make the target audience more tangible.

Jennifer Clark.png
Zender Williams.png
Naomi Miller.png
Leo Williams.png

Part 3: Information Architecture

scenario 1.png
User Stories

Once I understood the user's goals, motivations and pain points, I chose six user stories as the key features of my product.

User Stories.png
yacht 1.png
User Flow

The user flow helped me get a greater sense of users’ expectations and how they will interact with the prototype.

User Flow.png
sitemap 1.png
Site Map

I used the site map as a guide with the structure and organization of the content within the prototype.

Site Map Version 1.png
sketchbook 1.png
Sketches

・Onboarding ・Home・Journal ・Meditation・Vision Board

Screen Shot 2021-12-15 at 10.17.11 PM.png
wireframe (1) 1.png
Low-Fidelity Wireframe

Once I had an idea of which sketch to move forward with, I allowed the user flows to guide me in creating each screen and I translated my sketches into low-fidelity wireframes using Figma.

Low-Fidelity Wireframes.png

Part 4: Visual Design

XMLID_1580_.png
Style Tile

At this stage of the project, the branding and identity began. I chose a dark background to make the design gentle on the user's eyes. The key characteristics that I wanted the brand to exude are:

  • Peaceful

  • Pleasant

  • Relaxing

  • Attractive

become Style Tile.png
illustration 1.png
UI Changes in the early Iteration

The following changes were made to the initial UI design based on feedback from a senior UI designer and heavy user of the journaling app.

#1 Changed Icon styles and added a white background to the icon set on the home screen to make it stand out.

Icon set .png

#2 Changed the journaling page from a white background to black so that users can add journals at night while relaxing and being easy on the eyes.

Journal.png

#3 Changed pink/white UI elements to the brand's main color purple. The contrast is stronger and more prominent.

Meditation.png
online-test 1.png
Prototype and User Testing

I conducted a usability test using Maze on a mid-fidelity prototype to test both the design solutions and visual designs. I outlined a usability test plan and recruited six participants to:

  • Sign in with their email address

  • Add their first journal

  • Create their first vision board

  • Listen to 15 mins "Confidence Meditation"

  • Lock the app with PIN code

All six participants reported that they were able to accomplish all tasks and did not feel confused or frustrated with the app or tasks.

Heatmaps

maze_screenshot_interaction (3) (1).jpg
maze_screenshot_interaction (9) (1).jpg
maze_screenshot_interaction (12) (1).jpg
illustration 1.png
UI Changes in the latest app Iteration

#1 From the feedback from the usability testing, one participate suggested changing the top right icons to the bottom buttons.

Buttons changed.png

#2 The background photo of the home screen changed to one that better matches the brand colors and gives an optimistic impression.

Home Screen.png
computer-game 1.png
High-Fidelity Prototype - The Final Design
Onboarding
Onboarding.png
Home Screen and Notifications Setting
Home screen and notification setting.png
Lock My App - Privacy
Lock my app - Privacy.png
Journaling
Journal.png
Vision Board
Vision Board.png
Meditation
Meditation.png

Part 5: Reflection

teaching 1.png
What I Learned

Developing the idea for this Manifestation Journal app was a complete creative delight. It gave me a better understanding of design thinking and each step of UX research. The design had to be intuitive and straightforward to accommodate the four main features (journaling, affirmation quotes, vision boards and meditation). I wanted the home screen to be stylish and minimalist. I didn't want to add any background to the icon set; however, for usability consideration, it is better to have a white background so that the icons stand out and are more user-friendly. I learned that keeping an open mind throughout the design process is essential to avoid getting attached to a specific idea, solution or design element.

steps 1.png
Next Steps
  • Add the ability to search/sort by journaling title

  • Increase the variety of meditation

  • Add podcast feature

bottom of page