(T)HERE

fall/2021

 UX Research  |  UI + UX Design | App Design |  Visual Design  |  System Design

hi-fi.jpg

summary

This is an individual school project over the duration of 3 weeks. Inspired by my working-at-home experience, I want to create a web-based, fun, customizable workspace.

role

User Research

User Experience Design

Prototyping

User Testing

Branding

Visual Design

tools

Pen & Pencil

White Board

Sticky Notes

Paper

Camera / Smartphone

Adobe Suite

Figma

“(t)here” is a web-based productivity application that facilitates people to create their most preferred working environments through a highly customizable workspace system.


It features an interesting reward mechanism of view-sharing and “world-traveling”. Depending on your personal preference, you can work in front of a rain forest, or beautiful city view, or simply a still image.

Group 1135.png

Design Process

Frame 1.png
 

Covid 19 & working at home

marjan-blan-marjanblan-sAaHII-L-a8-unsplash.jpg

Since Covid-19 began,
I spent a tremendous amount of time working in front of my computer at home,
wishing if I could be somewhere else.
and.....
That's how I got the inspiration for this project.


While working at home, alone.
I had to constantly remind myself from walking to the "snack zone", 
from lying on to my bed,
and of course,
to stay away from my PHONE......

So I began to think, how can I make my working experience in front of my computer more productive and enjoyable?

 

research Process

- QUANTITATIVE Research -

I decided to start my research process from examining my own personal habits when I study in front of my computer. Personally, I usually like to listen to lofi music when I work, and Lofi Girl stream is my go to pick. It's always there, playing the right kind of music, and the chat makes me feel like there's a community working together with me. 

Later on, I found out about Abao in Tokyo, who is a youtuber uploading study with me videos with breath taking views in Tokyo. Working along his videos is such a beautiful experience for me, it made my study sessions fun and much more productive then before.

Therefore, I looked into similar videos online, and started to examine their chat and comment sessions.

Capture 1.png

- Interviews -

To generate enough valuable insights for my app design, I want to perform qualitative user research by interviewing some people with different demography(8 interviewees in total). I made sure the questions I designed are open-ended and are not biased, and made sure that I use a neutral tone while asking them these questions. I documented their replies throughout the interview process.

Interview Questions.png

- Research Insights -

Insights.png
Insights2png.png
Insights3.png

- Main takeaways from research precess -

1. Before vs. After the Covid-19 quarantine, users have to spend more time working/studying at home.

2. Users have to constantly switch between different apps, media, and platforms while working/studying.

3. Phone is the biggest distraction for most users.

4. Many users think music helps them stay focused while studying.

5. Users like to adjust their study plans based on their tasks and deadlines and would prefer a calm and comfortable environment.

 

- personas -

Persona 1.png
Persona 2.png
 

ideation

IMG_0096.jpg

To better document ideas and create solutions for the problems I gathered from the user research, I laid out user pain points and possible solutions with sticky notes. I also documented some of my thoughts as well as some good ideas down. 

- User task flow -

(t)here User Flow.jpg

Based on the brainstorming session, and the solutions I designed, I created a user task flow for the application that I am designing, to better visualize the structure and start to create a paper prototype. 

 

Paper prototype

IMG_0100.jpg

I created the paper prototype in movable pieces of paper so that I can design how they are placed, as well as start thinking about motion design. 

- rEFINING PAGES AND USER FLOW -

Paper Proto.png
 

testing & feedback

- testing with paper prototype -

I invited classmates to perform user testing for my app. I let them finger click, and I added the paper pieces of different modules onto the previous paper. Throughout the process, I remained silent and documented their confusions and frustrations.

IMG_0099.jpg

- feedback evaluation -

fs1.png
fs2.png
fs3.png
fs4.png
 

Wireframes

WF1.png
WF2.png
WF3.png
WF4 (1).png
11.My Progress.jpg
 

branding & visuals

- style guide -

Light Mode.png
Dark Mode.png
Color Palette.png
Visual Style.png
 

high fidelity prototype

- Final Screen Design -

Slide 16_9 - 1.png
Slide 16_9 - 2.png
Slide 16_9 - 3.png
Slide 16_9 - 4.png
Slide 16_9 - 5.png

- interactive prototype -

- mockups -

hi-fi.jpg
Group 1135.png
MacBookPro.jpg
ipad.png