WHEREWORK
WHEREWORK
University of Washington - Seattle, WA
Overview
The ongoing pandemic and work responsibilities slowly shifting to online environments raise the issue of finding suitable places for workers and students to zoom in on their work. While many individuals choose to work in the comforts of their homes, this comes with many issues such as difficulty with focusing, distractions from housemates, or needing to meet up with clients or coworkers occasionally in person. This app hopes to mitigate and solve these issues by helping workers and students efficiently find their new favorite workplaces.
Tools
Figma
Miro
Illustrator
Wix
Miro
TEAM
Jessica Kuo
Yida Li
Yudian Xu
Timeline
Start: Sep 2021
End: Dec 2021
Research
Interviews
As the first step, we conducted semi-structured interviews with some students and faculty of UW as our primary users. We interviewed four participants: two UW students and two UW faculties and asked them about various aspects. Such research helped us better understand our users and begin defining a problem we wanted to design for.
Personas
Based on our research and synthesized ideas, we have created two archetypal representations of our users. We have first briefly decided on the basic aspects such as the goals, pains, desires, and tech use with the bio of the user. Then we sketched out the draft of the personas and polished the personas for us to better understand our users and to focus our project on their specific attributes.
User Journey Map
We used one of our personas (Claire) to create the user journey map to detail her emotions, experience, and thoughts throughout her process of finding a workplace outside of her home. This journey map is based on both our user interview and assumption which helped us identify the user's feelings that we could better design for.
Design
Design Proposal
Many people study or work alone, but they want a place that has a study atmosphere where many people work together. However, they don’t know how to find such a place, so they go to a crowded library or a noisy cafe. Our target users will be free workers, students in college, or those who have just graduated. They can represent people who are working with laptops and working remotely during the pandemic. They may be tired of working alone in their houses, so they want to find a place with a working environment. We will be using an app to locate study/work areas available nearby. Users can find a place to work/study, filter Wi-Fi connections, availability of spots, food/drinks, etc.
SCENARIO STORYBOARDS
Storyboarding is a key component of designing and conveying a user experience. We used scenario storyboards as shown on the right to convey current issues or experiences that users may have, and during the summative phase to evaluate ideas and contexts of a new idea.
Because paper prototypes and sketches cannot often convey the experience of the design in use, narratives such as scenarios and storyboards help convey the experience of design ideas.
Information Architecture
Information architecture focuses on organizing, structuring, and labeling content in an effective and sustainable way. The goal is to help users find information and complete tasks. To do this, we figured out how the pieces fit together to create the larger picture, and how items relate to each other within the system. In doing so, we represented the complete functionality of our application and the visual organization of these features, which helped us to design the various navigation paths for the user through the application.
Low-fidelity prototype
We used Figma to develop the paper prototype. Each page in our information architecture became a screen in our prototype. Our prototype focused on three completion user flows: searching for restaurants with filters, writing and viewing reviews, and setting up meeting locations. We created these low-fidelity prototypes to test for potential problems in our design.
Prototyping
Quick Evaluations
The low-fidelity prototype was used to conduct user testing with four participants. This study was conducted in order to test three points: the usability of our application, users' expectations and behaviors, and whether our application meets users' needs. We changed some features of our application based on users' feedback and our observations. Then, we made a wireframe for demonstration.
Annotated Wireframes
After our user testing, we created annotated wireframes that outlined the application's layout, grid, and font choice. They helped the team to maintain a consistent design style as we independently worked on different parts of our design.
High-Fidelity Mock-Ups
Based on our user testing and annotated wireframes, we deleted the features that contributed the least to finding workplaces and enhanced those that optimized the search function. We choose several screens to represent the core functions of our application and named it Wherework: the home page, restaurant page, contact page, meeting page, profile page, and collection page. Finally, we created a happy flow based on our high-fidelity mock-ups to show a complete user flow.