Helping students find the perfect cafe to focus and study.
Introduction
Sip +Study is an iOS app in beta that will help students find the ideal cafe in which to work and meet with study groups. Because each study and work session is different, and each user has unique needs for their environment, the Sip + Study app needed to provide the important information to help them locate the ideal cafe.
Design Challenge
My task was to help students find the ideal cafe where they can work and study by redesigning the Cafe Detail Screen to facilitate the cafe selection process.
Previous Work
User Flow & Research
Sip+Study provided screens and the ideal flow that would lead to the Cafe Detail Screen:
Feature prioritization
Based on previous research, I knew users need basic information about the cafe, what amenities are provided, when it is crowded and how long they can stay. The noise level, comfort level and reviews would be nice to include to help users get a more detailed picture of the workspace. Additionally, showing if users have to make a purchase to use the cafe and if groups can use the space would provide more value.
Competitive Analysis
I looked at other apps that help people discover places to eat as well as one that offers private work spaces by the hour or day. These comparisons helped clarify various ways to prioritize and present the information.
Sip + Study can take the middle ground by focusing on the context and environment of the venue, and including food and menu reviews as a secondary feature.
Ideation
I began by considering the different conditions and contexts in which someone would be looking for a cafe. I created Job Stories based on those conditions:
- When I need somewhere to hunker down and finish a project, I want to be able to easily get a sense of the environment and amenities, so I can make sure it will suit my unique needs.
- When I’m planning to stay all day, I want to know if that is allowed and under what conditions, so I can avoid angry/judge-y looks from the staff.
- When I need somewhere to work with a group, I want to see how many people a cafe can accommodate, so I can be sure we will have enough room.
- When I make a plan, I want to know when a cafe is crowded, so I can time my arrival when there will be tables open.
- When I look for cafes, I want to see their food and drink options, so I can find something I will like.
Sketches
In paper sketches, I considered ways to display information based on priority for the user, as well as create appeal and interest. The features users considered less important, such as reviews and photos, were placed under separate tabs to be easily accessible, but so as not to clutter the main screen.
I chose to exclude information that could be found and filtered in the list screen, such as “open now,” distance and price because it could be redundant based on their filters. However, I would gather feedback to determine if they should be added in. Though users requested information about availability of restrooms, I opted not to include it because restaurants are legally required to provide accessible facilities if they have seating. I also included a feature to recommend similar cafes that met the previously entered search criteria.
I explored using an accordion style UI, but felt it might be confusing and frustrating to use on a mobile device. That is something I would like to test in the future.
Wireframes
Wireframes allowed me to gain a better sense of how sketches might appear on an actual phone screen and help students get the information they need. When users scroll down the screen, the tabs stick at the top to allow for easier navigation.
Visual Design
Because this screen was part of an existing series, I tried to emulate the design style of the other screens. The color palette is high contrast, icons help the user quickly identify different amenities and a graph conveys how crowded and noisy a cafe is as well as its hours of operation.
Testing and Iteration
I did rapid, guerrilla testing with a few students in a local cafe to get their feedback. The primary issues that came up were
- The hero image did not have enough contrast
- The color palate is not appealing
- The crowd and noise volume graph is not clear enough.
While there are a few issues to resolve, all of the testers found the app useful and the cafe detail screen informative. The majority said they would like to use the app once it becomes available.
Taking this feedback into account, I will continue to refine the prototype and apply research and principles of psychology to improve the screen.