![](https://static.wixstatic.com/media/6a1fff_8b89a7be9c1c4017898f58e98d53353a~mv2.jpg/v1/fill/w_980,h_252,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/6a1fff_8b89a7be9c1c4017898f58e98d53353a~mv2.jpg)
Post Up Design Challenge
Designing a better way for freelancers and remote workers to find great coffee shops, restaurants, and public spaces to do work from.
Date: February 2017
Role: UX Strategy & UI Designer
Project Goals & Details
Post Up 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.
This case study highlights my entire process of designing this solution - from learning the needs, behavior, and pain-points of Post Up users, to designing a prototype and branding solution.
![postup header2.jpg](https://static.wixstatic.com/media/6a1fff_31bc40e3fc6340df8e913c9ccf10814c~mv2.jpg/v1/fill/w_980,h_400,al_c,q_90,enc_auto/postup%20header2.jpg)
Research Findings
To learn more about the needs of Post Up users, I analyzed interview highlights, a persona, and watched a user walk through how they currently look for a place to work.
Afterwards, I put key findings on Post-its to create an affinity map, and focus on a few key themes that I wanted to consider in my solution.
![rsrch1.jpg](https://static.wixstatic.com/media/6a1fff_0cc61b799b8a469eb3524f734e071680~mv2_d_2000_2000_s_2.jpg/v1/fill/w_418,h_418,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/rsrch1.jpg)
![rsrch2.jpg](https://static.wixstatic.com/media/6a1fff_baf23445a5714c8b9c3cc2dfed6e8afa~mv2_d_2000_2000_s_2.jpg/v1/fill/w_418,h_418,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/rsrch2.jpg)
Research Takeaways
Below is the most frequently requested needs expressed by users, that we decided to solve going forward in our designs.
Users want to find a location that's close to them
Users want to know about amenities (free wifi, power, bathrooms)
Users want to know how crowded or noisy a place is
Users want to see photos of the space to see if it meets their needs
Competitive Analysis
![google.png](https://static.wixstatic.com/media/6a1fff_c4b0dd75d73141c1be3cb5dd64198b06~mv2.png/v1/fill/w_300,h_620,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/google.png)
Google Maps
Popular times screen
Google Maps does a great job at indicating the most popular times places are crowded by giving estimates of peak or quiet hours.
For Post Up, we could use a similar indicator to help users know an estimate of how crowded a place is currently or will be when they go there.
![delta.png](https://static.wixstatic.com/media/6a1fff_c9d57c7337ea487eac7c42dd8be19b0f~mv2.png/v1/fill/w_300,h_620,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/delta.png)
Delta
Amenities icon indicators
Spacious gives an overview of a working location summary and a list of amenities included in the space with helpful icons.
We could use a similar structure of information making sure the user knows what will be included at each location they choose.
![airbnb.png](https://static.wixstatic.com/media/6a1fff_bee6a18d5e3e40d886cb1033988fe09f~mv2.png/v1/fill/w_300,h_620,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/airbnb.png)
AirBnb
Map view and list combination
Airbnb’s map does a great job of showing the user the map location along with price and a large image of the listing below.
For PostUp, we could use a similar design to help users search for a location, with some specific criteria that our users are looking for (hours open, working areas available, etc...)
Prototypes
![sketches.jpg](https://static.wixstatic.com/media/6a1fff_381aebe856e54d619064ac28a3407d27~mv2_d_3200_1600_s_2.jpg/v1/fill/w_900,h_450,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/sketches.jpg)
Sketches
Next, I wanted to start generating ideas for the features and visual design of the main flow, which shows a user searching for places, sorting through a list, and eventually landing on a detailed screen of the selected location.
Here are a few concepts which I wanted to explore further:
1. A map showing your current location and where the closest places to you currently are.
2. Large photos, since many users indicated that photos give them a good idea of the space, and if it would be a good place to work from.
3. An amenities filter that allows users to narrow places based on certain criteria - like WiFi, quiet areas, and available restrooms.
![01 wire.jpg](https://static.wixstatic.com/media/6a1fff_e5c437fc9b604725b0d7ca4c9ebdee06~mv2.jpg/v1/fill/w_280,h_606,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/01%20wire.jpg)
![02 wire.jpg](https://static.wixstatic.com/media/6a1fff_ddf605b6846343b5b2df75b61fa373c4~mv2.jpg/v1/fill/w_280,h_606,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/02%20wire.jpg)
![03 wire.jpg](https://static.wixstatic.com/media/6a1fff_188d528f01934e6aaa32f2a4d2ca4d3c~mv2.jpg/v1/fill/w_280,h_606,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/03%20wire.jpg)
Low Fidelity Wireframes
The prototype above shows a user searching for places nearby, with the ability to filter important criteria, like distance, hours, and amenities. Each location briefly indicates how crowded it is and the hours of operation so the user can quickly judge important criteria.
From there, the user can select a place to see the name, location, distance, and how busy it is. Choosing the location brings up detailed information with amenities, description, reviews, and other work-related criteria.
I designed it to default to nearby places, because most users expressed that they need to find a place while they’re in an unfamiliar area.
![UI Guide.png](https://static.wixstatic.com/media/6a1fff_1ae4e9b5606a4f30be741d87c330726c~mv2.png/v1/fill/w_980,h_510,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/UI%20Guide.png)
UI Style Guide
I then designed the logo and buttons, finalized the color palette, fonts, icons, input fields and other miscellaneous elements.
Final Designs
![01-final.jpg](https://static.wixstatic.com/media/6a1fff_5e39565e3e5d495284432a188fedeaad~mv2.jpg/v1/fill/w_280,h_606,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/01-final.jpg)
![02-final.jpg](https://static.wixstatic.com/media/6a1fff_5a43e3e14ed94790a93dd4d8db1a117d~mv2.jpg/v1/fill/w_280,h_606,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/02-final.jpg)
![03.jpg](https://static.wixstatic.com/media/6a1fff_66ed19c17af342ceb69bae388fb1bac4~mv2.jpg/v1/fill/w_280,h_606,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/03.jpg)
Low Fidelity Wireframes
After a few iterations of my low-fidelity prototype, I fleshed out the details of each page with images, typography, navigation menus, etc. I spent a good amount of time exploring different colors and UI styles. I wanted to find a visual balance between playful and fresh while also professional and clean. The icons were a combination of Linearicons, The Noun Project, and my own illustrations.
Takeaways
Post Up was a very interesting project which I learned a lot from. Based on the initial research and findings, a more seamless and faster way of providing freelancers and remote-workers seems like a useful service that Google or Yelp do not give.
An app with this information would provide a reliable service and new tool for many users. As the working world and office culture changes, there are many opportunities for services like Post Up to provide new office solutions.
Next steps
We should never stop researching, testing and iterating, in order to come out with the best design. I would like to get my designs in front of users to continue learning and developing this app and see what opportunities there are for improvements, services, and business models. Discover what could be done to get more users subscribing and paying for the service. I would then continue to test and iterate the product.