top of page
Coffee+Remote Logo.png

A mobile app connecting remote workers to their ideal coffee shop for working.

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

Responsibilities:

  • UX Researcher

  • UX/UI Designer

  • Prototyping/User Testing

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

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

A medium shot of a content woman in her
"It's relatively time intensive to look at reviews for a location. I always want to know about the power outlet situation before working from somewhere with my old computer, but I don’t usually find this in a review."

Louise, Interviewee

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.

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

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

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
Coffee + Remote UI Kit

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
Lo-fi 2
Lo-fi 3
Lo-fi 4
Lo-fi 5

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

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
Hi-fi 2: Profile
Hi-fi 3: Amenities
Hi-fi 4: Save location
Hi-fi 5: Create new Saved list
Hi-fi 6: Saved list

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.

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

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
Location Profile - Final

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
Create New List - V.1

iPhone display bar replaced to align with prototype model

Inactive button text updated to accessible font color

Prototype

Click below to experience the Coffee + Remote prototype.

Prototype Preview

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.

Let's Connect!

  • alt.text.label.LinkedIn

©2024 by Katie Medley

bottom of page