OPEN SPACES APP

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

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

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

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

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.

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.

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

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.