About the project

Duration
  • Aug-Sep 2020
My role
  • UX Designer
  • UI Designer
Team members
Tools
  • Pen and paper
  • Excel
  • Draw.io
  • Figma
Deliverables
  • Annotated wireframes
  • Style guide
  • QA reviews

Summary

Cabana is a Brazilian restaurant franchise that, during the pandemic, noticed the need to create its own application increasing notability and revenue by including customization and a loyalty program; therefore, reducing the dependability of third-party applications.

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 functionality.

Discover

— Content audit

How does the app work?

To understand exactly what flaws the application presented, we audited the entire application and created a report providing the key findings, competitor analysis, and recommendations that was shared with the client.

Content audit

Define

— USER FLOW & SITEMAP

How to navigate

Once the proposed recommendations were approved, we worked on the site map, noting every screen’s main functions. The main flows were:

Site map
— WIREFRAMES, PROTOTYPE & TESTING

Creating the design

For the next step, we sketched and discussed changes. We then created the lo-fi wireframe in Figma. Our biggest challenge was the loyalty program, which the client was still unclear about.

After a revision, we tweaked screens based on references, new ideas, as well as client’s suggestions. After the interactive prototype was finished, it was time for the most awaited part, the usability test!

Sketch + Lo-Fi wireframe
— USABILITY TESTING

But what do our users think?

We selected some users who had previous experience using delivery applications to test the flow of the new functions.

At first, we just tested navigating through the application and noticing the user's impressions without a defined goal; however, it failed due to the lack of goal. We then ran the tests with a list of tasks and success criteria according to the doubts we had regarding the layout and flow.

There were 4 tests in total with very interesting 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 it/them for the next update. Some of the changes according to the insights:

1. Most users did not find it important to put a name on the card since most have only one card.

Solution: Placed the card name field as an option at the end of the form.

2. All users had doubts about the option of a single or double burger.

Solution: Better specified what it meant below the title.

3. Users liked the favourites feature, but would rather have “order again” instead of “order”.

Solution: Changed the button.

4. Users didn't think it was important to see the bag all the time or at least have a small icon that won't get in the way.

Solution: Inserted a full bag icon at the bottom of the navigation bar.

5. The menu display mode button is confusing, and looks like a filter.

Solution: Changed button format.

6. Users did not understand the list of benefits by category.

Solution: Inserted more information about benefits to the description.

1. Most users did not find it important to put a name on the card since most have only one card.

Solution: Placed the card name field as an option at the end of the form.

1. Most users did not find it important to put a name on the card since most have only one card.

Solution: Placed the card name field as an option at the end of the form.

1. Most users did not find it important to put a name on the card since most have only one card.

Solution: Placed the card name field as an option at the end of the form.

Production

— ANNOTATED WIREFRAMES

Almost at the end of the project!

After reviewing the entire document, and creating all dialog boxes and error messages, we documented all application’s screens and added details to each function to better guide the developers.

— STYLE GUIDE

Applying interface design

We also created a style guide with the best practices for user interface (UI) design, providing a more consistent and clean design in line with the branding.

Style Guide
Wireframe annotations

— REVIEW

Is it working?

A few weeks later, the developers sent us the application under development for some Quality Assurance (QA) sessions, where we audited and evaluated the entire application and made notes on improvements separated by functionality and interface, highlighting the priority of each of the listed points.

QA Review presentation

Conclusion

Though the project was delivered later than expected, it has successfully launched and has hundreds of active users. Additionally, the loyalty program proved to be a success among Cabana’s customers.

This project provided a lot of learning opportunities, especially with the usability test; we managed to find incredible insights to improve usability with just a few user testers.

You can find the app on the apple store.