Lord and Villa Bakery Case Study
Research + Discovery | Define | Ideation + Strategy | Prototype | Test | Iterate
Role: Lead UX+UI Designer (Research, Interaction Design, Visual Design)
Client: Lord and Villa Bakery
Timeline: 80 Hours Over 4 Weeks
Client: Lord and Villa Bakery
Timeline: 80 Hours Over 4 Weeks
The Challenge
The main scope of this project is to research and redesign bakery's website, by focusing on a responsive web design, expanding the website’s content functionality and customer journey.
The Outcome
An all-new responsive website design which makes it easier for customers to find information, contact the bakery to place orders, book an appointment online to meet with a cake specialist, and order online to pick up later.
Research + Discovery
Tools Used: Secondary Research: Customer Reviews and Competitive Analysis, Provisional Personas, Primary research: One on One Interviews and Contextual Inquiry
Background
Lord and Villa bakery is a pastry shop located in Glendale, California. They offer European, Armenian and Persian pastries and baked goods. Initially, Lord Bakery established its business on Villa Street, in Tehran, Iran, in 1964. But, they moved to the United States after the revolution.
Today, most people are coming to Lord not only for the quality of the pastries but the whiff of nostalgia. However, the shop is highly recommended and loved by locals as well. Besides nostalgic pastries and traditional desserts, Lord and Villa also offers custom made and special occasion cakes and desserts. The bakery has an old traditional feel to it and currently, the website displays basic information only. The stakeholders want to freshen up their website and add more features such as online orders, appointment bookings and all the services and goods they offer.
Today, most people are coming to Lord not only for the quality of the pastries but the whiff of nostalgia. However, the shop is highly recommended and loved by locals as well. Besides nostalgic pastries and traditional desserts, Lord and Villa also offers custom made and special occasion cakes and desserts. The bakery has an old traditional feel to it and currently, the website displays basic information only. The stakeholders want to freshen up their website and add more features such as online orders, appointment bookings and all the services and goods they offer.
Customer Reviews
Lord and Villa bakery's overall customer reviews are 4.0 out of 5.0 according to Google Reviews, Yelp, and Harsanik.com. However, some of the negative reviews reflect on lack of customer service. Quality of the process is as important if not more important than the quality of the product.
|
Lianne K. Simi Valley, CA - Yelp Review (Short Version)
The decor looked light and airy, if a bit dated. Several cash register stations were handled by two employees. We weren't really greeted when we came in, nor offered help. Staff members were moving around behind the scenes, and I felt like other patrons knew the routine of how to get help in the shop, while we were left in the dark. |
Competitive Analysis
I reviewed websites of other bakeries and their customer reviews to identify the strengths and weaknesses of competitors in town, as well as considering indirect competitors like party planning companies such as Fancy That!, to get a more specific sense of what the local competition is like.
Provisional Personas
I based each persona around behavioral patterns guided by my secondary research. I created provisional personas to begin thinking about who might make up Lord and Villa Bakery's customer base. These rough sketch personas helped bring focus to my interviews and contextual inquiry questions and allowed me to have a starting point for testing my hypotheses and assumptions regarding the goals, needs and frustrations of users.
One on One Interviews and Contextual Inquiry
I interviewed seven people, of which five were one on one interviews, and two contextual inquiry (one customer and one Lord employee). Based on my secondary research, I developed a list of questions and an interview guide to structure my interviews and contextual inquiry. During one on one interviews I asked people about their experiences with Lord and Villa Bakery, other local bakeries in town, and bakery special orders. I went to Lord and Villa Bakery on a Tuesday afternoon, and opened up a conversation with people and persuaded them to talk to me for few minutes, while observing them and taking notes. You can find my interview guide here.
|
"You can taste the quality in Lords pastries... I haven’t ordered any custom cakes from Lord yet, I know the cake will taste good but I a am not sure how they will make the details. I have never seen their cake work before. I don’t think they have Instagram!"
|
"The apricot pie is always fresh... I love their Napoleons and Roulettes."
|
"I like that I get the same taste and quality every time I shop from Lord... but, I have never ordered a custom made cake from Lord."
|
Synthesis + Defining
Tools Used: Empathy Map, Primary Persona, POV + HMW Statements, Brainstorming
Research Synthesis
Guided by my interviews and contextual inquiries, I then created an empathy map to synthesize the information gathered during my research. I looked for similarities, patterns, and contrasts in order to uncover insights from my observations and move towards identifying potential user needs.
KEY INSIGHTS
Lord and Villa's products quality and taste represents an expansive piece of their image and is key to their customers' Loyalty. Their fresh, quality pastries, clean condition, specificity of their baked goods, and assortment of items attract individuals to the pastry kitchen. This was the main reason why customers valued this particular bakery over others. Several participants emphasized having social media specially Instagram, will help them get updated, and stay connected with Lord and Villa Bakery.
The needs of the primary user persona that emerged from my research were somewhat anticipated. Anita cares most about feeding her family all the good food she’s had when growing up, she also needs to save time and shop from a clean store with friendly staff, with reasonable pricing.
The needs of the primary user persona that emerged from my research were somewhat anticipated. Anita cares most about feeding her family all the good food she’s had when growing up, she also needs to save time and shop from a clean store with friendly staff, with reasonable pricing.
Defining the Design Problem
After establishing my primary persona, I moved into translating the insights and needs of Anita into defined Point of View statements, then crafting a set of "How Might We" questions to guide my design.
Brainstorming + Ideation
I posted sticky notes of my HMW questions on the wall, then generated as many ideas as possible. I grouped them by theme and relationship and then came up with solutions for each specific problem, in this case by gathering a list of ideas for HMW questions.
I wanted to generate lots of ideas quickly, in order to create many options which I could then review, sort out, and refine.
I wanted to generate lots of ideas quickly, in order to create many options which I could then review, sort out, and refine.
Project Strategy
Tools Used: Project Goals Mapping, Product Roadmap, Site Map
Comparing Business and User Goals
Moving into the next stage of defining the product, I mapped the overlaps of business goals, user goals, and technical considerations. I combined Lord and Villas's business priority and goals with data from Anita's goals and my primary research to articulate the use-business goals in the diagram.
With the project goals in focus, I created a product roadmap, with features presented in order of priority in terms of development, investment, and importance to business and user goals. Anita's needs and priorities were used to focus the exercise. The roadmap includes proposed metrics for measurement so that the impact and effectiveness of the features can be analyzed.
Sitemap
Informed by the features and priorities outlined in my product roadmap, I created a site map showing the information architecture organized based on the hierarchy of content, proposed for the new Lord and Villa's site.
Interaction Design
Tools Used: User Task and User Flow Maps, Sketching, Mid Fidelity Wireframe, Prototype with InVision
User Task and User Flow Maps
With the site map in place, I moved towards prototyping. I created a user flow based on some simple use cases for Anita. In this diagram, Anita moves through two tasks: book an appointment online to meet with a cake specialist, and order some fresh pastries online. Mapping out the user's journey from start to completion helped me think through each step of the process and experience to make sure the organization of the pages flowed in a logical, smooth way.
Referencing my site map and product roadmap, I created a detailed list of interface elements for pages within the user flows I'd established. This UI requirements document allows stakeholders to assess and weight in on details of the site before they're implemented, and it served as a checklist for me as I began wireframing. You can view the UI requirements list here.
Sketching and Mid Fidelity Wireframe
I sketched low fidelity wireframes corresponding to the user flows I'd mapped out. I referenced the UI requirements and site map to make sure I included priority elements for each page, and conducted a brief search for design patterns to reference as well.
Working from my lo-fi wireframes, I began working in Sketch to create a set of mid-fidelity responsive screens. This set of wireframes shows the site pages that a user would encounter as they progress from the home page towards booking an appointment and ordering fresh pastries online. These frames were developed with the goal of quickly translating them into a prototype, so that I could begin testing my design early in the process.
|
|
Mid-Fidelity Prototype with InVision
With the key frames of the user flow designed, I brought my wireframe screens into InVision and created a mid-fidelity prototype to share with users. I was eager to see how participants would perform their tasks.
Here is the link for this prototype. https://bit.ly/2LqPYrG
Usability Test
Tools Used: Testing Plan and Script, Affinity Map
I developed a usability testing plan to outline my test objectives, goals and procedures. You can see the full plan here. Due to time constraints, testing was kept to 4 people. I asked participants to click through the prototype with the goal of completing two tasks according to the scenarios I provided, and I observed and took notes as they navigated the site.
Priority Tasks: Navigate the site and place purchase 2 lbs of Vanilla Roulette to pick up later in the evening, also book an appointment to meet with a cake specialist to consult about a custom made cake.
Completing the tasks were rather easy, with no major issues. However, participants were confused where they had to pick a date and time for booking an appointment section. Also, at checkout, the option to continue as guest was hard to find for almost all of the participants.
Priority Tasks: Navigate the site and place purchase 2 lbs of Vanilla Roulette to pick up later in the evening, also book an appointment to meet with a cake specialist to consult about a custom made cake.
Completing the tasks were rather easy, with no major issues. However, participants were confused where they had to pick a date and time for booking an appointment section. Also, at checkout, the option to continue as guest was hard to find for almost all of the participants.
Insights + Recommendations
Drawing from the usability test results, I noted my observations and data on (virtual) sticky notes, then organized them according to patterns and trends. I then created an affinity map as a way of interpreting and prioritizing my findings.
Revising book an appointment page form and continue as guest button's location, and legibility of the body paragraphs were at the top of the list from my insights. The goal was to selecting the days and times for booking and appointment section less confusing, making continue as guest option more visible and body paragraphs legible.
Revising book an appointment page form and continue as guest button's location, and legibility of the body paragraphs were at the top of the list from my insights. The goal was to selecting the days and times for booking and appointment section less confusing, making continue as guest option more visible and body paragraphs legible.
UI Design + Iteration
Tools Used: Mood-board, Style-tile, High-Fidelity Responsive Wireframes, UI Kit
Visual Direction
The bakery has a reputation for its traditional pastries and vibe; Since stakeholders wanted to freshen up their site, I looked for ways to expand upon it. I first created a list of attributes to help me articulate the brand, and I developed a mood-board around them:
I then refined and developed the direction for the visual design, creating a Brand Logo and style-tile to show how the color palette, typefaces, branding, icons and imagery would be applied across the design of the new site. The new logo is inspired by the old version however, the rectangular frame around the word-mark gives it a fresh, modern look.
High-Fidelity Responsive Wireframes
From the affinity map I reviewed the recommended revisions, then moved forward with developing a revised set of high-fidelity responsive wireframes. These show how the visual design will be applied to the site and reflect changes made to site navigation. I rearranged the form for booking an appointment, made single drop-down menu for days and time, also made the sign in page much simpler by removing few unnecessary options. I then changed the weight of the body paragraphs to make it legible.
High-Fidelity Wireframes for Desktop
|
High-Fidelity Wireframes for Tablet |
High-Fidelity Wireframes for Mobile |
|
|
UI Kit
Finally, I created a UI Kit to serve as a reference and resource guide for anyone working on the site. Maintaining this guide will help to ensure the consistency of styles and elements used across the site. You can see the UI Kit here.
Project Takeaways
This project was challenging in ways I didn't expect. Anita and other customers would love the option to have pastries delivered to them; In order to save time, however, when combined with the constraints of the business, I found that delivery option will not be feasible at this time. On the other hand, customers seemed unsure weather Lord and Villa can make their custom cakes. We had to make sure to offer them an appointment booking option on the site, display beautifully captured photos of their cakes and offer them discounts, as well as activating social media links on the site and latest Instagram feed in the footer to encourage customers ordering custom cakes from Lord and Villa Bakery.
Next Steps
With more time, I'd like to add more items and images to the website, iterate, and possibly perform another round of usability test with high fidelity wireframes, to see if the modifications we made after usability testing were effective. Designing for the user experience has a lot more to it than making a product usable. Usability test and users feedback helps the designer to accomplish users’ goals.
"You cannot understand good design if you do not understand people; design is made for people."
-Dieter Rams
-Dieter Rams