Porto's Bakery Mobile App

Role: UX/UI Designer
‍Span: 4 weeks
‍Tools: Figma

‍Skills:

  • User research
  • Wireframing
  • Prototyping
  • Usability testing
  • A/B Testing

Project Overview

With six ceaselessly busy locations in the Los Angeles area, Porto’s Bakery currently does not have a mobile app. This case study is a concept for a mobile app for placing and picking up orders at Porto’s.

Problem

Porto’s Bakery currently does not have a mobile app, leading to missed opportunities to provide convenience and personalized services to their customers. 

‍How can I create an intuitive and user-friendly navigation system that allows customers to easily browse Porto's Bakery's extensive menu?

Solution

A mobile application that allows customers to browse through Porto’s Bakery’s menu, as well as place and pick-up mobile orders. Key features include a clear call-to-action button to simplify the process of starting an order, a categorized menu with a search and filtering function, and an informative banner for the details of a pickup order.

Research

Through user interviews and surveys, I identified the following pain points and opportunities to be addressed in the design of a Porto’s mobile app:

Competitive Analysis

User Flow

Low-Fidelity Wireframes

To figure out the layouts for each screen, I created low-fidelity wireframes. Using feedback from several peers, I then made iterations and changes to certain features according to their feedback.

Key Features

Scheduling an Order

A call-to-action button at the bottom of the screen simplifies the process of placing an order by giving the users a clear idea of where to start.

View Prototype

Selecting an Item from the Menu

Categorizing the menu to follow the three main item groups displayed on the Porto’s website menu will maintain consistency. Including a search functionality with filtering options will allow users to quickly find what they are looking for.

Checkout & Pickup Details

A banner at the top will give users the option to be able to edit the details of their pickup, including the specific store location and pickup time.

Final Screens

Reflection

As a bakery enthusiast, I thoroughly enjoyed working on this case study. The first time I entered a Porto's Bakery, I was shocked to notice how much variety they had on their menu, as well as the incredibly long line to be able to place an order. During the design process of this case study, I found myself thinking about all the potential ideas and features that could be implemented in a mobile app to make the checkout and pick-up process at Porto's as convenient as possible.

One of the challenges I encountered working on this project was trying my best to stay within the Porto's Bakery branding guidelines. Being able to take and improve certain elements from their website proved to be helpful, and I enjoyed the challenge of adapting my design to fit their branding and style as best as possible.
‍
If I had more time, I would also design a mobile system for their "Bake-at-home" menu. This would be a great opportunity to address another target user group of consumers who might not be able to access a physical Porto's Bakery location, but want to try out their menu items.