bar do giba
Introdution
This project was developed as the final deliverable for the ‘Profession: UI/UX Designer’ course at the British School of Creative Arts (EBAC). The project involves selecting a theme/problem to address throughout the course and proposing a feasible solution for it. I chose this theme because I found interesting to study a case close to me, in this case, a restaurant in my neighborhood, where I have easy access to the establishment and its customers.
Problem Description
Bar do Giba is a traditional restaurant in São Bernardo do Campo, SP where everything is served: from drinks to full meals and desserts. With the arrival of food delivery apps, Bar do Giba joined the platform and started delivering with them, which helped boost sales. However, currently, the service fee charged by the app is weighing on the owner’s finances. He believes it would be more profitable to have their own app where this transaction would take place.
CSD Matrix - Desk Research and Hypothesis Development
Certainties |
Assumptions |
Doubts |
|---|---|---|
Benchmark
- Location/website: www.ifood.com.br
- Primary Feature: Food delivery app that connects customers to multiple restaurants. Allows customization of orders and tracking of delivery status.
- Secondary Feature: Possibility of online payment, restaurant and dish reviews, exclusive promotions.
- Price: Variable according to the restaurant
- Location/website: Sao Bernardo do Campo, SP. It answers only via smartphone
- Primary Feature: Zeca’s Bar specializes in homemade food delivery, with a wide variety of dishes and vegetarian options. It has an ordering system via Whatsapp, where you can choose the desired dish and payment method. In addition, it offers exclusive promotions for registered customers.
- Secondary Feature: Fast and safe delivery, options for desserts, drinks and side meals, sustainable packaging and options for events and parties.
- Price: It varies according to the chosen meal, but on average an individual meal costs R$25.00.
- Etc: It has a customer evaluation and feedback system, where it is possible to evaluate the quality of food, service and delivery.
- Location/website: São Bernardo do Campo and via Whatsapp and Instagram
- Primary Feature: Menu with options for homemade dishes and typical Brazilian cuisine, free buffet and à la carte, own delivery service, family and cozy atmosphere.
- Secondary Feature: Vegetarian and vegan options, ambient music, lunch specials during the week, free parking, space for events and parties.
- Price: It varies according to the chosen dish, but on average an individual dish costs R$45.00.
- Etc: Restaurant with more than 20 years of history in the region, focused on homemade food and affordable prices, frequented by families and groups of friends.
design process
I developed my project using the Design Thinking Methodology, which is a problem-solving approach that emphasizes empathy, creativity, and iteration. It involves understanding user needs, generating ideas, prototyping, and testing solutions. By focusing on user-centered design, it helps teams to innovate and create meaningful experiences.
Research
- Objective: Understand the needs and desires of Bar do Giba customers in relation to an app for the restaurant
- Methodologies: Individual interviews with open and closed questions about eating habits, use of delivery apps, frequency of visits to Bar do Giba, interests in the restaurant’s own app, among other relevant aspects.
- Expected Results: Deeper understanding of the needs of Bar do Giba customers in relation to their own application, identification of problems and opportunities to improve the user experience.
- Justification: Qualitative research allows obtaining more detailed and in-depth information about the opinions and habits of Bar do Giba customers.
- Sample: 10 frequent customers of Bar do Giba.
Highlights
- Most interviewees usually order at Bar do Giba by phone or in person.
- Some respondents reported having difficulties ordering or paying at the establishment.
- Most respondents believe that a Bar do Giba application could facilitate their experience as a customer.
- The features most valued by respondents in a restaurant delivery application are the ability to order in advance, order tracking and the option to customize dishes.
- Respondents have already used a restaurant delivery application and believe that a Bar do Giba application would increase their chances of ordering food at the restaurant more often.
Insights
- Some customers experienced difficulties ordering or paying at the establishment, suggesting that the on-site fulfillment process needs to be improved.
- All customers are used to using restaurant delivery apps, which suggests an opportunity for Bar do Giba to adapt to changes in consumer behavior and become more competitive in the market.
- The features most valued by customers in a delivery application can be an opportunity for Bar do Giba to differentiate itself from the competition and offer a more personalized experience to customers.
Persona
Maria Aparecida
“Sometimes I just want a break from the kitchen and order something quality for my family.”
Behaviors and motivations
Maria is a skilled cook and enjoys cooking for her family, but sometimes she wants a break. She values the quality and variety of her food and enjoys supporting local businesses.
Demographic Data
- 40 years old
- Married
- Mother of two teenagers
- Works part-time at a shop near Bar do Giba
- Lives in São Bernardo do Campo, SP
Needs and goals
Maria wants to order quality food and variety from Bar do Giba for delivery to her home on special occasions.
Empathy Map
User Journey
Step |
Doing |
Thinking |
Feeling |
|---|---|---|---|
Needs to order food
|
Thinks of a meal option for the family
|
Concerned about the quality and variety of food
| |
Opens the Bar do Giba app
|
Searches for the Bar do Giba app
|
Expects to find a quick delivery option
|
Anxious to find the right app
|
Logs in or signs up on the app
|
Enters personal information on the app
|
Concerned about the security of provided data
|
Expects an easy registration process
|
Browses the menu options
|
Analyzes the menu options at Bar do Giba
|
Concerned about the quality and taste of food
|
Hungry and looking forward to a tasty meal
|
Selects items for the order
|
Chooses meal and additional items to order
|
Checks price and item availability
|
Satisfied with selecting a special meal
|
Chooses the payment method
|
Selects from available payment options
|
Verifies payment security
|
Happy knowing the payment is secure
|
Confirms the order and receives confirmation
|
Confirms the selected items and completes the order
|
Expects to receive order confirmation
|
Relieved and satisfied for completing the order
|
Receives notification that the order is out for delivery
|
Receives a notification that the order has left the Bar
|
Checks estimated delivery time
|
Excitement and hunger while awaiting food delivery
|
Receives the order at home
|
Receives the order delivered by the Bar do Giba rider
|
Verifies order accuracy
|
Satisfaction in receiving the meal at home
|
Evaluates the ordering experience
|
Evaluates the ordering and app experience
|
Considers leaving a positive review
|
Satisfaction in having a positive experience
|
Needs Statement
Maria needs a convenient and easy way to order food so she can enjoy a break from her family cooking routine without having to worry about food quality or delivery.
Ideation
Offer a varied menu with healthy options
Make the ordering process easy
Ensure fast and reliable delivery time
Ensure confidentiality of personal and bank data
Offer exclusive promotions to loyal customers
Lo-fi Prototypes
Based on all the conducted research, I have initiated the construction of the low-fidelity prototype of the application, aiming to address the needs and goals identified by the customers during the research conducted at Bar do Giba. Below, you can check the wireframes developed thus far.
Usability Tests
After the first round of creating the wireframes, a few more tweaks were made to the low-fidelity prototypes to optimize usability tests, such as adding the icon designs so that the user has a visual hint of where to click and is not induced into error due to lack of information.
Three usability tests were conducted with three different customers of Bar do Giba.
Overall, the majority of users were able to complete the tasks successfully and quickly. Girlei encountered a minor error in Task 1, clicking on the wrong option, but it had a low severity. These results indicate a generally positive usability experience with the low-fidelity prototypes.
Style Guide
Bar do Giba is a traditional restaurant in São Bernardo do Campo, SP where everything is served, but their specialty is homemade Brazilian food, so I decided to incorporate a very characteristic style and bring several elements that refer to Brazilian culture, our passion, food, warm colors, tropical fruits, people, bars, meat, sun, music and sea.
In it’s style guide, I wanted to incorporate warm colors as well, adding a more minimalist and modern style. The Lato font was chosen for its range of weights and readability.
Color Palette
Typography
Hi-fi Prototypes
The main objective of the application is to provide access to a variety of menus pre-assembled by the restaurant team. As we have already seen in the low fidelity prototypes, we followed a standard line of developing screens in which it was possible to complete an order in a sequential and logical way:
Item Selection and Customization: Users can select desired items from the restaurant menu and customize their choices, such as choosing quantity, adding special notes, or requesting extra ingredients or removals.
Adding to Bag: As users select items, they are added to the virtual shopping bag. Users can review their order, check the subtotal, add coupon and make adjustments if needed.
Payment method: Users need to select a payment method, which may include options such as credit card, debit card, cash or pix. They can also save payment information for future use. On this page they can still see the purchase total and edit the delivery address.
Order status: They receive a confirmation with the details of the order, including the estimated delivery time. The restaurant takes the order and starts preparing the food. A delivery person is assigned to pick up the order from the restaurant and deliver it to the specified address. In the application, he will have real-time access to the status of the order.
Next Steps
The screens developed, as previously mentioned, followed a line of development in which it was possible to complete an order in a sequential and logical way, but it is very basic compared to all the necessary mechanisms for the full functioning of an application, especially such a robust application, complex and full of variables like a shopping app.
The next steps consist of developing the login screens, refining button details, creating new screens where it is possible, for example, adding new credit card information and delivery address, screens with more options for customizing meals, search etc.
Conclusion
This was my first experience in the field of UX and UI design, and I gained valuable knowledge from this project. I understood the relevance of research and usability testing, and how crucial it is to understand that people have different ways of thinking and using tools to find affordable and effective solutions.
One of the main learnings was the importance of carrying out in-depth research. I understood the need to deeply understand the target audience and their needs, desires and preferences. This allowed me to develop more targeted and effective solutions focused on meeting user expectations.
Also, I learned the importance of usability testing. Carrying out tests with real users was essential to identify weaknesses and areas for improvement in the application’s design. User feedback provided valuable insights, allowing me to refine and improve the interface to make it more intuitive and user-friendly.
Another essential learning was the understanding that the user experience goes beyond the visual interface. Usability, information architecture and workflow efficiency play a crucial role in user satisfaction. This made me realize the importance of designing a fluid and intuitive experience where users can easily navigate the app and find the desired information and functionality effortlessly.
Finally, I learned to value simplicity in design. The clean, minimalist interface, along with a clear visual hierarchy, makes the app easy to understand and use. Reducing unnecessary elements and emphasizing usability and accessibility contribute to a more enjoyable and efficient experience for users.
Overall, developing this work on UX/UI Design for a restaurant app gave me a deep understanding of the importance of research, usability testing, user experience, and simplicity in design. These learnings are valuable and applicable in future projects, allowing me to create solutions that meet users’ needs and provide a satisfying and engaging experience.