Wireframing | Prototyping | Mobile App
PostUp
A mobile app for quickly finding a place to work remotely.
The Problem
Remote workers have a difficult time quickly accessing information to find a coffee shop or work space that meets their needs. Users spend a lot of time searching for the right space, but many times that information isn’t available nor can they know if the work space would be crowded or a good fit.
The Solution
PostUp is a mobile app that helps users search and select a work space that meet their needs - such as wifi availability, volume level, crowdedness, bathroom access, and outlets. The solution has photo and map features to help users make a more informed selection for their next remote work spot.
My Role
I followed the design sprint process — a five-day process developed by Google Ventures for answering critical business questions through design, prototyping and testing ideas with users.
Design Sprint Process
MONDAY — Make a Map
Mapping User Flow
I started off the first day of the design sprint reviewing all the research that was provided. This included user interview highlights and a rough persona which I have reorganized below.
Mapping User Flow
Keeping Nina and all her needs in mind, I jotted down a user flow that would help reach her goal, which is to quickly find an ideal space where she could “post up” to work.
TUESDAY — Sketch Solutions
Lightning Demos
For the second day of the design sprint, I started off looking to other products for some inspiration.
I studied Airbnb’s mobile app to observe their UI — particularly their map vs list view screens and their filtered search features.
I also looked at the Google Maps app to observe their live “popular times” graph which is clear and informative without being too technical or detailed. Additionally, Google Maps provides a seamless experience for users by integrating reviews, photos and other details of destinations within the navigation app.
Yelp seemed to be the app that users most likely used to search for a place to work, so I wanted to review it. Within the Yelp mobile app, people are able to see photos, details about amenities, as well as read reviews. I was mainly inspired by how they organized their “Amenities and More” section.
Critical Screen
With all the insight from the research provided, as well as observing what was available in other products, I decided that the critical screen would be the one that displays search results in list view with a map button to switch to map view. Search results would display work space options by the preferences selected, with an option to choose by distance.
I went on to do Crazy 8s and sketched out 8 screens. I felt the last screen (highlighted in pink) had all the aspects indicated by the research in the most visually clear and concise way.
Solution Sketch
Now that I selected my critical screen, I was sketched the screens that would come directly before and after, which became my solution sketch. The critical screen is in the middle with the pink border. The blue dots indicate where users would be tapping to go to the following screen.
WEDNESDAY — Decide
Ideating
After establishing the critical screen, it was easy to understand the progression of screens that would come before and after. I sketched out different versions of the screen that follows the critical screen. This screen which we can call the “destination screen” would showcase a detailed look into a destination the user selected to learn more about. In my sketch, I used a local coffee shop as an example.
My initial destination screen sketch is on the left. The one I decided was the winner is on the right. The new sketch organizes the information users would need in a digestable way that can be expanded. It will also take users to navigation flow, should they select the business or destination they are looking at.
I began to sketch out the rest of the user flow, which I had mapped out on the first day of the design sprint.
THURSDAY - Prototype
Mock up
I used a UI design kit to quickly plug in my designs. Since I was not building UI elements from scratch, the overall process was very quick. Having the components on hand made it easy to put life into my sketches, and I was pleased with the overall look.
Questions
My goals for testing my prototype were the following:
Confirm whether users can efficiently search from the critical screen — and if not, what other information of “post up” results should be included.
Confirm if the page for the specific post up destination selected provides all the information users would want
Confirm users can successfully move forward to the navigation flow.
FRIDAY — Test
Interviewees
I selected five individuals ranging from the age 23-31 who were working professionals. These were people within my network as well as old colleagues. They are comfortable navigating digital interfaces and regularly use mobile apps. All five have had prior experience working remotely from a coffee shop or shared office space.
Usability Test
All the interviews were conducted using the five-act interview technique. Three interviews were held in person, in various meeting places — such as a coffee shops and a residential lobby.
The other two interviews were done over Zoom. The interviews went very smoothly and the tasks were completed quickly.
Findings
The lack of a current location indicator made users feel a little frustrated.
“I would like to see where I am compared to all these things. Like google maps. That’s how I make all my walking decisions.”
“Where am I? I think whenever there’s a map, I just always want to know where I am.”
Confusion on whether or details on the critical screen have a sideway scroll feature
Icon to signify amenity on selected destination screen was confusing or felt off
Wishes the live update on the busyness of each destination was available on the critical screen
“If I was on the go and wanted to quickly make a decision, showing how crowded each place is on the results page would be preferable.”
Overall the entire flow felt intuitive and easy to complete
“Super easy to navigate. I feel like an app like this would help me make up my mind fast on where I could go.”
FINAL RESULTS
Critical Screen Iteration
Based on my findings, I ended up iterating the critical screen — adding a current location indicator, clearly depicting horizontal scroll on amenities offered, as well as adding a live traffic or busyness level information. Link to prototype.
What I learned
This was my first design sprint and I thoroughly enjoyed the entire process. It was satisfying to be able to design solutions quickly and iterate immediately based on feedback. I learned that good solutions don’t always take a long process and that design kits could be your best friend especially when you’re on a time crunch.