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



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.


User Research

User Experience Design


User Testing


Visual Design


Pen & Pencil

White Board

Sticky Notes


Camera / Smartphone

Adobe Suite


“(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


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.
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


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 -


- 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



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


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. 


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.


- feedback evaluation -



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 -

Group 1135.png