Ahmed Magdi
UX & Product designer
Made with

OPEN SPACES APP

Imagine Google maps but focused only to help freelancers and remote workers find great coffee shops and public spaces to do work from.

OpenSpaces App - UX Case Study

Project Goals & Details

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 entire process of designing this solution - from learning the needs, behavior, and pain-points of OpenSpace users, to designing a prototyped solution for search, browse and list details of the suggested places.

My Role

  • User Research
  • Ideate Solution
  • Sketches, Wireframe and Prototype
  • Branding & Logo Design
  • User Interface & Design System
  • Usability Testing

Project Deliverables

  • User Research Report
  • Low Fidelity Prototype
  • WireFlows
  • Branding Assets (Logo, Guidelines and Design System)
  • Prototype
  • UI & Final Mockup

Research Synthesis

Research Takeaways

By conducting User Interviews and Usability Testing to examine the user's current journey, I summarized below the most frequent needs expressed by our users, that we decided to solve going forward in our design.

Affinity Diagram from User Research Findings

Affinity Diagram from User Research Findings

Places Near Me

During of short time between their activities, Users want to find places quickly, places that are near to their locations.

Amenities Available

Things like restrooms, food, and coffee bar are important things to justify their judgments of the places.

Photos That Give A Sence of Location 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 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
    Wifi is definitely the most important thing for users.

Competitive Analysis

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.


Competitor #1

Side by Side view for easy comparison

Apple Maps does a great job in helping users to easily navigate between locations along away with sort some details of the location in the list view.

For our solution, this can help users to easily navigate between places that near to each other and get a sense of comparison by providing basic details like internet availability and highlighted image.

         

         

Competitor #2-A

Amenities goes visual!

Airbnb has a great details page fir places, one of the features they add is highlighting Amenities and strike-through amenities that's isn'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 restroom

OpenSpaces App - UX Case Study

Competitor #3

How did tables look like? Give a Sense of space

wework.com/workspace adds a space option with images and little details about it.

For our solution we could add the type of tables available in the public place this will help our users have a sense what type of tables they may expect to see, also this will help them get a sense of location

OpenSpaces App - UX Case Study

Competitor #2-B

Shortcuts for quick onboarding!

Airbnb does a great job in helping users find apartments by a focus on key criteria first before showing users list of places

For our solution, we could help users to find places with specific criteria like ( Wifi, or amenities ... )

Rough Sketches
Rough sketches for Search, List and Place details screens (Crazy 8' Activity)

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. The main purpose of these sketches is trying 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.

  1. Photos + Sense of space, giving users more key to have a sense of location I wanted to mix between real photos from the location and clear icons+text about how tables look like.
  2. Compare and Discover, from the "Listing" screen to the "Location Details" screen  I wanted the user to switch easy and fast between places so he can decide which one meets his needs.

Refined Sketches

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.

Screen Sketch that can be transeferd into paper prototype, physical or digital.

Screen Sketch that can be transeferd into 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 to I wanted to explore more:

  1. 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 make sure that user can visualize what he can expect to form the places he looks for.
  2. 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 breaks" 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 very essential to understand the idea behind the "recommended for" feature. 

Also, I tried to make the copy more energetic and motivated for user, he came to work so we need to keep his engine hot and ready to work, by 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 complete the flow, those screens will be linked so we can get better idea how the experience might looks like

The other tow screen that complete the flow, those screens will be linked so we can get better idea how the experience might looks like

Available places screen

Why you show the time here and not on the home screen?

In 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

The reason I decided to sort locations and map side by side, it's a recognized patter user used to use in different map applications, So they will be familiar with it.


Place Details screen

Swipe to see next place for 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.


Low Fidelity Prototype

A low fiedlity prototype for the main flow Search > List > Details of the place using Marvel tool.

Userflow & Wireflow

The Happy Path & Other Paths

Connecting the dots, I created the main flow for Openspaces to get the full picture for the experience.

OpenSpaces App - UX Case Study
Wireframe

One more step closer to the polished product

Here I focused a little bit about the complementary details, The main purpose is to do usability testing before moving forward to final Look & Feel.

Logo & Visual Identity
OpenSpaces App - UX Case Study

A combination between opened door and map 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 choose 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 unique character of this brand.

OpenSpaces App - UX Case Study
Next Steps ...
A Concept for app features that make usage from IoT Capabilities to solve user problems.Now User can expect what work experience at this place might look like!

A Concept for app features that make usage from IoT Capabilities to solve user problems.

Now 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 Scenes!
My documentation for sketcing

My documentation for sketcing "Location Listing" Screen