Case Study - SimplyLife

SimplyLife Case Study
Created by Camilla Wong

Project Overview
This project explores solutions to the problem of the
coronavirus-19 pandemic has negatively affected many
people’s mental health and lifestyle. SimplyLife as a centre
for mental health guides users to plan their journey under
quarantine. My objective is to help people to release
pressure and negativity in such a disquietude city.
T
ool Used Figma
Project Timeline 12 weeks
My Role UI / UX Design Consultant
1 © Camilla Wong All Rights Reserved.

© Camilla Wong All Rights Reserved.
Background
The government of Hong Kong prevents any way of social
gathering of more than 2 households in public and private
premises during COVID-19 pandemic. Lots of office
workers are required to work from home to reduce social
interactions and are not allowed to go back to the office for
any reason.

However, this measure influences people’s daily lives. Most
Hong Kong people living with their families might be
impacted as they stay together for a long time in a rather
small space (the average living space of public rental
housing tenants in Hong Kong is 13.5 square meters per
person in 2021).
Research Goal
My goal is to discover the office workers’ needs and how
the desk space can be optimised and utilised to improve
their work and lives.
Hypothesis
I plan to observe the office worker’s current desk space
during their working from home arrangements and collect
their preferences.
Research
Contextual Inquiry
(Hong Kong: public rental housing average living space per person 2021 | Statista, 2022)
Target Respondents
Full-time job at the tim
Have had experience working from home
User Interview
Figure 1: User Interview
3

Research
Contextual Inquiry
Initial Problem Statement
“Office workers need a working space other than his/her
home and office under the social distancing measure because
their current environment might not be suitable for working.”
Refined Problem Statement
“Office workers need a platform to increase the social
bonding and working concentration under the social
distancing measure so that they can achieve the goal of work-
life balance.”
Affinity Mapping
Figure 2: Affinity Mapping

Figure 3: Persona
Research
Persona
(Personas – A Simple Introduction, 2022).
Persona Based on Real Users’ Experience
For people who are not living in Hong Kong, I tried to
explain more about the background in the scenario section
since it is much related to Hong Kong’s policy. When I was
framing the persona, I received a message from my friends
saying that they have been tested positive. I asked them
about their feelings and how their experience was. The
testing centres are full and people are required to wait in
line for more than 6 hours in such cold and raining weather
(5-8°C). There is no explicit instructions and follow-up
actions such as isolation or moving to hospital when the
citizens are tested positive.

Their experience and COVID-19 news arouse me to design
a useful solution and engaging persona
Fine-tune Research Thesis
From the user interview and competitive analysis, I can fine-
tune the research thesis about the mental health influence
in the case of staying at home for a long period under
social-distancing measures, although it comes from
quarantine or assigned working from home. Persona acts as
an important role in design thinking, which could help to
understand the users’ painpoints, expectations, behaviours,
and goals.

Research
User Journey
Figure 4: User Journey
User Journey Based on the Research
Beginning with the scenario, considering
that it is the key step to underpin my theme,
I acted as the persona in my mind and
thought about what I would do if I were her
during the process of drawing the whole
journey.

Research
User Flow
As-it User Flow
With reference to my interviewee, persona and me, I can apply their working from home experience to the user flow. I highlighted the
process from wake-up to off-duty when they were working from home in the following graph.
Figure 5: As-it User Flow
7

Research
Competitive Analysis
I outlined the direct and indirect competitors in the competitive analysis and positioning map. They
do not offer similar products and services to satisfy customer’s needs but they offer different
products and services in the market for people to stay at home for a long period, which potentially
satisfies my target group.
Comparison
Relationship of Competitors
The wellness kit (a booklet) from Faculty of Social
Sciences, HKU, consists of an energetic journey for the
people with 14 days or 21 days quarantine. The
strengths of the wellness kit is to help you set up some
targets within the quarantine period. It can build
people’s confidence and re-identify the quarantine as a
reborn adventure to have positive influence. Unlike this
product, ‘Find Doctor’ is a professional platform for
satisfying health needs. It provides healthcare services,
including online consulting and drug delivery.

However, where were few products specific for health
care during quarantine on the market. For people to
stay at home for a long period, I intended to develop
an app as an interactive guide to ease their
psychological pressure which was able to meet various
situations and brought positive impact.
Figure 6: Positioning Map
Figure 7: Competitive Analysis

Research
Design Prompt
In previous research on the user journey map, I observed quite a big issue of psychological distress during the quarantine. People often felt
strongly negative when they got sick and isolated. As the initial problem statement did not emphasise on this, I utilised this opportunity to
reframe the problem statement so that it illustrates more accurately to the following prompt:
“The person who required to quarantine, need a
platform to ease the mental pressure so that they
can achieve the goal of work-life balance.”

Ideation
Priority Matrix
Priority the Ideation
I wanted to analyse the solutions that I have thought about,
and I used the priority matrix to help me. In the diagram, I
categorised the solutions by value and feasibility. The high
value solutions with high feasibility are prioritised to the
top of the list while the solutions with rather low value and
feasibility will be kept in mind, which can be nice-to-have
functions in the future when resources are abundant. I
summarised the core ideas into the to-be journey.
To-be Journey
People who are required to undergo quarantine may feel
uncertainties and anxieties. A reflective story with different
tasks and interactive activities may help the user to soothe
their emotions everyday. A kind character will become a
close friend to accompany the user throughout the whole
adventure. Users have choices to combine the element
rewards by different tasks to discover the collection. All
relevant quarantine information will be centralised in one
platform, where people can share their experience, and
exchange their knowledge and resources. Figure 8: Priority Matrix

Ideation
Sketch
From Idea to Sketch
Revisiting the journals helped me organise my thoughts, which was
beneficial when I began to sketch my idea. A landing page is a must for
users to learn about the story which serves as an introduction to the game
and lead them to kick-start the journey. The personalised journey will be
generated by an A.I. analysis on the background information of the
user,the time that the user plans to be in quarantine and the users’
feelings. The home page consists of a calendar, the progression,
navigation bar, menu, and profile. The idea is about encouraging the user
to work on the daily positive activities together with the character he/she
created.
Challenge of the Sketch
I tried to complete a screen with simple visual alphabets within 2 minutes.
The challenge for me was the unclear structure which made me feel
aimless and lost. However, if I had a team, there is no doubt that the
sketch would be the best way for the designer and non-designer to
synchronise their vision, which helps the team iterate and refine quickly
and conveniently. I continued sketching and sorting out features, while I
reflected on how deep I can dig down in the limited time condition.
Figure 9: Sketch

Design
Wireframe
Low-fidelity Wireframe
The low-fidelity wireframe is like a blueprint for a design that lays down
the conceptual structuring contents to a visual solution.
Game Concept
While I was thinking about the solutions, two elements came up in my
mind.
Non-fungible token (NFT)
One of the most famous evolutions of cryptographic assets on a
blockchain, a non-fungible token (NFT) can be a digital product that
represents real-world assets like artwork. Customers can sell digital
artwork using blockchain with unique identification codes and metadata.
Puzzle Game
I also thought about my favourite puzzle game – Doodle God. Players
need to combine elements to unlock more new elements (a total of 228
required elements). The game uses ‘play to educate’ which allows players
to learn the combination results as reflected in the actual world.
Figure 10: Wireframe

Design
UX Flow
From Wireframe to UX Flow
Adopting their features (NFT and Puzzle Game) and integrating them to my idea, I
designed the interactive app which centralised the COVID-19 related information
to the mutual assistance of the community and designated the personalised
journey for the people who need to undergo quarantine.
Journey
The journey covers the discipline of yoga, exercise, meditation, positive thinking
and relaxing activities. A character that you created, will accompany you on the
whole journey.
Collection
Players are able to collect elements to create a new character by their preferences
that may create rarity. Although this can not be done for trading like NFTs, the
design covers collection advantages, and we can keep the cryptographic on
blockchain environment as the potential development in the next phase.
Community
Players can share their recovery experiences and ask for resources in the forum.
Moreover, they can chat with the person with similar situations and interests by
using an AI to match people of similar background and age, to have a social
bonding.

Figure 11: UX Flow

Analysis
Information Architecture
Site Map
When I started to draw the information architecture for this project, I
recognised that this relies on user research or any resources that I did
before, otherwise it is like a book without an outline which causes
decisions to be made difficultly on the product structure. The first version
of information architecture (also called site map) is simple, which is using
the framework of taxonomy.
I re-delineated to a more detailed model that encompasses major
interactions. The round-cornered and sharp-cornered rectangles in the
right graph represent on screen and pop-up levels respectively, it enables
users to understand how to navigate in the app through information
architecture. This also is a breath to go back to the root of everything, to
make sure the architecture could help users reach the goal in the logical
category.
Figure 12: Site Map
Figure 13: Information Architecture

Analysis
Card Sorting
Card Sorting
Group card sorting enable us to understand user’s expectation and direct see their response through observations. I decided to interview 3
participants, with the backgrounds of designing and management, to arrange the cards into logical categories and name the grouping. I
briefly introduced the purpose of the app to them and let them arrange the cards from their perspective through Miro.
Figure 14: Card Sorting

Analysis
Navigation
Card Sorting Recommendations
Eventually with enough feedback that I have been
able to develop a findable navigation.

I used Abby Covert heuristic to analyse the results in
the following recommendations table. The
recommendation based on the observation and the
heuristic is findable, accessible, clear, communicative,
useful, credible, controllable, valuable, learnable, and
delightful.

I am happy to involve participant in my project that
they can supplement my thought. I grouped the
content by function and simplify the primary
navigation to just 4 core global navigation in social,
library and homepage, and the local navigation which
covers profile. Figure 15: Card Sorting Recommendations
(Information Architecture Heuristics – Abby Covert, Information Architect, 2022)

Analysis
New Information Architecture
I came back to this architecture because the card sorting changed my mind. The result indicates most participants focus on the meaning of
the label. I rearranged the structure and consider the topic name through the framework of choreography in the second version.
Scope
Onboardin
Instructio
Logi
Account Registratio
Referra
Evolution
Collectio
Journe
Daily Activit
Socia
Encourangement to Frien
Explore new Friend
Fourm
Articl
Profil
Accessibility Mod
Setting
Logout

Figure 16: New Information Architecture

Design
Prototyping
Low-fidelity Prototype
I used Mockup, Adobe XD, Sketch as my wireframe
tool before, and now I am usually using Figma which
is a powerful tool to co-work with my teammates. I
really enjoy the auto-layout function which helps me
arrange the perfect alignment on my archetype as
well.

In this prototype, I concentrated on the happy flow
and kept discovering probable scenarios to develop
variations. I want to validate my idea before finalising
the product, thus I included most functions in this
hotspot prototype for interviewees to experience.
Figure 17: Low-fidelity Prototype

Test
Usability Testing
Overview
I interviewed 2 participants, who have been in quarantine. I observed that the priority of the tasks is very important. Despite the
requirements from the coursework being two major tasks, I still went through all the tasks with an unmoderated approach to validate my
idea from the users’ point of view.
Goal
The purpose of usability testing is to discover the
problem in the user’s experience.
Recommendations
After completing the testing with the participants,
there were two follow-up questions, “Will you use
this app during your quarantine?” and “Do you think
it is useful for overcoming a quarantine?”. User 1
thinks that this app is useful and can help to release
the nervousness, and he definitely will use this app if
he was required to undergo quarantine. User 2
would rather spend time on his work than use this
app. I also observed that user 2 has no habits of
playing mobile games, and seldom uses his phone.
Overall, they both have some minor comments on
the buttons and unclear wording, but they can still
complete the tasks successfully.
Figure 18: Usability Testing Results

Design
Design System
Design Principle
I strive for the eight golden grid system when I design
interfaces. This principle is using multiples of eight points
(8,16, 24, 32, 40, 48, etc.) to create the layout, padding,
and margin, which theory has adopted in common
interface design. This is also because the popular screen
sizes are all divisible by eight, so it can also be responded
to when using different devices easily.

It provides a visual hierarchy to drive the consistency
between unity and harmony in a balance. I built up a
design system in the visual hierarchy for fonts, colour,
padding, and component to define the primary, secondary
and tertiary levels.
Brand Positioning
I am positioning my mental health app with the purpose of
“Design a Life you love”, and naming it “Simply Life”.
Figure 19: Eight Golden Grid System
(Everything you should know about 8 point grid system in UX design, 2022)

Design
Design System
Design System
In parallel, I am updating the design system in colours,
fonts, font hierarchy, spacing, icons, buttons, and
navigations. My habit to organise any design patterns in a
place, which acts as an overview for ensuring consistency.
Colour
I choose purple to convey energetic, peaceful, refreshing,
and happy feelings, which also is the colour trend in 2022
Figure 20: Colour Tone

Design
Design System
Typography
I decided to use Poppins due to the pure genre which fits the overall
round and modern design style. The app targets Hong Kong people,
therefore I used Microsoft Jheng Hei for the Chinese fonts.
Figure 21: Fonts
Figure 22: Font Hierarchy
“Typography is the convergence of art and
language. This makes it hugely powerful as a
tool and a means of expression.”
From the book of “Thinking with Type”, Ellen Lupton
(Lupton, 2014)

Design
Design System
Strategy
SimplyLife as a centre for mental health guides users to
plan their journey under quarantine. After completing the
quarantine, users can share an article to collect the
elements continuously.

With a sustainable purpose, socialisation is a core factor to
keep people engaged in the app. After we build a certain
user base, we could generate the income by selling
relevant products needed during the pandemic, like
masks, rapid test kits, hand sanitiser, etc.

Furthermore, arranging for psychologists to pair with
users and have a treatment during their stay at home will
also be a method to professionalise our app.
Figure 23: Future Mockup

Design
Design System
Responsive Design
We can set various breakpoints based on the width of the
viewpoints, to present layouts in resizing the relative or
reflowing the content, to be easily readable on different
devices.

In this prototype, I used iPhone 13 pro (390 x 844px) as
my screen dimension. The reason is that the younger
generation likes to use fashionable products, such as the
latest iPhone model. It is possible that the users might
download my app on iPad from the App store, so I
decided to use iPad Pro 11” (834 x 1194px) for the
responsive design. It is an obvious distinction that the new
design hierarchy is more spaced out on the iPad Pro and
the core image is bigger than that on the mobile. The grid
system helps every element have clear contrast through
visually differentiated items, repetition on UI patterns,
alignment on layout design, and proximity on conveying
the strength of the relationship.
Figure 24: Responsive Design

Design
Design System
Accessibility Mode
Furthermore, I designed an accessibility mode for
enhancing the experience by using speech recognition at
the bottom of the interface and added a frame for the
components for the screen reader for an easy scan. The
distinction between design system accessibility and
normal mode is because of the difference in design
orientation and the users' needs. With w3c standard, I
enhanced the colour contrast for people with accessibility
needs.
Figure 25: Accessibility Mode
((WAI), 2022)

Design
Design System
User Feedback
Listening to the real feedback from the users on the app
features can bring enlightened insights for my design.
Figure 26: Feedback

Figure 27: Onboarding
Design
User Interface Design
Onboarding

Design
Profile Creation
Figure 28: Profile Creation
28

Figure 29: App Tutorials
Design
App Tutorials

Figure 30: Main Page
Design
Main Page

Design
Profile Settings
Figure 31: Profile Settings
Update Profile
Display Name
John
Quarantine Period
14 days
Reason for Quarantine?
I got COVID-19
Confirm
9:41
Feedback
Rate your experience with SimplyLife
1 2 3 4 5
Dislike Like
Do you have any thought you would like to

share?
I like the app features that are

very useful and user-friendly.
Confirm
It is fine to contact me to follow-up in the
future
9:41
Share your invite code with your friends and
they will be auto-added as your friends, and
both of you can collect a special element!
SIMPLYLIFE
0
Total Referral
0
Total Received Elements
Referral
9:41
Good Morning,

John
Home Journey Social Forum
Login
Begin a New Journey
Experience a reflective story with different
tasks and interactive activities to help you
soothe your emotions every day
9:41
Profile
John
Explored 1 day journey
Referral Scan QR Code
Update Profile
Accessibility Off
Language Eng
Notifications On
Feedback
9:41
Place the QR code inside the area,

scanning will start automatically
Scan
Done
9:41
Profile
John
Explored 1 day journey
Referral Scan QR Code
Update Profile
Accessibility Off
Language Eng
Notifications On
Feedback
9:41
Logout
Are you sure to logout?
Yes, I want to logout
No, I want to stay at the app

Figure 32: Account Registration
Design
Account Registration

Figure 33: Evolution
Design
Evolution

Figure 34: Collections
Design
Collections

Design
Journey Activity
Figure 35: Journey Activity

Figure 36: Social
Design
Social

Figure 37: Forum
Design
Forum

Test
User Feedback

Reflection
Key Learning Points
User Feedback
It is valuable to get the users’ real feedback for our further
improvements. We are always in a design thinking loop to
continuously empathise the needs of thoughts of our
users, define the problem, ideate the insights, make it real
as a prototype, and test it for improvement.
Reflection
Reflective writing helps me to organize my learning and
research. By reviewing my journal, I could see my
reflection clearer to explain what I learnt. This case study
and tutorials brought lots of insights to lead me to
complete various articulating design decisions. Widely and
massive thinking helped me to think out of the box. Hard-
working is the boat to the endless sea of learning.
Career Growth
I am seriously exploring my career path in these few weeks. I have been
in the UI/UX design industry for 5 years. So, what is my next transition
and how can I achieve it? I searched online about UX consultants from
Designers, Micah pointed out that “Dissatisfaction is a normal part of
growth”. I have the same feeling, and it prompts self-assessment and
critical thinking to change from my role as a UX consultant. As a UX
consultant, we should have an ability to uncover all kinds of user issues
from any quantitative data to determine the strategy to convert the user
experience. We always stay observant from a big picture and learn the
business canvas to ensure the strategy is executed as expected.

It seems to me that the UX strategist is quite interesting and possible to
create a competitive business strategy and sustainable product for the
right users in the right market. I have experience in start-up and
charitable organisation establishments, and my consultant role fits with
strategist responsibility. However, my current client is a large and
international enterprise and cannot be compared with my startup. To
move my career to be a UX strategist, I will learn business strategy tools
and combine the analysis into prototypes. In parallel, I am working on my
portfolio and resume actively in order to sort out my career planning.
(How to Transition from UX Designer to UX Consultant, 2022)

Bibliography
Lupton, E., 2014. Thinking with type. New York, NY: Princeton Architectural Press.
The Interaction Design Foundation. 2022. What is Design Thinking?. [online] Available at: <https://www.interaction-design.org/literature/
topics/design-thinking> [Accessed 27 April 2022].
The Interaction Design Foundation. 2022. Personas – A Simple Introduction. [online] Available at: <https://www.interaction-design.org/
literature/article/personas-why-and-how-you-should-use-them> [Accessed 20 February 2022].
Abby Covert, Information Architect. 2022. Information Architecture Heuristics – Abby Covert, Information Architect. [online] Available at:
<https://abbycovert.com/ia-tools/ia-heuristics/> [Accessed 27 March 2022].
Medium. 2022. Everything you should know about 8 point grid system in UX design. [online] Available at: <https://uxplanet.org/everything-
you-should-know-about-8-point-grid-system-in-ux-design-b69cb945b18d> [Accessed 14 April 2022].
(WAI), W., 2022. Designing for Web Accessibility – Tips for Getting Started. [online] Web Accessibility Initiative (WAI). Available at: <https://
www.w3.org/WAI/tips/designing/> [Accessed 26 April 2022].
Toptal Design Blog. 2022. How to Transition from UX Designer to UX Consultant. [online] Available at: <https://www.toptal.com/designers/
ux-consultants/ux-consultant> [Accessed 14 April 2022].
Iconscout. 2022. Premium User Interface 3D Illustration pack from User Interface 3D Illustrations. [online] Available at: <https://
iconscout.com/3d-pack/user-interface-832> [Accessed 26 April 2022].
Figma. 2022. Figma. [online] Available at: <https://www.figma.com/community/file/1099665891775174012> [Accessed 26 April 2022].

Case Study - SimplyLife

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Case Study - SimplyLife

Semelhante a Case Study - SimplyLife (20)

Último

Último (20)

Case Study - SimplyLife