Case Study: Creating a mobile and desktop site for the Rose Family Bakery
Role: Personas, UX Design, Information Architecture, Prototyping
The Problem
This assignment was focused on creating a website for a hypothetical client. I was provided with background information and client "must-haves."
Rose Family Bakery in Tempe, AZ, experienced significant growth since its start during the pandemic, thanks to Beebe Rose's passion for baking. Despite its growth, the bakery struggled with managing orders across multiple channels and faced slow foot traffic. The aim is to introduce an online platform to streamline order processes and enhance customer engagement. The solution seeks to address inefficient order management, the need for an online ordering system, and to foster a user-friendly experience for both browsing and buying, while integrating a baking blog to share the bakery's journey.
The Goals
The primary goal of the Rose Family Bakery website design is to create a desktop and mobile site with great overall user experience and streamlined operational processes and to drive online engagement, ultimately boosting sales and customer satisfaction. A design brief was part of this project that further stated the desired website pages and features.
Efficient Order Management: Create a user-friendly interface for easy browsing and ordering, including a convenient cart system.
User Engagement: Design a captivating home page with popular products and an engaging page to tell the bakery's story.
Search Functionality: Enable quick product searches for efficient user navigation.
Customer Subscription and Loyalty: Encourage subscriptions with discounts and offer account functionalities for a personalized experience.
Convenient Ordering Options: Allow scheduling of orders and provide a clear checkout process for pickup and delivery.
User Account Management: Offer a system for users to manage their profiles and transactions easily.
Seamless Blog Integration: Incorporate the bakery's blog into the website, maintaining its engaging format.
Responsive Design: Ensure the website is accessible and performs well on both mobile and desktop devices.
The Process
Personas & Empathy Maps
I created three distinct personas, each representing a unique user profile with specific goals, frustrations, and proficiency motivations. I also crafted empathy maps for each of the personas.
User Journey Map
A journey map using Nielsen’s Customer Journey Map Template was created for the Mother Miriam persona to better understand potential customers and how they might interact with Rose Bakery's website. The purpose was to visualize the major touchpoints a user like Miriam would have when visiting and using the website. It considers her motivations, questions, emotions, and barriers through each step of the process.
Conceptualizing Navigation
A navigation summary was created to conceptualize the navigation and flow of the site. This was further iterated by creating a sitemap. This sitemap was a laughing point for the final site design, and it changed due to the professor's feedback and refining my ideas.
Drafts & Prototypes
Wireframes
Given the timeline and resources for this school project, the wireframes were limited to low-fidelity, and there was no opportunity for iteration. However, they served their purpose in validating design direction and capturing core flows.
Desktop Homepage
Product Menu
Product Pages
Product Pages
Get A Quote
Check Out Flow
Mobile Wireframes
Mobile Wireframes
Mobile Wireframes
Lessons Learned & Next Steps
I created a design that is in line with the customer’s business goals and provides an outstanding user experience for their intended audience. Furthermore, I integrated customer suggestions into the design to achieve an easy-to-use and user-friendly website. The website is designed to attract repeat customers who appreciate the convenience of placing online orders quickly and easily.
This project provided valuable insights into the website design process, from initial goals and constraints to conceptual wireframes.
Key lessons learned include:
1. User Research is Critical - Creating personas and journey maps ensured the design catered to target users and addressed their goals and pain points. However, if I had the time, I would do in-depth user research before creating the personas. This phase is essential for aligning the solution with real user needs.
2. Iteration Drives Innovation – The initial sitemap and wireframes will evolve through testing and stakeholder feedback. Further iterations would refine the information architecture and UI design.
The next steps to carry this project forward include:
Conduct usability testing on prototypes to uncover issues.
Develop additional wireframe iterations based on feedback.
Explore opportunities for personalization and customization.
Create high-fidelity interactive prototypes for improved visualization.
Expand flows for complex tasks like custom orders.
Develop a style tile illustrating brand elements like color scheme, logo use, etc.
Compile a component library for UI elements to ensure consistency.