![Coffee+Remote Logo.png](https://static.wixstatic.com/media/ab0fc3_94f1136b625649e1ad63c165f208b6aa~mv2.png/v1/fill/w_396,h_73,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Coffee%2BRemote%20Logo.png)
A mobile app connecting remote workers to their ideal coffee shop for working.
![Group 158.png](https://static.wixstatic.com/media/ab0fc3_3ce9d9dfbd5e406c8d50048b98061282~mv2.png/v1/fill/w_380,h_394,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Group%20158.png)
Duration:
May 2024 • 4 Weeks
Role:
End-to-end UX/UI Designer
Working remotely has gained popularity in recent years.
Many people who work from home like to occasionally work from coffee shops, but are often unaware which locations provide the ideal environment for working. Remote workers have different needs than the average coffee shop patron, after all.
Coffee + Remote is an app that will eliminate the tedious practice of scrolling through endless online reviews & forums to research which locations have the strongest wifi speeds, the highest number of power outlets, and all that is important to a remote worker.
![austin-distel-TluMvvrZ57g-unsplash.jpg](https://static.wixstatic.com/media/ab0fc3_69e82a93b2624f99a11aa8ab34a26354~mv2.jpg/v1/fill/w_414,h_264,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/austin-distel-TluMvvrZ57g-unsplash.jpg)
Responsibilities:
-
UX Researcher
-
UX/UI Designer
-
Prototyping/User Testing
![_.jpeg](https://static.wixstatic.com/media/ab0fc3_d109c555db114b02bacc05aa37adf7e9~mv2.jpeg/v1/fill/w_390,h_520,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/_.jpeg)
Tools:
-
Figma
-
Whimsical
-
Google Suite
-
Zoom
Remote workers like to get creative when it comes to where they work.
However, they are sometimes hesitant because it is not always clear whether an establishment will meet their needs. Users would like to know which amenities are available at which locations. Despite doing research ahead of time to find an ideal location, needs such as outlets, wifi, and lots of seating options are nonnegotiables.
Objectives
-
Determine what makes a potential work location desirable to remote workers.
-
Understand how workers research and choose a location to work from.
-
Learn what deters remote workers from working outside the house more often.
Where to start?
The presence of competitors demonstrates there’s a clear demand for a platform remote workers could use to find ideal working locations. When conducting a competitor analysis, I discovered that while the existing platforms highlighted many features important to people hoping to work at a listed location, these platforms were lacking in many ways.
![workfrom.co.png](https://static.wixstatic.com/media/ab0fc3_06fd0093b7ab4c06ad5db2c06bdcb142~mv2.png/v1/fill/w_204,h_105,al_c,q_85,enc_avif,quality_auto/workfrom_co.png)
Drawbacks
-
Large inventory of locations listed, but not all are ideal work environments (i.e. McDonald’s & Starbucks inside grocery stores)
-
There is no key for the rating provided. What’s the difference between “many” and “moderate”?
Featured Amenitites
-
Workability rating
-
Wifi password
-
Wifi speed
-
Noise level
-
Outlets
-
Reviews
![Maika (2).png](https://static.wixstatic.com/media/ab0fc3_6ce873b735f94ac9ad5b0f18e2974902~mv2.png/v1/fill/w_160,h_97,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Maika%20(2).png)
-
Only 1-2 locations are listed in most cities. This makes browing in the platform unreliable.
-
A rating for coffee quality feels irrelevant for remote work. This is what Google would be used for.
-
Coffee quality
-
Wifi speed
-
Outlets
-
$$$
-
Number of votes
![Work Well Coffee.png](https://static.wixstatic.com/media/ab0fc3_7a7a4e9d110e4911bac7a59ec53ac1b3~mv2.png/v1/fill/w_173,h_105,al_c,q_85,enc_avif,quality_auto/Work%20Well%20Coffee.png)
-
How is the rating “Work-friendly” defined?
-
Website only. This type of platform is needed on-the-go.
-
Outlets
-
Work friendly
-
Location
-
Coffee quality
Understanding the Users
Interviews were conducted with 5 people and surveys were completed by an additional 20 remote workers who often work from coffee shops and similar locations. I wanted to learn where these people worked, what they most value when looking for a location, and what their pain points are.
![](https://static.wixstatic.com/media/ab0fc3_360bfd7647034aeea1feb4367757bc9c~mv2.jpg/v1/fill/w_327,h_327,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/ab0fc3_360bfd7647034aeea1feb4367757bc9c~mv2.jpg)
Insightful Epiphanies
And other key takeaways
Most common place to work
-
Coffee shops
Important amenitites
-
Wifi
-
Power outlets
-
Lots of seating
Needs
-
A quick and clear way to gather information regarding the amenities important to them
-
Information about amenities that is not listed on other platforms, such as the speed of wifi and the level of noise
-
A way to save and share trusted establishments they have visited that meet the needs of a remote worker
Other themes
-
4/5 interviewees did not feel that their current method of Google Search/Maps research produced the results they were looking for
-
3/5 interviewees have tried new locations recommended to them via word of mouth. Since research online is often unreliable, they found this more trustworthy
Character Profiles: Our Users
The above takeaways collected from the interviews and surveys were compiled into 2 user personas. These personas encapsulate the needs and behaviors of the target audience, guiding future design decisions.
![](https://static.wixstatic.com/media/ab0fc3_5c410ebff58f45a2a04dc423ecf5951a~mv2.png/v1/fill/w_454,h_407,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/ab0fc3_5c410ebff58f45a2a04dc423ecf5951a~mv2.png)
![](https://static.wixstatic.com/media/ab0fc3_4d4242c63b714148bf2f5ff8869731e8~mv2.png/v1/fill/w_454,h_407,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/ab0fc3_4d4242c63b714148bf2f5ff8869731e8~mv2.png)
Remote workers like exploring different places to work but often hesitate due to uncertainty about whether an establishment meets their needs. Users would like to know which amenities are available at which locations. Despite doing research ahead of time to find an ideal location, needs such as outlets, wifi, and lots of seating options are nonnegotiables.
How might we...
![brooke-cagle-WHWYBmtn3_0-unsplash.jpg](https://static.wixstatic.com/media/ab0fc3_400515ee2bda442fa7274b7e69478d1d~mv2.jpg/v1/fill/w_396,h_264,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/brooke-cagle-WHWYBmtn3_0-unsplash.jpg)
Increase the ability of an establishment's amenities so remote workers can rely on establishments to provide a successful work environment?
Provide clear information so users can make an informed decision about where to work?
Inform users of which locations regularly host people working remotely?
Roadmap to Success
Interviewees and survey respondents continuously highlighted the importance of knowing locations that provided strong "key amenities" beforehand, making this the primary feature of the app. They also valued word-of-mouth recommendations, so saving favorites and sharing locations became the next feature to prioritize.
P1: Must-have
50 Denver locations listed: Most popular remote working locations in the city.
Establishment's profile page: Each location features a profile image, additional photos, and key amenities such as Wi-Fi strength, number of outlets, seating capacity, and average patron stay. Amenities are ranked by availability and quality.
Saving locations: Users can share their favorite locations for quick referencing.
User Registration: Email registration is required to save favorite locations.
Data and privacy protection: Necessary safety terms to protect user information.
P2: Nice to have
Additional amenity information: Secondary amenities like food, meeting rooms, noise levels, and seating variety can be included after core amenities.
List view of businesses: Viewing locations within the app via list view.
Sharing locations: Users can share their favorite locations externally, helping others find co-working locations via word of mouth.
P3: Suprising & delightful
Google Map integration: View locations within the app using Google Maps
Incentives for users to add locations and reviews: Encourage users to add locations and reviews with rewards to speed up new city launches.
P4: Can come later
Pro version: A paid version with enhanced features.
User reporting and analytics: Collect usage data to tailor future versions to user needs.
Blueprinting User Navigation
The simple sitemap allows users to understand how to navigate this app quickly and easily without much thought, providing them the time to focus on the content itself.
![Coffee + Remote Sitemap](https://static.wixstatic.com/media/ab0fc3_bc9d9c4704c84d6eadef52f79e7d98d2~mv2.png/v1/fill/w_883,h_545,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/Sitemap.png)
Charting User Routes
The user flow prioritizes saving locations, empowering users to curate lists of preferred coffee shops across different areas. This feature enables them to quickly identify venues that meet their specific needs, enhancing their overall experience.
![Coffee + Remote User Flow](https://static.wixstatic.com/media/ab0fc3_9ff2472f17be476e85c5a280745769e5~mv2.png/v1/fill/w_977,h_467,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/User%20Flow.png)
![Coffee + Remote UI Kit](https://static.wixstatic.com/media/ab0fc3_5fa0e13cf98c41a9b887a02dc46b2bbd~mv2.png/v1/fill/w_441,h_395,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/UI%20Kit.png)
Branding & UI
Inspired by some of my favorite coffee shops, I wanted to brand to reflect the light and fun atmosphere of a coffee shop. Users are choosing to work from coffee shops and not a corporate office, after all.
Drafting the Journey
Creating low-fidelity wireframes allowed me to outline various options for the structure and flow of the app to identify which options users preferred.
![Lo-fi 1](https://static.wixstatic.com/media/ab0fc3_ec13639f264a40d69090ee49504c9cef~mv2.png/v1/fill/w_172,h_373,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Lo-fi%201.png)
![Lo-fi 2](https://static.wixstatic.com/media/ab0fc3_92e5a59e8cef48368135f48ec725d41d~mv2.png/v1/fill/w_172,h_373,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Lo-fi%202.png)
![Lo-fi 3](https://static.wixstatic.com/media/ab0fc3_dc52d6bc380b44c6916a4f01b95c6d93~mv2.png/v1/fill/w_172,h_373,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Lo-fi%203.png)
![Lo-fi 4](https://static.wixstatic.com/media/ab0fc3_180fcc526bdc4a18b2f49719b005fbb0~mv2.png/v1/fill/w_172,h_373,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Lo-fi%204.png)
![Lo-fi 5](https://static.wixstatic.com/media/ab0fc3_3a0527270fd943e192ec7dd37970632e~mv2.png/v1/fill/w_172,h_373,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Lo-fi%205.png)
During testing, users were shown a toggle map/list view and hybrid view options for the Explore page
The hybrid view allows users to browse location details while referencing it's proximity on the map
![Lo-fi 6](https://static.wixstatic.com/media/ab0fc3_20d24d65ce8b4bdc8a3bdbabb5b3c4e2~mv2.png/v1/crop/x_0,y_0,w_393,h_886/fill/w_172,h_388,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Lo-fi%206.png)
After gathering user feedback, I refined these sketches into high-fidelity wireframes, enhancing the design with detailed elements and improved usability. Users expressed a strong preference for the hybrid map and icon Explore page option, as well as for showcasing "core amenities" with a rating scale. As a result, these features were integrated into the design.
![Hi-fi 1: Explore](https://static.wixstatic.com/media/ab0fc3_1ef5ba7ead4a4fe2931373b9ca49b097~mv2.png/v1/fill/w_172,h_372,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Explore.png)
![Hi-fi 2: Profile](https://static.wixstatic.com/media/ab0fc3_866cab08550640608ccc9e6e1e02e556~mv2.png/v1/crop/x_0,y_0,w_390,h_848/fill/w_172,h_374,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Profile.png)
![Hi-fi 3: Amenities](https://static.wixstatic.com/media/ab0fc3_c7d07553a9674530bc87cf3b788df7e7~mv2.png/v1/fill/w_172,h_372,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Amenities.png)
![Hi-fi 4: Save location](https://static.wixstatic.com/media/ab0fc3_52a0f4a6517a457bac5197b5471f265e~mv2.png/v1/fill/w_172,h_372,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/selected.png)
![Hi-fi 5: Create new Saved list](https://static.wixstatic.com/media/ab0fc3_7ad43eab0c7244b8a1523b1b90202a5d~mv2.png/v1/fill/w_172,h_372,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/inactive.png)
![Hi-fi 6: Saved list](https://static.wixstatic.com/media/ab0fc3_94221ebee0dc4311b52db41bf831ae26~mv2.png/v1/fill/w_172,h_372,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Saved.png)
Saved lists can be shared with others
Checkboxes allow locations to be added to more than one Saved list at once
Container with "core amenities" emphasizes the importance of this information
Color allows users to understand if a location is open or closed at a glance
Usability Test Results
Participants, consisting of individuals who occasionally work from coffee shops 1-3 times per week, were asked to complete four task flows. These tasks involved reviewing location information, saving locations to a Saved list, and creating a new list. 100% of users successfully completed each task.
What went well
-
Testers liked amenity ratings on the Explore page.
-
The bookmark icon was clear in meaning and matched other apps.
-
4 out of 5 testers understood the "i" icon provided details about the amenity grading scale
What could be improved
-
The first tester's use of a mobile web browser impacted spacing and functionality, but other testers using different mediums found the app more usable.
-
3 out of 5 testers tried to use the search bar instead of scrolling to find a location. The prototype lacked this feature, as the anticipated happy path for users was to scroll. More low-fidelity testing could have prevented this issue.
![](https://static.wixstatic.com/media/a3c153_685d2d6de90f437e944fde8cc58eabf4~mv2.jpg/v1/crop/x_137,y_0,w_2698,h_3611/fill/w_355,h_475,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/Add-Panel_Stationary-481%20(3).jpg)
![nathan-ansell-JvbNsRCXXic-unsplash.jpg](https://static.wixstatic.com/media/ab0fc3_87ab0947ee894a96a18bdb4ea54fef56~mv2.jpg/v1/crop/x_0,y_317,w_3907,h_5228/fill/w_355,h_475,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/nathan-ansell-JvbNsRCXXic-unsplash.jpg)
Revisions
Based on the data collected at the testing stage, all feedback and observations were prioritized using an Impact-Effort Matrix to help prioritize revisions by measuring the impact against the effort required to implement said changes.
Explore
Screen
![Explore - Final](https://static.wixstatic.com/media/ab0fc3_062174b7bffb4f3f99b2847da1318094~mv2.png/v1/fill/w_161,h_348,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Explore%20-%20Final.png)
![Explore - V.1](https://static.wixstatic.com/media/ab0fc3_80ba063a43384dc8baa602be3bcf9fd3~mv2.png/v1/fill/w_161,h_348,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Explore%20-%20V_1.png)
Pill size was enlarged to be touch-point accessible
Map version modified for improved readability
Locations adjusted from cards to banner for sleeker appearance
Primary amenity switched from "turnover time" to "noise" based on user's top preference
Location Profile
Screen
![Location Profile - V.1](https://static.wixstatic.com/media/ab0fc3_f1befb03599d41a49108ca9a54bc1925~mv2.png/v1/fill/w_161,h_485,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Location%20Profile%20-%20V_1.png)
![Location Profile - Final](https://static.wixstatic.com/media/ab0fc3_2f0498d735a14665b65f6e1eaa8f8d98~mv2.png/v1/fill/w_161,h_478,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Location%20Profile%20-%20Final.png)
Primary color added to sharing & saving icons to reinforce user goals
Tool tip added for rating scale context
Labels added to amenities for clarity
Primary color removed from pills to remove focus from these actions
Number of reviews were added to provide context to users
Create New List Screen
![Create New List - Final](https://static.wixstatic.com/media/ab0fc3_8380b150fc9c47b9b78a3088a725f5ef~mv2.png/v1/fill/w_161,h_348,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Create%20New%20List%20-%20Final.png)
![Create New List - V.1](https://static.wixstatic.com/media/ab0fc3_61345ebeff8749c1b664b6138aad37b4~mv2.png/v1/fill/w_161,h_348,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Create%20New%20List%20-%20V_1.png)
iPhone display bar replaced to align with prototype model
Inactive button text updated to accessible font color
Looking Ahead
Reflecting on this project, I learned about designing a mobile app for remote workers seeking ideal coffee shop workspaces and faced challenges in scaling the product city-by-city while balancing brand integrity and accessibility. I made essential information easy to find, eliminating the need for users to sift through multiple sources.
Moving forward, I plan to expand the app to more cities, add locations, introduce user engagement incentives, and develop a pro/paid version. Key takeaways include refining user personas and flows based on feedback and recognizing that intuitive design for developers may not be clear to users. This project underscored the challenges remote workers face in finding suitable workspaces, reaffirming the app's value and the power of user-centric innovation in solving real-world problems, and enhancing my design skills.