BJ’s Restaurants
Problem Statement
Off-premise dining experiences (such as take-out and delivery) fail to replicate the full restaurant dining experience.
Timeline
Apr - Oct 2022
Responsibilities
UX/UI, Product
Research, Presentations
Understanding the Problems
Methods: User interviews, surveys, competitive mapping, user journeys
BJ’s Restaurant’s customers enjoy a unique blend of a casual, welcoming atmosphere combined with high-quality dining options not typically found in such settings. However, this warm sense of community is lost in off-premise dining.
Customers want to replicate the restaurant dining experience at home
Restaurants have unique character that doesn’t translate to off-premise dining
Current State Audit
Methods: Design audit, user personas, user journeys, design heuristics
After identifying user needs and pain points, the discovery phase centered around auditing BJ’s desktop and mobile web experiences. Each persona was associated with a specific dining method – dine-in, takeout, and delivery.
Personas helped clarify the dissonance between guests’ expectations and experience
Insights and recommendations for category landing page (menu page)
Ravamping the Catering Journey
After analyzing the existing pages and flows, my team and I focused on different parts of the website. One of my main responsibilities was improving BJ’s catering flow, which is extensive and has slight nuances that differ from the main ordering flow.
Here are some high-level friction points that customers encounter immediately:
Catering Landing: 7 out of 8 CTAs lead to the same menu page
Catering Menu: Inconsistent info shown on cards; Ambiguous single cards with unclear options
"One of David's largest contributions was in reimagining BJ's catering flow. He took a complex and confusing experience and single-handedly streamlined the process, from discovery to wireframes and final design. It was one of the largest successes of the BJ's website redesign."
– Molly Erdmann, Design Lead
The challenges posed by a large menu were made worse by inconsistent ordering policies, complex customization options, and unclear naming conventions. Additionally, the discrepancies between catering and regular a la carte ordering flows were frequently overlooked, resulting in a confusing and frustrating experience for users.
Wireframes and low-fi prototypes used for rapid feedback and iteration
The new Catering page aimed to strike a better balance: guiding customers through the ordering process, providing concise information on different offerings, and enabling customization for both group bundles and individual orders.
Mini cart allows users to be sure what they’ve added and what to add next
Customizations are easily accessible without having to navigate away
The different catering options have varying requirements that can be challenging to keep track of.
On mobile, headers provide customers with a constant view of their order status and offer dropdown menus for quick access to editing options.
Outcomes
In just 6 months, our team successfully revamped the entire look and feel of BJ’s website to adapt to the evolving dining industry landscape. We prioritized key pages like the homepage, product page, and category page, while also improving other aspects such as the design system, in-cart edits, and BJ’s loyalty program. Visit the live site to order BJ's signature Pizookie!
Reflection
This project was one of the most comprehensive endeavors I've been involved in, and we achieved remarkable results. A big thank you to my design team for sharing valuable tips, tricks, and design practices, as well as teaching me how to effectively interact with clients. Our clients were equally fantastic, always open to feedback and collaboration.
Pat on the Back
Leading the Catering charge; Client presentations
Lessons Learned
Working closely with clients, product, and development teams
Outcomes
BJ's website is live!