Barro’s Pizza
Project Background
Barro’s Pizza is a family owned, Arizona local restaurant that has grown substantially over the past decade. As their business development continues to increase, they seek to update their current website and mobile application to better represent their brand identity, while staying relevant to current industry trends.
Users currently find the mobile application difficult to utilize for placing mobile orders and the website is primarily informational which negatively effects online ordering capabilities.
Problem statement
Project goal
Redesign the website and mobile application for Barro’s Pizza to create a seamless, engaging, and user-friendly digital experience that reflects the vibrant and high-quality brand of Barro's Pizza.
Key challenges
Maintain brand consistency
Ensuring the new design reflects Barro's Pizza's established brand identity while incorporating modern design elements.
Enhancing User Experience
Designing an intuitive and seamless user interface that simplifies navigation and the ordering process.
Expanding Functionality
Incorporating advanced features such as real-time order tracking, customizable options, and loyalty programs without overcomplicating the interface.
Mobile Optimization
Ensuring the website and app are fully responsive and perform well across all devices, including smartphones and tablets.
Ensuring Security and Compliance
Protecting customer data and ensuring the platform complies with relevant security standards and regulations.
Creating personas
The two personas created for this project highlight the gaps to be filled in the redesign. Each persona has specific features that would enhance their user experience and streamline the online ordering process.
Some key features that are important to our personas are:
Ability to save their favorite store
Ability to save their previous and favorite orders
Increased images to represent options
Real time ordering tracking
Wireframing & prototyping process
The wireframing and prototyping process is a crucial phase in the redesign of Barro's Pizza's website and mobile app. This process involves creating visual representations of the new design, allowing stakeholders to visualize the structure, layout, and functionality before development begins. It ensures that the final product meets user needs and business objectives through iterative feedback and refinement.
Research and Planning
Conduct user research through surveys, interviews, and usability testing on the current website and app.
Analyze competitors and industry trends to identify best practices and innovative features.
2. Initial Sketches and Conceptualization
Create rough sketches of key screens and layouts on paper or using digital tools.
Focus on high-level structure and flow without creating in depth details.
Explore different design directions and approaches for key features such as the homepage, menu, and ordering process.
3. Low-Fidelity Wireframes
Use wireframing tools such as Figma to create low-fidelity wireframes.
Focus on layout, navigation, and content placement without detailed design elements.
Map out key user flows, including browsing the menu, placing an order, and tracking an order.
Review wireframes with stakeholders and gather feedback to ensure alignment with project goals.
User journey map
With the two personas in mind, I conducted user research to identify their pain points and build an user journey map. The questions I needed answered were:
1. How many screens do users need to move through to complete their task?
2. How long does the user take to complete an order?
Iteration
Once the user journey map was completed, I decided to simplify and combine some screens to streamline the ordering process. One example of an iteration is instead of needing to press on an arrow icon to move to the ordering screen from the location selection screen, I made it automatically direct the user to the ordering screen once they confirmed the selected location is the one they would like to order from. I also created a sidebar menu where users could easily access secondary actions like editing their profile and viewing their reward points.
Final testing
Once the iterations of the need design changes were implemented, I conducted an unmoderated usability study to test the product before final launch. Refer to the image below of the unmoderated usability study which includes the introduction, research questions, KPI’s, methodology, participants, script and schedule.
Final product
In conclusion, the redesign streamlined the website and mobile ordering process, enhanced the overall user experience, simplified the amount of screens uses needed to navigate through to complete their task and tie in the brand identity.
Key features
Saved favorite location & addresses
Users can now save their favorite locations to pick up from and multiple addresses for delivery.
Saved favorite items
Users can save their favorite items to order and quickly add previous orders to their cart.
Added a rewards tab to the sidebar menu
There is a new rewards tab that has been added to the sidebar menu where users can easily access their rewards.
Success metrics
User satisfaction
Positive feedback and high ratings in the app store.
User adoption & retention
Number of orders placed through the website & mobile app.
Engagement
Measure the increase of orders post launch.