🍔 Freddy's | E-commerce Web & Mobile App (B2C)

Ary Mega

Mobile Designer
User Researcher
Product Designer
Figma
Jira
Slack

📜 Overview

The company: Freddy's Frozen Custard & Steakburgers
My role: Contract Senior Product Designer, leading a team of two product designers
The goal: Modernize Freddy's online presence, improve the online ordering experience, and drive customer engagement through their website and mobile app

🧗‍♂️ The challenge

Context: Freddy's existing website was outdated and lacked online ordering capabilities. Their mobile app was also in need of a refresh to align with their updated branding and attract a younger demographic.
Constraints: The redesign needed to integrate with their existing POS system and maintain brand consistency while appealing to a wider audience.
User needs: Users needed a seamless and intuitive online ordering experience across all platforms, with easy navigation, clear information, and enticing visuals.
Screenshot of old home page
Screenshot of old home page

💡 The solution

Approach: A user-centered design approach was adopted, focusing on creating a consistent brand experience across the website and mobile app with a strong emphasis on visual appeal and ease of use.
Key features:
Website: Developed a modern, responsive website with online ordering capabilities, integrated with their existing POS system. Improved information architecture and implemented high-quality food photography.
Mobile app: Redesigned the app with a focus on user experience, featuring a streamlined ordering flow, personalized recommendations, and a loyalty program with rewards and exclusive offers.
Online ordering: Optimized the online ordering flow across both platforms, simplifying the process and minimizing friction points. Introduced features like order customization, group ordering, and saved preferences.

🧩 The process

Research: Conducted user interviews, surveys, and competitive analysis to understand user needs, preferences, and pain points in the online ordering process.
Ideation and iteration: Developed user flows, wireframes, and prototypes to explore different design solutions and gather feedback from stakeholders and users.
Testing and validation: Conducted usability testing throughout the design process to identify areas for improvement and ensure a seamless user experience. A/B testing was used to optimize conversion rates and engagement. Collaboration: Worked closely with cross-functional teams, including marketing, engineering, and operations, to ensure a successful launch and ongoing optimization of the digital platforms.
User flow's primary fork-in-the-road: are users interested in rewards?
User flow's primary fork-in-the-road: are users interested in rewards?
Simplified version of the end-to-end user flow
Simplified version of the end-to-end user flow
Initial sitemap for Freddy's end-to-end user flow
Initial sitemap for Freddy's end-to-end user flow
Screenshot of wireframes
Screenshot of wireframes
Wireframes of the order flow on the mobile app, using geolocation for orders ready for pick-up
Wireframes of the order flow on the mobile app, using geolocation for orders ready for pick-up

🎖️ The results

Quantifiable outcomes:
23% increase in online orders within the first quarter of launch.
11% rise in average order value attributed to improved upselling and cross-selling features in the online ordering flow.
4.8 star average app store rating with a 20% increase in positive user reviews.
21% increase in loyalty program sign-ups and a 13% increase in repeat customers through the app.
8% reduction in website bounce rate and a 5% increase in average session duration.
Qualitative outcomes:
Positive user feedback on the improved online ordering experience, particularly regarding ease of use and customization options.
Increased brand awareness and positive brand perception among target demographics, specifically millennials and Gen Z.
Screenshot of the new, and improved home page
Screenshot of the new, and improved home page
Screenshot of the locations feature
Screenshot of the locations feature
Screenshot of the menu page
Screenshot of the menu page
Screenshot of common error state on product pages
Screenshot of common error state on product pages
Implemented an auto-scroll to required fields after an A/B test that resulted in a 61% rage-click, to help navigate the user to make a selection(s) in order to proceed
Video of the redesigned mobile app

✨ In conclusion

The "Customize & Save" feature within the redesigned mobile app exemplifies a 0 to 1 design process. This feature was created to address user needs for personalization and order efficiency, aiming to increase app engagement and repeat orders.

Here's how it demonstrates 0 to 1 design:

Identifying the need: Through user research, we discovered that customers often ordered the same customized items repeatedly. However, the existing app lacked a way to save these preferences, forcing users to manually customize their orders each time. This led to frustration and increased order time.
Ideation and conceptualization: To address this, we conceived the "Customize & Save" feature. This involved brainstorming how users could easily customize their favorite menu items (burgers, custard creations, etc.) and save these preferences for future orders. We explored options like:
Step-by-step customization flow: Allowing users to select each ingredient and option with clear visuals and descriptions.
"Build Your Own" interface: Providing a drag-and-drop interface for users to visually create their meals.
Pre-set templates: Offering popular customization combinations as starting points for users to modify.
Prototyping and testing: We developed prototypes of different approaches and conducted usability testing to determine the most intuitive and efficient method. We found that a step-by-step customization flow with clear visuals and the ability to name and save customized creations resonated best with users.
Implementation and iteration: We designed the final "Customize & Save" feature, incorporating user feedback and iterating on the design based on testing results. This involved collaborating with developers to integrate the feature into the app's ordering flow and back-end systems for storing user preferences.
Outcome: The "Customize & Save" feature successfully addressed the initial user need by providing a convenient way to personalize and save orders. This led to increased app engagement, faster ordering times, and higher customer satisfaction, ultimately contributing to increased sales and customer loyalty.

Mentoring two product designers

During the Freddy's website redesign, I mentored two product designers (Alex and Benjamin), to help them develop their skills and contribute effectively to the project.
Here's how the mentorship unfolded:
Guidance and support: I provided guidance on user research methodologies, helping Alex and Ben conduct user interviews and analyze data to understand customer needs and pain points. I also offered support in information architecture and navigation design, helping them create a user-friendly website structure.
Skill development: I facilitated workshops on wireframing and prototyping, teaching Alex and Ben how to effectively translate user needs into interactive design solutions. I also provided feedback on their designs, helping them improve their visual communication and interaction design skills.
Collaboration and feedback: I encouraged collaboration between Alex and Ben, fostering a supportive learning environment where they could share ideas and learn from each other. I also provided regular feedback on their progress, highlighting their strengths and areas for improvement.
Empowerment and ownership: I gradually empowered Alex and Ben to take ownership of specific design tasks, allowing them to apply their skills and contribute meaningfully to the project. This included designing individual pages, creating interactive elements, and conducting user testing sessions.
Outcome: Through consistent mentorship and support, Alex and Ben significantly developed their design skills and confidence. They contributed valuable insights and design solutions to the Freddy's website redesign, playing a key role in the project's success. This experience also fostered their professional growth and prepared them for future design challenges.
Partner With Ary
View Services

More Projects by Ary