CONTEXT

My team shared a common love for studying and working at cafes, but also a common struggle to find new cafes that match our needs—from charging outlets to a quiet ambience. We also recalled how our friends who enjoy cafe-hopping—visiting multiple cafes in a single day—faced the same frustrations of driving 15 minutes to a cafe just to find no seating or chargers available.

From college students to cafe regulars, many face challenges in finding suitable coffee shops for productive work sessions. This commonality led us to the idea of creating an application specifically to help users find cafes to match their productivity needs.

How can we help college students to easily filter cafes for distance, availability, and atmosphere to satisfy their cafe experience?

USER RESEARCH

To learn more about users' cafe-searching experiences, we conducted surveys and interviews—with our respondents ranging from college freshmen to seniors. We also constructed a competitive analysis matrix to compare various apps with similar concepts: helping users find cafes near them.

FINDINGS

Outlets, seating, wifi, and noise level are the most prioritized features respondents take into consideration

Finding seats and good work environments are the main challenges faced when looking for cafes

There are no cafe-focused apps in the US—only general restaurant finding apps

SKETCHING/USER FLOW

Utilizing our findings, we sketched out wireframes for an application displaying cafes with their amenities: outlet availability, wifi, and crowd levels. We also wanted to include a pomodoro timer to promote productivity and help to foster an effective work environment.

Low-fidelity sketches of onboarding, cafe search, and account pages

We decided our main screens would consist of browsing, profile, pomodoro, and search pages. To ensure we covered all features we wanted to implement, we created a user flow—which also included the onboarding flow of creating a profile.

Complete user flow of app to include all features

BRAND IDENTITY

As we constructed our mid and high-fidelity prototypes, we also created a brand identity to ensure our elements were consistent throughout our designs. Our vision for the application was to create a simple and sleek design, so users could easily skim through the key attributes of each cafe to decide where to go. We also wanted the app's design to be reminiscent of coffee, hence the reason why there are many coffee cup motifs—for ratings and crowd levels—along with a brown/cream color palette.

Image to show the transition from mid-fidelity to high-fidelity wireframes for LoCafe.

Brand identity and coffee-cup motifs in mid and high-fidelity wireframes

USABILITY TESTING

After finishing our high-fidelity wireframes, we performed usability testing to observe how people navigate to add cafes to their "list", how they use features and exit out of them, and if there are any features that should be added to help the users. We created three usability tasks for each tester and recorded their actions.

TAKEAWAYS

Some features were hard to understand, asked for tutorials

Buttons and text needed more consistency

Users were disappointed in how there was no review section, wanted a clear way to see/make a review

After testing, we edited our prototype to include more pop-ups for new features and a reviews section for cafes. We also looked over our styling to ensure everything matched and finished our Locafe prototype.

REFLECTION

With Project Teams lasting for 10 weeks, my biggest takeaways were learning how to clearly communicate my ideas and keeping designs consistent with multiple designers. In the beginning of the ideation process, everyone in the team had a variety of ideas and we struggled with narrowing down our options. This led to us needing to have multiple conversations about what our priority was with the app, where each of us explained our intentions for the features we wanted to implement and how it connected to our original idea.

Icon used to describe how one of my key takeaways was communication.

Our conversations about features to implement made me realize how important it is to explain our ideas thoroughly, or else it would have been more confusing to decide how we wanted to move forward. I also learned the importance of listening to others' ideas and feedback, because most of the time my team helped me to notice small details and points I missed before their input.

As for consistency, I never worked with five other designers on the same project, so coming up with a consistent element design was difficult for me—especially since I was used to making wireframes by myself. However, by utilizing Figma and communicating with my team, we were able to ensure our pages were all consistent and followed the same style guidelines.