Design Role
・UX Designer ・UX Researcher・UI Designer
Duration & Tools
・3 Weeks ・Figma・Maze ・Google Workspace
Part 1: Overview
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.
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.
Audience
-
Around the ages of 16-40
-
Interested in self-care practices
Part 2: Research & Discovery
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.
Competitive Analysis
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
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
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.
Part 3: Information Architecture
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 Flow
The user flow helped me get a greater sense of users’ expectations and how they will interact with the prototype.
Site Map
I used the site map as a guide with the structure and organization of the content within the prototype.
Sketches
・Onboarding ・Home・Journal ・Meditation・Vision Board
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.
Part 4: Visual Design
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
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.
#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.
#3 Changed pink/white UI elements to the brand's main color purple. The contrast is stronger and more prominent.
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
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.
#2 The background photo of the home screen changed to one that better matches the brand colors and gives an optimistic impression.
High-Fidelity Prototype - The Final Design
Onboarding
Home Screen and Notifications Setting
Lock My App - Privacy
Journaling
Vision Board
Meditation
Part 5: Reflection
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.
Next Steps
-
Add the ability to search/sort by journaling title
-
Increase the variety of meditation
-
Add podcast feature