About
📱Project overview
This app provides flexible shared workspaces for students, startups and services for other enterprises to make a reservation.
🤔 Problem
Finding co-working spaces, or a space for creation and connectivity is difficult, and especially when there's a lot of distraction, or requires confidential information.
🎯 Goals
Design an app that allows users to easily book a table and go during their time reserved.
💪 My Role
UX designer designing an app for this reservation app from conception to delivery
👩🏻💻 Responsibilities
Conducting interviews, paper and digital wire-framing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
🛠️ Tools
Adobe XD, Photoshop, Figma
⏰ Timeframe
July 2021
User research: summary
I conducted interviewed and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research was students who like to study together.
This user group confirmed initial assumptions about the workspace app users, but research also revealed that time was not the only factor limiting users from going out to work in a collaborative space. Other user problems included obligations, interests, or challenges that make it difficult to reserve a time slot.
User research: pain points
3 main user pain points I conducted from my interview were:
TIME
Students mentioned some spaces only allowed them to work for limited hours
ACCESSIBILITY
Some workspace only requires booking via website. In addition, platforms for reservation are not equipped with assistive technologies
IA
Text-heavy descriptions in app are often difficult to read and select from
User personas
Dom
High school student
Dom is in his last year of high school who lives with his family. His family are planning to move out of state, so Dom has been doing research on universities and colleges around the area, as well as preparing for SATs. He is frustrated about his lack of private space.
Martha
Office worker
Martha is a product designer that lives alone in an apartment. She has regular meetings with the design team, and would love for a private collaborative office space for them to meet together instead of working from home.
User flow
Paper Wireframes
Taking the time to draft iterations for each screen of the app on paper allowed me to come up with a number of different possible solutions based upon my research. This sped up the process and I was able to refine my ultimate choice much more quickly. The stars we used to indicate the elements of each sketch to be included in the initial digital wireframes.
Digital Wireframes
As the initial design phase continued, I made sure to take account the paint points discovered following user research.
Quick, smooth and easy navigation was a key user need to address in the designs.
Low-fidelity prototype
The low-fidelity prototype connected the primary user flow of building and making a reservation, so the prototype could be used in a usability study with users.
Usability study: parameters
Study type
Unmoderated usability study
Participants
5 participants
Location
Thailand; Remote
Length
15 - 25 minutes
Usability study: findings
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
Round 1 findings
Round 2 findings
Users wanted to rebook office spaces easily
Users wanted to see amenities
Users requested a lot of photos
Users mentioned there should be
a confirmation booking page
Users wanted to be able to print or view their confirmation in their email
Mockups
Early designs allowed for booking details, but after the usability studies, I added maps and location names. I also revised the design so users can click either on the map or search tab to find location most suited for them.
The second usability study revealed frustration with payment flow. I decided to add steps to show where users are during the payment process.
Design guide
Color Palette
Icons
Typography
Top navigation
Bottom navigation
