Study Case UX : Coffee Shop finder and Reservation App
It’s a solution for everyone in anywhere where you could find Cafe or Coffee Shop in you current location
So lately i was thinking about an application to find Cafe or Coffee Shop in my current area, cause i’m introvert and i got lazy easily if i go out so sudden without any plan like my social-battery easily running out. So i got an idea to make application that can make reservation online on any Cafe or Coffee Shop that have been registered and from this idea i simply have kind of User Persona.
The Problem or User Persona
Tom is a diligent and creative student. He often feels inspired to study and work outside the home, especially in cozy cafes. For Tom, a cafe is not just a place to grab a coffee, but also a space to get inspired, work on assignments, and meet friends. However, finding the perfect cafe is often a challenge.
Tom is not the only one facing this problem. Many students, freelancers and other young professionals are also looking for the ideal place to work and relax. To solve this problem
And here’s the problem from the user persona
1. Comfort
= Not all cafes offer a comfortable atmosphere for studying or working.
2. Facilities
= Some cafes do not have stable Wi-Fi or enough power outlets.
3. Crowds
= Sometimes the cafe he chooses is too crowded, making it difficult to focus.
4. Menu
= Tom also wants to know if the cafe offers food and drinks that suit his tastes.
So, based on the user persona’s pain points, I whipped up a survey to gauge the specific issues they might be facing. You know, the whole comfort, facilities, hospitality, and menu thing? I figured my friends would be a good starting point, and let me tell you, the results were pretty eye-opening.
Research
I wanted to get a feel for what people loved (and hated!) about coffee shops, so I threw together a quick survey on Microsoft Forms and blasted it out to my friends and fam. Based on all their responses, this awesome idea popped into my head…
“If there was a coffee shop finder app, what would you expect to find in the app? ( Explain )”
- Maybe provide overall details of the location, menu, prices and pictures in addition to the facilities they have. If possible give users the facility to give certain comments and reviews. (Person 1)
- Information about seat availability, visual map of the coffee shop, detailed information about the coffee shop, reviews and ratings, and information about discounts/special offers from certain coffee shops. (Person 2)
- Prices are clearly stated so that consumers are not confused, as well as providing ratings on food and drinks at the coffee shop to make it easier for customers to guess whether the food is good or not, and whether online payment is also possible. (Person 3)
- The main menu and features are quite complete so far that I have visited. It’s just that the appearance and arrangement of the UI is still not beautiful so that it can affect the UX (Person 4)
The above answer is my preferred answer and I think it covers some of the same answers as well. And here below are the other answers that you can see
User Need
Alright, buckle up! Now that we’ve got a feel for who’s using this Coffee Shop Finder App, let’s dive into what features they’re craving. Time to spill the tea (pun intended) on what users really want!
- Convenience
Provide a view or a card in a coffee shop detail that provides options whether it is friendly for work or study and advise what features are present in that venue - Facility
Introduce a filter feature on the home page or in the search that filters which coffee shops are suitable with adjusted filters. - Crowds
Provides information about the availability of seats owned by a coffee shop and how many seats are available at that time and also provides information on how crowded the atmosphere is in the coffee shop and provides a feature of what time of day is busy with customers. - Menu
Introduce a filter feature that filters beverages and eateries in the search which makes the search results more accurate. In the future, there will be additional eatery filtering Javanese Food, Indonesian Food, Chinese Food, Western Food etc.
User Flow
Alright, let’s break down the user flow! First things first, gotta get users signed in or signed up. Then, the fun part — snagging a reservation at their favorite coffee shop! Finally, we’ve got some sweet filter features to help them find the perfect cup of joe heaven.
- LOGIN/REGISTRATION
Register
Users may log in to an existing account or create a new one. To create an account, users will be directed to a registration page where they can provide their email address and password. Alternatively, for expedited registration, users may utilize their Google, Apple, or Facebook accounts. If the provided email address is already associated with an account, a notification indicating existing registration will be displayed. Otherwise, the system will verify the entered password and confirmation password. Upon successful verification, users will proceed to an OTP page. Correctly entering the OTP code sent to the registered email address will complete the registration process.
Login
Upon selecting the login option, users will be directed to a dedicated login page. Here, they are required to input their registered email address and corresponding password. The system will validate the provided email address to confirm its association with an existing account. If no matching account is found, users will be prompted to register for a new account.
Once the email address is verified, the system will authenticate the entered password. Successful password verification will grant access to the subsequent OTP (One-Time Password) page. An OTP will be transmitted to the registered email address for security purposes. Upon correct entry of the received OTP, users will be notified of a successful login and granted access to their account.
What if they don’t want Login or Register?
Users who opt not to log in or register will be directed to the main platform homepage. While this homepage provides accessible viewing of the menu and locates nearby coffee shops based on the user’s device settings, it imposes certain limitations. Essential functionalities such as making reservations and accessing personalized preferences remain inaccessible to unregistered users. To unlock the full spectrum of platform features and benefits, users are encouraged to create an account or log in to an existing one via the profile page. This action grants complete access to the platform’s comprehensive offerings.
2. RESERVATION
Reservation
The reservation process commences with the user selecting a preferred date and time for their visit. Subsequently, they specify the number of guests and choose their desired seating arrangement. The following steps involve menu selection, including optional add-ons, and a comprehensive order review. Upon confirmation, customers provide personal and payment information, which is processed securely. The reservation is finalized with payment authorization, receipt generation, and confirmation details sent to the customer.
3. FILTER/SEARCH
Filter and Search
The application’s filter and search function is designed to optimize user discovery of coffee shops and cafes that align with their specific preferences. Users can initiate a search by directly inputting the name of a desired establishment. The system responds by presenting exact matches followed by a supplementary list of nearby alternatives.
To further refine search results, users can access a dedicated filter page. This interface provides a comprehensive set of filtering criteria, encompassing coffee types, available food options, and establishment amenities. Users can select multiple criteria to narrow down their search results. For instance, a user seeking a quiet workspace with a specific coffee brew can filter results based on “work-friendly,” “coffee type,” and potentially additional criteria such as “outdoor seating” or “WiFi strength.”
Upon applying the desired filters and submitting the search query, the application generates a tailored list of coffee shops and cafes that precisely meet the specified preferences. This functionality empowers users to efficiently identify establishments that cater to their individual needs and desires, enhancing overall user experience and satisfaction.
Low-Fidelity
To break it down for you, the Low Fidelity Wireframes are like a blueprint — split into three key sections. First up, we’ll see the reservation flow in action, step-by-step. Then, we’ll dive into the login and registration process. Last but not least, we’ll explore the homepage, search functionality, and detailed coffee shop pages. Think of it as a guided tour of the core user journeys!
- Reservation in Coffee Shop/Cafe
Low-Fidelity Model: Reservation Page
The low-fidelity model presents a skeletal overview of the reservation page, encompassing the primary functional components and information structure. The user journey commences with date and time selection, followed by guest count specification, seating preferences, menu curation, order summary, customer information input, payment processing, and concluding with reservation confirmation.
This preliminary model serves as a foundational blueprint for subsequent design iterations, allowing for focused attention on user flow, content hierarchy, and essential information architecture prior to the incorporation of detailed visual elements and interactive features.
2. Login and Register
To optimize user experience and brand consistency, a vector-based design system is recommended for the login/register page soon, aligning with the established approach like in the OTP page. By positioning the brand logo and tagline prominently at the top of the screen, a clear visual hierarchy is established, reinforcing brand identity and guiding user focus.
Key design considerations include the consistent application of typography and color palette, the implementation of clear and strategically placed action buttons for login and registration, and the provision of concise yet informative microcopy to support user navigation and decision-making.
3. Home, Search, Profile etc.
Our homepage is designed to help you discover your new favorite cafe. Search by name or use the filters to narrow down your options. Once you’ve found a place you love, you can save it for later, book a table, and even share your experience with others. Your profile page is your personal cafe hub, where you can manage your reservations, view your review history, and see all the photos you’ve taken.
Typography
Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. (https://tinyurl.com/4stc52hv)
I’ve selected SF Pro Display as my primary typeface due to its aesthetic appeal. This font will be utilized for both the Darling Coffee logo and the overall textual content. Given my strong affinity for SF Pro Display, I aim to fully explore its typographic potential within this design project.
Logo
The logo employs the ‘Darling Coffee’ font to create a visually appealing and inviting design. This font choice effectively communicates the app’s accessibility to a diverse user base, as its bright and cheerful aesthetic fosters a sense of enthusiasm and optimism. To enhance the logo’s depth and dimension, I utilized Adobe Illustrator to apply subtle shadow effects and precisely manipulate anchor points and joints.
Design System
To establish a cohesive design foundation, color and text styles were leveraged. Color styles, utilizing the foundation provided by Figma, facilitated the creation of a comprehensive color palette, enabling efficient application and management of color variations across different design elements. For instance, color styles were instrumental in defining button states such as hover, pressed, and inactive.
Complementing the color styles, text styles were introduced to streamline typography consistency. Basic styles for headings and details were established as a starting point, anticipating their utility in enhancing design efficiency and maintaining typographic harmony throughout the design process.
Building a solid foundation with color styles was a great first step, but I knew there was always more to learn. That’s why I decided to take a deep dive into Figma tutorials. It wasn’t just about mastering the software, though. I wanted to soak up as much knowledge as possible about design systems and best practices in general. Now that I’ve got this fresh set of insights under my belt, I’m itching to experiment and see how they can take this project to the next level. It’s like having a whole new toolbox to play with, and I can’t wait to see what kind of creative solutions I can unlock!
I’ve been using Figma’s built-in Styles for a while, especially for colors. But I’m diving into the world of Tokens or Variables now. They seem way more future-proof, you know? Plus, you can use them for colors, text, even numbers and true/false stuff (booleans). Utilizing variables is a key practice that fosters efficiency and consistency across design projects. By establishing a foundation in variable usage, I can ensure a smooth transition to more complex implementations in future designs. Notably, variables empower effortless creation and application of light and dark mode themes, streamlining the design process.
Leveling up the user experience is always a priority for me, and that’s why I’m super excited to be implementing a light/dark mode toggle on the homepage using variables. Think of it as a one-click superpower for switching themes — pretty neat, right? This functionality actually stems from some experimentation I did while designing a crypto app earlier. Fear not, crypto fans, that design is getting a whole new lease on life — it’s transforming into a sleek cafe app for the High Fidelity section! Stay tuned to see how it all comes together!
I’ve been diving into components and their variants to add another layer to my design toolkit. It’s not just about variables anymore; components let me create a system of reusable elements that are super helpful for maintaining consistency and speeding up the design process. Whether it’s for polished designs or early prototypes, components are a real time-saver.
High-Fidelity
In this high-fidelity iteration, I’ve decided to minimize the amount of text to allow for a more immersive visual experience. Building upon our low-fidelity prototype, I’ve carefully crafted visuals that are sure to captivate the audience.
- Reservation in Coffee Shop/Cafe
2. Login and Register
3. Main page etc.
I’ve taken you on a journey from the initial concept of a coffee shop finder app to a detailed exploration of its design and functionality. By putting myself in the shoes of users like Tom, I’ve strived to create a product that truly addresses their needs. From understanding pain points to crafting a visually appealing and user-friendly interface, this case study represents a significant step in developing a solution that can revolutionize the coffee shop experience.
I believe that by combining thoughtful design with a deep understanding of user behavior, we can create a product that not only meets but exceeds expectations. This project has been a rewarding experience, and I’m eager to see how it evolves based on user feedback and testing. Thank you for following along on this design journey.