top of page
Overview
(T)HERE
fall/2021
UX Research | UI + UX Design | App Design | Visual Design | System Design
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.
Design Process
Project Inspiration
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.
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
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.
- 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.
- 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 -
Ideation
ideation
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 -
here%20User%20Flow.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
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.
- rEFINING PAGES AND USER FLOW -
Testing & Feedback
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 -
Wireframes
Wireframes
.png)
Branding & Visuals
branding & visuals
- style guide -
High Fidelity Prototype
high fidelity prototype
- Final Screen Design -
- interactive prototype -
- mockups -
bottom of page