Screenshots of the final Bocadi app design

About the project

Bocadi is a concept project done as part of the Google UX Design Certificate.

The problem

A movie theater experiences long lines at its sandwich shop during peak hours, frustrating its customers and creating a bad experience.

The goal

Design a remote sandwich ordering app that makes ordering easy and efficient, improving customer experience and improving workflow.

Final designs

Screenshots of the login and registration page Screenshots of the shop related pages Screenshots of the checkout process Screenshots of the cart, orders and account page

Understanding the user

Foundational research was done to understand the challenges people are facing when ordering food at a restaurant or the movie theater and their shopping habits. Once the end-user's needs have been defined the next step was to align them with the business objectives.

This has been done through interviews, with the objective of identifying the pain points.

A representative sample of regular and occasional moviegoers, different ages and backgrounds was used.

Empathy map

Image of the final empathy map

Pain points

Long wait times

Long lines are forming at peak hours and on premiere days, causing customers to miss part of the movie or stop purchasing altogether. The app should focus on reducing wait time by improving process flow.

Lack of a personalized customer experience

Customers expect a tailored experience. The app should provide a personalized experience to each customer through messaging, offers, recommendations and other features.

Customer service

Below par customer service leaves a negative impression on customers. The app should help both the customer and the service with improved workflow and communication.

Lack of options

Unavailable vegan and gluten-free options leave some customers unable to order. The design needs to feature clear vegan and gluten-free options and a way for people to visualize the ingredients.

User persona

Two personas were created in order to have a better representation of the end-users.

Image of the first persona. Image of the second persona.

User Journey Map

A journey map was developed to identify potential opportunities.

Image of the user journey map.

Starting the design

User flow

A potential main user flow was created to establish the core pages.

Image of the user flow.

Information architecture and sitemap

A sitemap was defined to have a visual representation of the organization of the content.

Image of the sitemap.

Wireframes

Initial wireframes were created on paper and then digitalized on Figma.

Image of the wireframes.

Design system

Image of the design system.

Bocadi

Bocadi is a food ordering app, designed to reduce queues and improve customer experience.

What I did

  • Branding
  • UX Research
  • Wireframing
  • UI Design
  • Prototyping
View design on Figma