PROJECT

Koffie Mobile Application

Koffie Mobile Application

Koffie Mobile Application

UI Design Refresh

UX Research / Testing

Prototyping

overview

Koffie empowers users to discover unique coffee shops while traveling or embracing the digital nomad lifestyle. In response to key stakeholder goals for enhancing usability, our team conducted in-depth research and testing. This effort allowed us to identify opportunities for usability improvements, refine the design system, and introduce valuable new features to elevate the user experience.

DATE

November 1, 2024-



January 5, 2024

November 1, 2024-



January 5, 2024

MY ROLE

Lead Product Designer

Lead Product Designer

TOOLS AND TECH

  • Figma

  • Adobe Illustrator

  • Jira

  • Figma

  • Adobe Illustrator

  • Jira

CORE TEAM

1 UX Designer

1 Developer

1 Strategist

1 UX Designer

1 Developer

1 Strategist

background

Koffie helps you take your office with you

Koffie helps you take your office with you

Koffie helps you take your office with you

Koffie is an app designed for digital nomads and remote workers, helping them find coffee shops that are perfect for working on the go. Users can search, discover, and save coffee shops across various cities, filtering results by criteria tailored to the needs of remote workers.

While users have enjoyed the app, our user testing revealed opportunities to further improve the experience and deliver even greater value. This feedback guided our efforts to refine and improve the app.

User problem

Digital nomads traveling to new cities face challenges in quickly identifying coffee shops that meet their needs for work-friendly environments. This results in wasted time, increased stress, and a less productive experience.

Digital nomads traveling to new cities face challenges in quickly identifying coffee shops that meet their needs for work-friendly environments. This results in wasted time, increased stress, and a less productive experience.

app audit

Before initiating user testing and research, we conducted a comprehensive app audit to assess where best practices were being followed and identify areas for improvement. Our key findings included:

  • Log-in and Sign-Up: The screens were challenging to navigate and did not effectively encourage new user sign-ups.

  • Input Boxes: Input fields were too small and difficult to interact with, impacting usability.

  • Profile Section: The profile section lacked critical information needed to make the app feel personalized and user-friendly.

Before initiating user testing and research, we conducted a comprehensive app audit to assess where best practices were being followed and identify areas for improvement. Our key findings included:

  • Log-in and Sign-Up: The screens were challenging to navigate and did not effectively encourage new user sign-ups.

  • Input Boxes: Input fields were too small and difficult to interact with, impacting usability.

  • Profile Section: The profile section lacked critical information needed to make the app feel personalized and user-friendly.

RESEARCH

Building on insights from our app audit, we conducted user testing to gain a more holistic understanding of what was working well and where the app fell short. This allowed us to gather valuable feedback directly from users and uncover deeper insights into their needs and pain points.

Survey

Participants:

0

We surveyed 20 digital nomads and remote workers.

We surveyed 20 digital nomads and remote workers.

User interview

Participants:

0

We conducted interviews with 15 digital nomads and remote workers.

We conducted interviews with 15 digital nomads and remote workers.

Location

Countries:

0

Of the users we interviewed, they were living and working in 5 different countries.

Of the users we interviewed, they were living and working in 5 different countries.

Main research findings

  • Discovery Methods: Most digital nomads relied on social media or Google Maps to find coffee shops while traveling and working.

  • Lack of Organization: Participants generally lacked a structured method for saving or organizing their coffee shop discoveries.

  • Key Priorities: When choosing a coffee shop, top priorities included Wi-Fi availability, convenient location, and access to power outlets.

user quotes

User 1

"It’s so frustrating to find a coffee shop I think will work, only to arrive and realize I can’t get anything done there. It feels like such a waste of time—time I could’ve spent being productive."

"It’s so frustrating to find a coffee shop I think will work, only to arrive and realize I can’t get anything done there. It feels like such a waste of time—time I could’ve spent being productive."

User 2

"I usually rely on Google Maps to find good work spots, but it’s hard to know if they allow laptops or have tables big enough to work comfortably."

"I usually rely on Google Maps to find good work spots, but it’s hard to know if they allow laptops or have tables big enough to work comfortably."

Users

Hayden

Hayden is a software engineer currently based in Southeast Asia, with previous experience living and working in Costa Rica, Argentina, Spain, and Germany. A true thrill-seeker, he enjoys surfing and engaging in adrenaline-fueled activities like skydiving, base jumping, and bungee jumping. Professionally, Hayden is driven, organized, and thrives in the autonomy that remote work provides.

Age:

32

Profession:

Software Engineer

Current location:

Thailand

Kami

Kami is a skilled graphic designer living the digital nomad lifestyle for the past two years. Although Rotterdam is her home base, she frequently takes weekend trips across Europe. While traveling, she enjoys discovering local bookstores, cafes, wine bars, and art galleries. A fan of unique stays, she often chooses distinctive Airbnbs that let her immerse in the local culture and cuisine. Professionally, Kami is a creative problem solver with a focus on working with clients in the consumer packaged goods industry. She is known for being both professional and punctual.

Age:

27

Profession:

Graphic Designer

Current location:

The Netherlands

User journey

We began by outlining Koffie’s user journey and identifying the key motivations driving users to the app. This included mapping the typical path a user might take to discover the app, the frustrations we aimed to address, and the core functionalities that would provide the most value.

We began by outlining Koffie’s user journey and identifying the key motivations driving users to the app. This included mapping the typical path a user might take to discover the app, the frustrations we aimed to address, and the core functionalities that would provide the most value.

FEATURE PRIORITIZATION

Once we identified key features for improvement and new additions, we created a diagram that mapped out the features users found most important alongside those stakeholders wanted updated. Given the constraints of budget and timeline, we knew certain features would need to be prioritized. To guide this decision-making process, we used a matrix to evaluate and prioritize features based on their potential impact.

Once we identified key features for improvement and new additions, we created a diagram that mapped out the features users found most important alongside those stakeholders wanted updated. Given the constraints of budget and timeline, we knew certain features would need to be prioritized. To guide this decision-making process, we used a matrix to evaluate and prioritize features based on their potential impact.

DESIGN SYSTEM

Before diving into the development of new features, we took time to reflect on the app's brand look and feel. This involved reviewing the brand's colors, typefaces, and logo marks to ensure they aligned with the overall user experience and the app’s core identity. The original identity had 14 colors, so we narrowed these down to just 5, and defined text styles that could be used throughout the app.

Before diving into the development of new features, we took time to reflect on the app's brand look and feel. This involved reviewing the brand's colors, typefaces, and logo marks to ensure they aligned with the overall user experience and the app’s core identity. The original identity had 14 colors, so we narrowed these down to just 5, and defined text styles that could be used throughout the app.

Simplified Logo: Mark only


  • We put together this simplified logo that included only the icon for situations where the product name would not be necessary.

Simplified Logo: Mark only


  • We put together this simplified logo that included only the icon for situations where the product name would not be necessary.

Simplified Logo: Mark only


  • We put together this simplified logo that included only the icon for situations where the product name would not be necessary.

Simplified Logo


  • This logo is to be used in the app store, and when speaking about the overall app.

Simplified Logo


  • This logo is to be used in the app store, and when speaking about the overall app.

Simplified Logo


  • This logo is to be used in the app store, and when speaking about the overall app.

TYPOGRAPHY

H1

Instrument Sans Bold

24/30

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore

H2

Instrument Sans Bold

18/22

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore

H3

Instrument Sans Medium

18/22

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore

H4

Instrument Sans Bold

16/20

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore

H5

Instrument Sans Medium

16/20

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore

Body

Instrument Sans Regular

12/16

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore

Descriptor

Instrument Sans Regular

10/14

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore

color palette

component library

By examining the existing designs, we identified key reusable components that could be developed for use across multiple screens. This approach allowed us to streamline the design process and ensure consistency throughout the app.

By examining the existing designs, we identified key reusable components that could be developed for use across multiple screens. This approach allowed us to streamline the design process and ensure consistency throughout the app.

product updates

Drawing from insights gathered through both our app audit and user testing, we compiled a list of prioritized updates for our team to implement:

  • Simplify and improve the login and signup screens for a smoother user experience

  • Increase the size of input boxes and radio buttons to make them more accessible for touch interactions

  • Enhance the profile page with additional features for a more personalized experience

  • Improve the map page by adding smart filters to streamline coffee shop discovery

  • Rework the search bar to make it more easily accessible across all pages

  • Add a reviews section to coffee shop pages for user feedback and ratings

Drawing from insights gathered through both our app audit and user testing, we compiled a list of prioritized updates for our team to implement:

  • Simplify and improve the login and signup screens for a smoother user experience

  • Increase the size of input boxes and radio buttons to make them more accessible for touch interactions

  • Enhance the profile page with additional features for a more personalized experience

  • Improve the map page by adding smart filters to streamline coffee shop discovery

  • Rework the search bar to make it more easily accessible across all pages

  • Add a reviews section to coffee shop pages for user feedback and ratings

Drawing from insights gathered through both our app audit and user testing, we compiled a list of prioritized updates for our team to implement:

  • Simplify and improve the login and signup screens for a smoother user experience

  • Increase the size of input boxes and radio buttons to make them more accessible for touch interactions

  • Enhance the profile page with additional features for a more personalized experience

  • Improve the map page by adding smart filters to streamline coffee shop discovery

  • Rework the search bar to make it more easily accessible across all pages

  • Add a reviews section to coffee shop pages for user feedback and ratings

Drawing from insights gathered through both our app audit and user testing, we compiled a list of prioritized updates for our team to implement:

  • Simplify and improve the login and signup screens for a smoother user experience

  • Increase the size of input boxes and radio buttons to make them more accessible for touch interactions

  • Enhance the profile page with additional features for a more personalized experience

  • Improve the map page by adding smart filters to streamline coffee shop discovery

  • Rework the search bar to make it more easily accessible across all pages

  • Add a reviews section to coffee shop pages for user feedback and ratings

Login screen

To make signing up and logging in easier for users, we implemented the following changes:

  • Added a toggle function for seamless switching between sign-in and sign-up

  • Integrated options to log in with Google, Apple, or Meta for faster access

  • Updated the sign-in card with a sleeker, more modern UI for a refreshed look and feel

  • Introduced a smart error state to alert users of any mistakes in their password as they type

To make signing up and logging in easier for users, we implemented the following changes:

  • Added a toggle function for seamless switching between sign-in and sign-up

  • Integrated options to log in with Google, Apple, or Meta for faster access

  • Updated the sign-in card with a sleeker, more modern UI for a refreshed look and feel

  • Introduced a smart error state to alert users of any mistakes in their password as they type

home screen

We implemented several usability improvements and UI updates to enhance the home screen experience:

  • Introduced a horizontal scroll function between categories for easier navigation

  • Removed the “Map View” button below the search bar, as most users were already accessing map view from the bottom navigation bar

  • Streamlined coffee shop cards by removing unnecessary information

  • Prioritized key information on coffee shop cards based on insights from user testing

  • Enlarged the “like” button, addressing user feedback that it was difficult to click

We implemented several usability improvements and UI updates to enhance the home screen experience:

  • Introduced a horizontal scroll function between categories for easier navigation

  • Removed the “Map View” button below the search bar, as most users were already accessing map view from the bottom navigation bar

  • Streamlined coffee shop cards by removing unnecessary information

  • Prioritized key information on coffee shop cards based on insights from user testing

  • Enlarged the “like” button, addressing user feedback that it was difficult to click

filter options

User testing provided valuable insights for improving the filter screens:

  • Based on user feedback from our survey, we updated the filters to better address relevant user needs

  • Users reported that the radio buttons and “like” buttons were too small and difficult to click, so we enlarged them for easier interaction

  • It was unclear to users that the filters could be swiped down to disappear. To improve this, we added a background image behind the filter screen and increased the spacing to make the functionality more intuitive

  • Users also had trouble finding the back button once filters were applied, so we made it more prominent for easier navigation

User testing provided valuable insights for improving the filter screens:

  • Based on user feedback from our survey, we updated the filters to better address relevant user needs

  • Users reported that the radio buttons and “like” buttons were too small and difficult to click, so we enlarged them for easier interaction

  • It was unclear to users that the filters could be swiped down to disappear. To improve this, we added a background image behind the filter screen and increased the spacing to make the functionality more intuitive

  • Users also had trouble finding the back button once filters were applied, so we made it more prominent for easier navigation

coffee shop page

User feedback highlighted several key improvements for the coffee shop pages:

  • Users wanted more useful information, such as overall star ratings and a summary of user experiences at each shop

  • Location information needed to be more prominent and easily accessible

  • The back button was hard to find, so we made it more visible for easier navigation

User feedback highlighted several key improvements for the coffee shop pages:

  • Users wanted more useful information, such as overall star ratings and a summary of user experiences at each shop

  • Location information needed to be more prominent and easily accessible

  • The back button was hard to find, so we made it more visible for easier navigation

map page

Overall, users found it easy to navigate the map page and discover new coffee shops. However, they encountered a few pain points, including:

  • Difficulty applying filters to meet their specific needs

  • Challenges when trying to exit the map view and return to the main screen

profile page

Users found the profile page difficult to navigate and struggled to locate key information. A major research finding was that users wanted a simple way to save coffee shops they had discovered or wanted to try. To address this, we added a dedicated Favorites and Wishlist section to the profile page, allowing users to easily store and revisit their favorite coffee shops.

Users found the profile page difficult to navigate and struggled to locate key information. A major research finding was that users wanted a simple way to save coffee shops they had discovered or wanted to try. To address this, we added a dedicated Favorites and Wishlist section to the profile page, allowing users to easily store and revisit their favorite coffee shops.

Post-Update Testing Results:

After implementing the usability improvements, we conducted additional testing with our users. Key findings included:

  • Users had less difficulty filtering search results and navigating the app

  • Saving coffee shops to revisit later was easier, and users could find them with less effort

  • The heart icons and radio buttons were more accessible and enjoyable to interact with

  • The updated UI felt more breathable, contributing to an overall more enjoyable user experience

Further Testing and Refinement:

Moving forward, we will continue refining and testing new features to enhance the app. Some stuck out in our testing:

  • Wishlist Organization: Users expressed interest in a way to segment and organize their wishlist by city

  • Map View Improvements: Users requested a more seamless way to view search results on a map, rather than in a list view

  • Real-Time Information: Users would appreciate real-time data on coffee shops, such as current busyness, seating availability, or Wi-Fi speed

next steps

Monitor User Feedback: Continue gathering user feedback to assess the effectiveness of the updates and identify any new areas for improvement.

Feature Enhancements: Explore adding additional features such as personalized recommendations, event listings at coffee shops, and integration with task management tools.

Ongoing Testing: Conduct periodic usability testing to ensure that new features continue to meet user needs and improve the overall user experience.

Brand Alignment: Ensure that all future updates stay aligned with Koffie's brand identity and core values, creating a seamless and consistent user experience.

WORK

ABOUT

CONTACT

WORK

ABOUT

CONTACT

WORK

ABOUT

CONTACT

Work

About

Contact

© 2024 Sara Duval