top of page
kure cover-min.png
Artboard – 2@2x-min.png

Support People with Negative Emotions During Covid-19 Pandemic Through Research and

Mobile Experience & Interface Design

 Part 2 - Prototype & Validation 

PASSION PROJECT

Role: Research & UX UI

Timeline: May - July 2020 

Artboard – 2@2x-min.png

 Part 2 - Prototype & Validation 

PASSION PROJECT

Role: Research & UX UI

Timeline: May - July 2020 

What is Kure

Kure is a comforting and accessible journal app to help people who need to feel focused and address negativity in life to be more mindful of mental health through a mood tracker and an interactive and guided journaling structure. 

Area of Focus

This page is Part 2 of Kure's whole design process, which covers the prototype, user tests, and validation. 

My Roles

UX Design

Visual Design

Brand & Identity

Usability Test

User Interview

*received weekly remote design critiques from a senior UX mentor

Deliverables

Wireframes (Low-High)

Mood-board & Style Guide

Hi-Fi Prototypes

Interactive Prototypes

Usability Test Analysis

Specifications

Part 2 Timeline: 3 weeks

Software & Tool

Adobe XD

Photoshop

Whimsical

Drawing Tablet

Snapshot

The COVID-19 pandemic has resulted in terrible mental problems for people: Feelings of isolation, depression, fear and worry about the health, the financial situation or job, or loss of support services they rely on.

Image by Joshua Rawson-Harris

47% of the sheltering-in-place people reported

negative mental health effects.

--

KFF Health Tracking Poll | March 2020 in the U.S. with the sample of 1,216 adults ages 18 and older

Discovered Problem

Social interactions and activities are not available at this time to maintain mental health and an overall sense of well-being. 

 

How can people cope with negative feelings and concerns safely at home.

Product Vision

A journaling app allowing people to self-help through tracking their moods and reflecting on life effortlessly.

Long term goal: becoming an integral part of people's lives to boost mental health.

Outcome

Designed a mobile app MVP to learn how the target users of the product experience and respond to the app’s core features and business purposes.

Design Process

The MVP solution was built in 6 weeks by following  IDEO's Human-Centered Design Process to make sure my design would be based on research and user feedback. 

Design Process IDEO

IDEO's human-centered design process

continued from "Kure Case Study (Part 1)"...

Wireframes

After the quick sketching, I hopped into Whimscal to map out the MVP solutions of the app. I invited Phoebe and Suzuko for remote usability tests.

  •  Onboarding Process

avatar1.png

Phoebe: "Kure feels like a caring friend. The sign-in process is very conversational...I love it. 

avatar 2.png

Suzuko: "I love having options to explore as a guest or choose to sign in for more features. "

Onboarding Process

Wireframes for onboarding process

  • Track Mood + Create a Journal

avatar1.png

Phoebe: "Can I customize moods and activities?"

avatar 2.png

Suzuko: "Can I skip the mood and jump directly to writing journals?"

Create Journal Process

Wireframes for tracking mood and writing journals

  • Print Store & Mood Insights

avatar1.png

Phoebe: "Having a real notebook in hands is rewarding! I would love to order one when I have enough journals."

avatar 2.png

Suzuko: "I like how the mood is analyzed in different ways. "

Print Journal Book Process

Wireframes for print store & mood analysis

  • User Setting & Reminder

avatar1.png

Phoebe: "I'm not familiar with the app widget. I've never set up a widget before. Notification can remind me to do journaling. 

avatar 2.png

Suzuko: "The widget motivates me to keep the string and write journals. Notification is kinda annoying."

User Setting and Reminder
avatar1.png
avatar 2.png

Wireframes for user setting & A/B testing for user reminders

Usability Tests

I analyzed Phoebe and Suzuko's test results and feedback and prompt iterations before visual design.

Usability Test Result

The users' satisfaction chart after finishing the tasks

  • Iteration 1: Options to Skip the Mood Tracker

Before

Sometimes I just want to jot down my thoughts... Recording mood and activities are tedious.

--Suzuko's feedback on mood tracker

skip button

After

Add a skip button to skip the mood tracker, so users can quickly start writing journals. 

After adding this option, the users can either jump directly to the journal, or only track their mood or do both. The process is flexible to adjust to different needs. 

Iteration on Skipping Mood Tracker

Iteration on skipping the mood tracker

  • Iteration 2: Customize Moods and Activities

Before

I can't find a mood and activities that fits my day. Can I customize them?

--Phoebe's feedback on mood tracker

After

other1
other2

Users can enter "Other" moods and activities in the pop-up windows to better describe their day.

Instead of adding customized moods and activities to the list, I decided to only show them on a journal screen. By doing these, users wouldn't be overwhelmed by the growing choices in the future. My users preferred this idea too. 

Iteration on Customize Mood and Activities

Iteration on customize mood and activities

idea.png

TAKEAWAY

icon-thinking-min.png

Sometimes people like a feature, but sometimes they may want to skip it for more important things. Giving them options to use in either way is the key.

4 Prototype

Branding &

Visual Design

According to my user research, the users would prefer a clean and soothing design to help them calm down and focus on thinking. 

Just like children sharing secrets with their teddy bears, adults need their comforting app too!​ I would like to include a journal pal in the app to accompany and guide my users during journaling.

Moodboard

Moodboard created by using Adobe XD

I developed a component library in Adobe XD by following my style guide and Apple's Human Interface Guidelines. 

Style Guide of Kure

Style Guide of Kure

Water Ripple
4.png

Hi-Fi Prototype

I delivered the final UI design and clickable prototypes in Adobe XD for the next usability testing.

avatar 2.png

Suzuko's onboarding

The onboarding process is more like a chat between Kure and Suzuko.
The minimal and comforting design helps Suzuko to relax and focus. 

Kure's Onboarding Process

Kure's onboarding process

avatar 2.png

Suzuko tracks daily mood and activities

Before writing the journal, Suzuko selects her mood and related activities to track her mental health and recall the day.

GIF: Kure's process of tracking mood and activities

GIF: Kure's process of tracking mood and activities

avatar1.png

Phoebe writes her journal

Phoebe can skip the mood tracker and write her journal only.

Writing a journal is this easy - choose a photo, create a title, and then write or record audio!

Kure's journal interfaces

Kure's journal interfaces

avatar 2.png
avatar1.png

Phoebe and Suzuko switch among the tabs

Notebook - Print Shop - Mood Insights - Account Settings

GIF: Kure's 4 tabs

GIF: Kure's 4 tabs

avatar 2.png
avatar1.png

Phoebe and Suzuko's Reminders 

Widgets and push notifications motivate users to keep up journaling according to their routines.

Kure's reminders

Kure's reminders (widget and notification)

Water Ripple
5.png
5 Validate

TITLE OF THE CALLOUT BLOCK

Usability Test

Round 2

I performed 6 remote user testing and interviews on the high-fidelity prototypes to collect feedback and prompt iterations to plan for future steps.

The users' satisfaction chart after finishing the tasks

The users' satisfaction chart after finishing the tasks

Before

Iteration Before

Before

When I'm done, I hope Kure can say something to motivate me.

--Alice's feedback on journal

After

After saving the journal, users will receive Kure's message under the entry preview.

Once tapped, the journal card will flip to show the quotes. The motivational quotes are chosen based on users' moods. 

Iteration After

After

Iteration of adding Kure's message to motivate users

idea.png

TAKEAWAY

icon-friend.png

Sometimes a private journal cannot emote the empathy that people might need. By adding the daily quote, Kure is more like a real pen pal!

Conclusion

Conclusion

Outcomes

  • Deliverables
    Designed and prototyped MVP screens illustrating the concept of an iOS mobile app and also tested with 8 users. 

     

  • Values
    Kure Journal's concept provides value to users' mental health and the business as well, especially during the COVID-19 Pandemic. 

What I would do differently

  • Due to social isolation, I couldn't meet the users in person. When observing their interaction with the app, I focused on their mobile screens and didn't pay enough attention to their facial expressions. I might miss some important reactions they had experienced. 
     

  • Next time, I would record both screens, ask them to say out loud more.

​What I learned

  • Often, user experience and business goals go hand in hand. 
    A journal printing service brings memories from the screen to the users' hands, and also increases the conversion rate. 

     

What's next

  • If a product like this is built in similar MVP, there are several things I would be interested to test in future research:

​📊

What are some other mood analysis insights that users may need?

​♥️

What are the most common things that people use the app for?

​🙋🏻‍♀️

What are some of the unique ways people are using the tool?

​🤔

What are some other profitable features that users will be willing to purchase?: e.g. stickers to decorate journals

----------  Thanks for reading. 💙  ---------

Screen Shot 2020-09-15 at 6.44.09 AM.png

Next...

Fridgee!

An iOS Food Inventory App to help reduce food waste at home

  • User Research

  • Market Research

  • User Persona

  • User Story

  • User Flow

  • Sitemap

  • Sketches

footer cover v3.png

Thanks for visiting! Like what you see?

Let's chat.

bottom of page