Cabana Burger
Delivering the classic burger with high-quality and fresh ingredients.
Cabana is a chain of restaurants in Brazil that, during the pandemic, noticed the need to have their own app due to the amount of problem with third-part applications and the opportunity to increase prominence, customization and to increase revenue.
Details
My Role: UX Designer
Tools: Pencil and paper, Figma, Draw.io, Excel
Duration: 4 weeks (Aug. - Sep/2020)
Team: Thaís Schilipack UX/UI Designer
What you will see?
The problem
The solution
The process
Discovery | User flow | Sitemap | Draft & Lo-fi wireframe | prototype | Usability test | Annotated wireframes
To conclude
1. The problem
The product was initially created by an agency; however, Cabana was not satisfied with the results as the prototype lacked a clear structure, consistency, usability and had functionality issues.
2. The solution
With a background of working and managing delivery in a chain of restaurants, Thaís and I proposed to redesign and deliver an annotated wireframe with a solid and functional structure within 16 days.
3. The process
Discovery
The first step was to understand what had already been done and the needs that the client had pointed out. With that in mind, each of us did an individual evaluation mapping out all the screens’ content previously created with improvement suggestions.
Content Audit
Later, Thais combined all the information into a spreadsheet and adding comments from Cabana during the meeting and crossing the same and different ideas.
User flow & journey
After studying some references from competitors, we defined the main flows, design an initial sitemap and documented all the details on what to expect from each screen.
Main flows defined in this phase:
Registration and onboarding
Order
Loyalty program
Password recovery
All of this was part of the first delivery, where we held a meeting with the client and after we made some changes based on the feedback received.
Client’s Feedback:
Insert option to customize ingredients within the product
Insert delivery time at some point in the order
Change loyalty program onboarding
Leave the user free to choose the store for take-out
Draft & Lo-fi wireframe
With the feedback, I started sketching what would be the screens of this application and I passed it to Figma to start with the wireframe.
We worked together, following the updated flow and the draft done earlier.
This was the second presentation for the client, where she can better see how the final application would look.
Some suggestions were made, but where we had more changes was in the loyalty program that was still confusing.
Hi-fi wireframe & Prototype
All wireframes were revised and changed according to the suggestions and new ideas or references that emerged.
In the end, we made a prototype to present the defined main flows to the client.
The third delivery for our client was a prototype. While they were analyzing the wireframe, we started testing the prototype with users.
Usability test
We selected some users who had experience with other delivery applications to test the functions.
Firstly, test without a defined goal, just navigating through the application and noticing the user's impressions; however, it failed as the user didn’t have a clear goal. We then ran the tests with a list of tasks and success criteria as follows:
So we stopped and defined some tasks according to the doubts we had regarding the layout and flow.
There were 4 tests in total, with fascinating results. We listed all the insights gathered and defined which changes carried more weight in the user experience), which required the client’s approval, and which would require more time to develop, leaving for the next update.
Some of the changes made according to the insights:
1. Most users did not find it important to put a name on the card since most have only one.
Solution: place the card name field as an option at the end of the form.
3. Favorites: they liked the idea, but would exchange "order" for “order again”.
Solution: Change button.
4. They didn't think it was important to see the bag all the time, at most a small icon that won't get in the way.
Solution: insert a full bag icon in the bottom navigation bar.
6. Menu display mode button is confused, looks like a filter
Solution: change button format.
2. Everyone had doubts about the choice of a single or double burger.
Solution: specify better what it means below the title.
5. They didn't understand how loyalty points work
Solution: change the panel to be clearer and change the nomenclature of the points.
7. They did not understand the list of benefits by category.
Solution: insert more information about benefits in the description of the categories.
Annotated wireframes
After reviewing the entire document, creating all dialogue boxes and error messages, we created a document with all the application’s screens and numbered the functions with explanations for the developers.
Annotated wireframes made to explain the functionalities of each part of the screens.
Design review and Style Guide
After Cabana’s internal designer created the layout, we reviewed and adapted it following the best UI practices. However, we realized we needed to create separate documentation to allow for more consistency between elements and layout created, such as button states and forms that were missed by the designer and also to facilitate the application’s development.
4. To conclude
And now you can see the final product here!
The project was handed off and is under development with a 2021 launch schedule. We still review and ran tests with the developing product.
While we were unable to deliver the project within the 16 days agreed upon, we required an extra for the annotated wireframe and another week for the design review and style guide.
This fast project taught me that even being able to deliver a great job in a short amount of time; having time to think, discuss, test and document is very important to create a great product. It also showed me how precious my time is and I feel a better UX after this project working with Thaís.