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 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

  • 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 hybrid research study 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. This means places that are near to their current location.


Amenities Available

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


Photos That Give A Sense 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 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 image.

         

         

Competitor #2-A

Amenities goes visual!

Airbnb has great details page fir 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

OpenSpaces App - UX Case Study

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 have a sense of 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 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 ( 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. 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.

  1. 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.

  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 transferred into a paper prototype, physical or digital.

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:

  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 ensure that the 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 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

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?


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

I decided to sort locations and map side by side; it's a recognized patter user used to use in different map applications to be familiar with it.

Place Details screen

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

Userflow & Wireflow

The Happy Path & Other Paths

Connecting the dots, I created the main flow for Open Spaces 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 on the complementary details; the main purpose is to do usability testing before moving forward to the final Look & Feel.

Logo & Visual Identity
OpenSpaces App - UX Case Study

A combination 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.

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 sketching

My documentation for sketching "Location Listing" Screen

My documentation for sketching "Location Listing" Screen