Ahmed Magdi
Product Designer
OpenSpaces
Imagine Google maps but focused only to help freelancers and remote workers find great coffee shops and public spaces to do work from
Project Overview
Designing a better way for freelancers and remote workers to find great coffee shops and public spaces to do work from.
OpenSpace is a new startup that wants to make it easier for freelancers and remote workers to find great coffee shops and public spaces to do work from.
By focusing only on the core tasks, this case study highlights my process of designing this solution - from learning the needs, behavior, and pain-points of OpenSpace users to designing a prototype for the proposed solution for how to "search," "browse," and "list details of the suggested places."
My Role
User Research
Ideate Solution/s
Sketches, Wireframe, and Prototype
Branding & Logo Design
User Interface & Micro Design System
Usability Testing
Deliverables
Low-Fi Prototype
WireFlows
Hi-Fi Prototype
Branding Assets (Logo, Guidelines and Design System)
UI & Final Mockup
User Research & Synthesis
Micro User Research Plan
By conducting a hybrid research study: User Interviews and Usability Testing, for participants how are:
Freelancers or working remotely
Regularly work outside the home or traditional workspace
Have past experiences working in public places, coffee shops ...etc
Research Findings
I summarized below the most frequent needs expressed by our users that we decided to solve going forward in our design ...
Where are places available near me?
During of short time between their activities, Users want to find places quickly. This means places that are near to their current location.
What are the available amenities?
Things like restrooms, food, and coffee bar are important things to justify their places' judgments.
Photos that give a sense of location's space
Users want to discover the place they will work on, so they want to have a clear picture of what matters to them, like How tables are close to each other.
Other research findings
Quiet Places
Users want to work in places that help them be productive and work well.Available Times
Users want to check what is open times for the places.Reserve A Table!
Users want to check if there is a certain table is available!Quality Wifi
Wi-Fi is definitely the most important thing for users.
Amina, The persona
Openspaces will serve Amina, A Freelance copywriter who lives in Cairo - al Dokki ...
Competitive Research
I wanted to learn more about the features that other products show to help users compare, discover amenities and give a sense of the location's space so I conducted competitive research for direct and indirect products...
Competitor #1
Side by Side view for easy comparison
Apple Maps does a great job of helping users easily navigate locations and sort some details of the location in the list view.
For our solution, this can help users easily navigate places near each other and get a sense of comparison by providing basic details like internet availability and highlighted images.
Competitor #2-A
Amenities goes visual!
Airbnb has great details page for places; one of the features they add highlights Amenities and strike-through amenities that's aren't available.
For our solution, we could help users get a quick view if there is an important amenity that's not available and important to them, like a restroom
Competitor #3
How did the tables look like? Give a Sense of space.
wework.com/workspace adds a space option with images and little details about it.
We could add the type of tables available in the public place; This will help our users understand what type of tables they may expect to see. Also, this will help them get a sense of location.
Competitor #2-B
Shortcuts for quick onboarding!
Airbnb does a great job in helping users find apartments by focusing on key criteria first before showing users a list of places for our solution; we could help users find places with specific criteria like (Wi-Fi or amenities ... )
The Solution
Ideating & Sketching
After I investigated the problem space, I started to conceptualize a solution with quick rough sketching ...
Rough sketches for Search, List and Place details screens (Crazy 8' Activity)
Focusing on the variation of the layout first ...
I usually start the design process with low fidelity sketches. These sketches' main purpose is to conceptualize a solution quickly and rough using a timeframe box activity called Crazy 8'.
I did sketch 3 different sets of the main flow ( 3 screens: Browse > List > Location Details ) to brainstorm a solution. The main differences between these rough sketches are to give more weight to "near me," "place photos," and "amenities."
Here are a few concepts which I wanted to explore further.
Photos + Sense of space, giving users more key to have a sense of location, I wanted to mix real photos from the location and clear icons +text about how tables look.
Compare and Discover, from the "Listing" screen to the "Location Details" screen, I wanted the user to switch easily and fast between places so he can decide which one meets his needs.
Refined Sketches
After I explored the possible solutions I choose some of the ideas in order to take it further to more detailed sketches with real data ...
Screen Sketch that can be transferred into a paper prototype, physical or digital.
Homescreen
Focusing on big concepts ... More realistic UX copy, content, and UI elements, for example, here on the home screen, there are tow big concepts in the UI interaction elements I wanted to explore more:
Tables Shape
To give the user sense of location, he can pick what shape of tables he would like to experience inside places.
Icon + Text to ensure that the user can visualize what he can expect to form the places he looks for.
Recommended for
The idea here is to provide the user with pre-hand-picked places based on specific criteria and usage like "It's a short break" this means we will find places near to him and have restrooms ... etc.
I couldn't ignore the importance of the UX Copy in this concept, as it's essential to understand the idea behind the "recommended for" feature.
Also, I tried to make the copy more energetic and motivated for the user; he came to work, so we need to keep his engine hot and ready to work using sentences like "Time to work" "I've time to do more."
All those ideas & concepts will be subject to be examined later in usability testing.
The other tow screen that completes the flow, those screens will be linked so we can get a better idea of how the experience might look like
Available places screen
Why you show the time here and not on the home screen?
On the home screen, I want the user to jump fast to get his task done by limited and reducing the decision he needs to take, and instead of that, I take some decision for him like "Time," so I didn't ask for a time but show that on each place element.
UI pattern that user used to use in different map applications
I decided to sort locations and map side by side; it's a recognized pattern user used to use in different map applications to be familiar with it.
Place Details screen
Swipe to see the next place for a better comparison
You can write here as much as you want; this text will always look nice, whether you write longer paragraphs or just a few words. Click here and try it out.
Wireframe
One more step closer to a polished concept
Here I focused a little bit on the complementary details; the main purpose is to do usability testing before moving forward to the final Look & Feel.
Wireflow
The Happy Path & Other Paths
It's time to connect the dots, I created the main flow for OpenSpaces to get the full picture of the experience ...
Visual Identity & Micro Design System
Logomark of an open door and map's marker
The idea behind this logo is simple, the same as the idea behind the application. The most obvious symbols can promote the idea of map & places is the "Map Marker."
I chose this symbol and combined it with an open door for the idea of welcoming; the result was a very sharp and iconic mark.
To reflect the fun, I choose the "Tea Rose" color to complete this brand's unique character.
Next Steps ...
A Concept for app features that make usage from IoT capabilities to solve user problems, so user can expect what work experience at this place might look like!
For my next steps, I would improve this project by taking the following actions:
#Idea: Integrating with Arduino & IoT - ex. Noise Sensors - to get real & updated data !
The idea is to add more value to this app by benefit from IoT and Aurdino, installing a little piece of seniors to get noise level and wifi strength for every place to participate in this app; we can reflect this into the UI.
Continue to Work: Usability Testing, User flows, Improve Visual Design for all scenarios, and user stories ...
As this is an ongoing project, I'll continue to work on the visual design of UI and test concepts, UI, and UX Copy of the app.
Behind The Scenes