Challenge
Many patrons, including busy professionals and college students, face weekday time constraints when visiting Pistacia Vera. Some wish to organize group orders, while individuals with food allergies struggle to identify safe menu options. Additionally, those with physical disabilities encounter obstacles related to building access.
Duration March 2023 - June 2023
My Role UX Designer & Researcher
My Responsibilities User Research, Usability Testing, Wireframing, Mockups, Prototyping
Objectives
-Streamline the pre-ordering process to cater to busy professionals and students
-Incorporate clear allergen identifiers in the app to assist customers with dietary restrictions
-Enhance overall accessibility and convenience for all patrons.
Target Audience
- Busy professionals & students
- People who place group orders for 3 or more people
- Patrons with food allergies/ dietary restrictions
Pistacia Vera, a renowned cafe and pastry kitchen in Columbus, Ohio, is admired for its freshly baked traditional French pastries, particularly its macarons, which draw substantial crowds. As a frequent patron who often visits with family, I identified specific areas within the ordering process and overall accessibility that could use improvement. Columbus is a rapidly growing city which is home to a diverse demographic, including college students, busy professionals, and families, all of whom could benefit from improved accessibility and a more seamless ordering experience.
Tools Used Figma, Photoshop, Google Slides/ Sheets
PROJECT OVERVIEW
vera
pistacia
vera
UNDERSTANDING THE USER
Group Order Payment
Food Allergies
Lengthy Wait Times
My goal was to recognize aspects of Victoria’s journey that I could improve like the timeliness and ease of placing a group order. It was important to me to also consider the accessibility of this process.
USER PERSONA & JOURNEY MAP
COMPETITIVE AUDIT
I compared the pre-ordering experience of 3 competitors, 2 direct and 1 indirect. I looked at things such as their unique features, navigation, user flow, accessibility, etc. After determining the competitors' strengths and weaknesses, I was able to recognize any gaps and what opportunities were there for Pistacia Vera to excel.
Research lays essential foundations for creating solutions in later stages. To ensure my research stays on track, I created a research plan outlining my goals, methodologies, and key performance indicators before diving into the research phase. Through engaging with customers and identifying their concerns, I embarked on my journey, with the goal of creating an app with the focus of addressing the most prevalent pain points revealed during my research.
Competitor Strengths
- Easy ordering process in-app
- Consistent quality beverages and food items
- Rewards program with a range of incentives
- Featuring nutritional information and full ingredient lists for each menu item
- Strong brand identity that carries through their online presence and atmosphere in-store
- Excellent customer service
Competitor Weaknesses
- No accessibility features in the app
- No other language options beside English
- No option for delivery
- Direct competitor has no app
- Direct competitor's pre-order is only reserved for $50 minimum with a 2 day notice
- Direct competitor's website does not have any accessibility features
- Direct competitor has no nutrition or allergy information for menu items
Gaps
- Some competitor products don’t include accessibility features
- Competitor products don’t offer other language settings beside English
- There are no options for delivery
- Some competitors don’t offer a rewards program
Opportunities
- Include a rewards program to encourage customers to return
- Offer accessibility features such as screen reader assistance and voice assistive technology
- Offer curbside options for pickup
- Include nutrition and allergy information
Goal Statement: My mobile ordering app will let users order food and drinks ahead of arriving at the cafe which will affect busy professionals and students by allowing them to set a time to pickup their order so they don't have to wait in line.
I will measure effectiveness by timing how long it takes for users to complete their order in the app.
Tracking Group Orders
Users need a place to keep multiple orders that will be organized as not to lose or mix up orders
Customers with food allergies need to know if food items are free of certain allergens
Users would benefit from being provided time estimates on their orders to eliminate waiting in long lines
It's inconvenient for the person organizing the group order to remind each person to send their payment
THE DESIGN PROCESS
PAPER WIREFRAMES
Following establishing a user persona, journey map, and competitive audit, I used these insights to inspire my ideation phase. I then formulated a clear goal statement, setting the foundation for my project. Afterward, I outlined the user flow, and crafted both big picture and close-up storyboards before diving into the wireframing stage. This comprehensive approach ensures a user-centered design process from start to finish.
I initiated the wireframing phase by writing out the user flow. Next, I wrote each feature of the three key frames and began sketching five variations of each step of the user flow keeping in mind hierarchy and gestalt principles. After selecting my favorite elements from each, I integrated them into refined wireframes. These refined versions were then condensed to create the final interface design.
LOW & HIGH FIDELITY DIGITAL WIREFRAMES
Home First 5
Refined 1
Refined 2
Final Selection
Menu First 5
Final Selection
While creating my digital wireframes I prioritized demonstrating key design principles while aligning my design with user research.
USABILITY TESTING & INSIGHTS
All users felt the ordering process was quick and easy
Users wanted a way to see the number of items in their cart without going to checkout
Users wanted a way to select an option for group orders and split payments in the beginning of their flow
All users enjoyed the layout and navigated the app easily
Users spent about 2 minutes placing their order
Users want to be sent back to checkout after saving an edited item
Usability Testing Findings - Round 1
Usability Testing Findings - Round 2
My first round of usability testing helped guide my design from wireframes to mockups.
My second round of usability testing used a high fidelity prototype and revealed what aspect of my mockups needed refining.
MOCKUP ITERATIONS
I added a checkout bag to the top right corner of the screen for users to see an updated number of how many items are saved in their cart without going to checkout.
Button blocks were added to clearly indicate to users where to tap to make a selection while also bringing more balance to the overall design of the checkout screen.
DESIGN SYSTEM & HIGH FIDELITY PROTOTYPE
I kept a sticker sheet throughout my process of creating my mockups to keep consistency throughout my design. My first goal was to create a color palette that represented the company in a modern way while making sure the colors were accessible for people who may be color blind. I incorporated pistachio green for a pop of color as well as a pistachio print background for more visual interest.
I found that creating a solution for busy customers and guests that need to place group orders improved the overall experience for everyone. While I kept in mind accessibility factors within the UI aspect such as high contrast ratios between background colors and text and , I'd like to continue exploring accessibility features I can incorporate into the app so it's more inclusive.
TAKEAWAYS & NEXT STEPS