Park Street Pastry
A Responsive Website
Project Overview
Background
Park Street Pastry opened in Spring 2018 in Olathe, Kansas. Doug Flick, the owner and professional pastry chef for thirty years, creates daily treats as well as specialty order cakes for any occasion. The pastry shop offers a full breakfast and lunch menu, as well as coffee drinks. Park Street’s online presence is limited to social media; they currently have over 5,000 followers on Facebook and Instagram. A responsive web design would give a central hub to their online identity.
Challenge
Lack of a defined space to land has created some confusion about where users go for information about Park Street Pastry.
Objectives
Create a responsive website to help improve online presence beyond social media
Augment the current branding for a seamless user experience from storefront to web
Project Scope
Responsive Website, Branding
Tools
Figma, Pen & Paper, Zoom, Whimsical
Role
UX Designer (Research, Visual Design, Interaction Design, Usability Testing)
Team
Self directed with guidance from my mentor & peers
Duration
4 weeks (80 hours)
The Design Process
01. Empathize.
Research Plan
Secondary: Market Research and Competitive Analysis
Primary: User Interviews
Empathy Map
User Persona
02. Define.
User & Business Goals
HMW Questions
Sitemap
03. Ideate.
Feature Roadmap
Task Flow
User Flow
UI Requirements
Branding
Wireframes
Responsive Design
04. Prototype.
Mid Fidelity Desktop Prototype
05. Test.
Usability Testing
Affinity Map
Priority Revisions
UI Kit
01. Empathize.
In this phase, assumptions are put aside. We look to learn more about the problem space, & create empathy for our users.
Research Plan
A research plan helps outline the goals, assumptions, and questions. It also helps organize who our participants will be and how we will conduct our primary research.
Research Goals:
Identify the target market(s) for this business
Identify customer needs at Park Street Pastry (on-site and online)
Identify the selling points of the service (on-site and online)
Find the biggest deterrents working against this service (on-site and online)
Understand the brand of Park Street Pastry
As it currently exists
Identify how to further augment their brand in a seamless way (online)
Identify competitors and their strengths/weaknesses
Secondary Research
Market Research
I conducted general research first to gain more information about current trends and customer demographics for the bakery cafe industry in the United States. By getting a clear picture of the industry, this helps to inform who our participants will be for user interviews during the primary research phase.
TRENDS
The market size of the Bakery Cafes industry is expected to increase 1.7% in 2021
The baking industry generates more than $30 billion in revenue each year. The industry includes 6,000 retail bakeries and nearly 3,000 commercial bakeries.
Opening a small, retail bakery requires less equity and is easier to start. Smaller bakeries can establish themselves with specialty products, such as whole-grain breads, and develop a loyal following of local customers.
The primary negative factor affecting this industry is high competition, while the primary positive factor is low revenue volatility.
Coffee and other beverages account for a large share of industry revenue, as most industry establishments serve coffee alongside baked goods. When coffee consumption increases, bakery cafes generally experience revenue growth. Per capita coffee consumption is expected to increase slowly in 2020, representing a potential opportunity for the industry.
As consumers become more health conscious, they will demand more gluten-free, low-carbohydrate, whole grain, organic and paleo diet products.
Social media and the Internet have become a core component of bakeries’ operating strategy, as they help build brand awareness, boost interactions with customers, and allow companies to monitor what people are saying about their products.
DEMOGRAPHICS
A report funded by the American Bakers Association and conducted by the Center for Generational Kinetics revealed that 78% of millennial and Generation Z consumers include carbohydrates in their regular diet, with 73% buying bread and 63% purchasing a sweet baked good in the previous week.
Millennials also tend to be more active in breakfast and lunch occasions than older generations, which make them a vital group for retail bakeries whose primary business hours are during breakfast and lunch.
Consumers in the 35 to 44 year old age bracket had the highest average annual household expenditures on all bakery products in 2016 with $424.00.
Consumers in the 45 to 54 year old bracket were close behind with $393.00 spent on bakery products. This is not surprising since these consumers are generally parents with high disposable incomes.
Consumers in the 55 to 64 year old age group were the only others to spend more on bakery products than the average household in 2016 ($373.25).
Consumers with a family income of $100,000 and over had the highest average annual household expenditures on bakery products with $543.75 in 2016.
Consumers with a family income of $80,000 to $99,999 had the second most spending with $445.75.
Consumers with family incomes of $70,000 and above all had higher average annual household expenditures on bakery products compared to the average spending of all consumer units.
White consumers had the highest average annual household expenditures on bakery products in 2016 with $373.50. Asian consumers followed with average spending of $346.50, while Hispanic consumers were close behind with average household expenditures of $344.50 on bakery products in 2016. Lastly, African American consumers spent the least with an average of $243.25 on bakery products in 2016.
The average consumer in households with a husband, wife, and children overwhelmingly spent the most on bakery products in 2016 ($521.25). Consumers in households with just a husband and wife had the second highest average annual expenditures on bakery products with $379.75. Meanwhile, single parents had average annual household expenditures of $339.75, while single consumers only spent $252.25 on average.
Competitive Analysis
By looking at other local bakery cafes, strengths and weaknesses of each could be evaluated of both direct and indirect competitors. I researched other small, locally owned shops in Johnson County Kansas. I also evaluated nationwide chains in this area.
Provisional Personas
Based on demographic trends found during market research, provisional personas are created. Here, I’m able to evaluate how user goals and pains differ, based on populations that typically visit bakery cafes. This assists when recruiting participants for user interviews.
Primary Research
User Interviews
During secondary research, a larger picture of the bakery cafe industry was brought into view. With this in mind, I connected with existing customers of Park Street Pastry for the user interviews. This will help me understand the typical user: their goals, expectations, needs, and frustrations when visiting Park Street Pastry. All were asked questions about their experience at Park Street Pastry and regarding visits to bakery cafes in general.
Participants
4 female, 31 - 65 year of age
2 male, 31 - 71 years of age
All residents of Olathe, KS
All patrons of Park Street Pastry
Empathy Map
After all interviews were conducted every observation or quote was recorded onto a post it note. Initially organized by participant, they were then rearranged by patterns to determine insights from the user interviews.
Insights: Determined as users began saying the same things
Enjoy high-quality food
Relax in a welcoming, tranquil environment
Connect with staff
A large variety of choices is important to the consumer
Understand establishment and offerings before entering
Needs: Derived from our insights
Needs high-quality offerings
Needs to feel at home in environs
Needs excellent customer service
Needs a large selection of offerings
Needs a website with clear information
User Persona
After determining the user needs, goals, frustrations, and motivations I built a user persona. Nancy guided the rest of my design decision keeping my solutions user-centered.
02. Define.
Now, we look to define the main problem we are solving for by synthesizing findings from the Empathize phase.
Point-Of-View Statements
These statements help frame the user in the problem space.
How Might We Questions
Using the POV statement, I created these questions to further help identify the problems I am attempting to solve. The HMQ are also used to brainstorm as many solutions as possible.
Project Goals
Now, I looked at how Nancy’s goals overlap with the business goals of Park Street Pastry. This helps identify some of the problems to solve. It also refocuses our solutions on supporting both the business and its users.
Site Map
Here, I created a potential layout of the information architecture of the website. This shows how the information will be organized, as well as the ways a user might navigate within it.
03. Ideate.
Now that the problem is defined, we can move to the ideate phase. Here, we are attempting to generate possible solutions.
Feature Roadmap
Based on my process thus far, I made a hierarchical list of features the product will require that support both business and user goals.
Task Flows
Using the HMW questions, I developed various tasks for the user. Utilizing the feature roadmap and sitemap, I thought about how the user would execute each task.
Task 1: Nancy, a new user, wants to learn about Park Street Pasty’s mission and culture.
Task 2: Nancy, an existing customer, wants to check the hours and location.
Task 3: Nancy, an existing customer, wants to peruse the menu before visiting the shop.
User Flow
In order to further empathize with the user, this user flow looks at all the various ways Nancy might navigate when interacting with the Park Street Pastry website.
Wireframes
After some initial sketching, I created mid-fidelity wireframes on Figma. These take into account everything generated through the Feature Roadmap & Flows. These pages take into account everything that is needed to complete various user tasks. These pages will be used to build our prototype. Our users will be interacting with Park Street Pastry on various devices, so mobile and tablet versions were developed using a responsive bootstrap grid. I kept any changes to the elements to a minimum.
04. Prototype.
Here we can see our ideas in action.
To make a working model of the website, I created a prototype in Figma. This allows users to accomplish the tasks outlined earlier. This is the version that was used during usability testing.
05. Test.
Using the prototype that we created we are now ready for Usability Testing. This is an exciting and revealing aspect of our work. It tells us how effectively we have designed for our users.
Usability Test Plan
Just as we had a Research Plan in the Empathize phase, here we plan for Usability Testing to ensure we are measuring the right things. Included in our Usability Test Plan is the following:
A script with non-leading language
Test goals
Test subjects
Methodologies
Test Completion Rate
Error Free Rate
Read the entire Usability Test Plan
Test Participants:
5 Participants
Male and Female
Ages 25 - 71
Customers of Park Street Pastry
Overall Results:
Completion Rate: 96%
Error Free Rate: 98.6%
Affinity Map
Once the testing was recorded and completed, every observation or quote was put on its own post it note. Items that were similar were grouped together; each pattern yielded an insight. Recommendations were made for each insight. They were prioritized according to the time it would take, and level of importance.
Insight
Meaning of “Contact Us” is unclear to users
Issue of discoverability with Hours page
Desire for more clickable areas to reach menu
Recommendation
a. Different copy (remove Contact Us)
b. Create more navigation links/eliminate dropdown
c. Add social media icons to top navigation bar
Reformat Hour section
Add interaction to offerings section on homepage
Priority Revisions
Based on the usability tests findings, I made updates. These should help mitigate any issues users frequently encountered.
Branding
Park Street Pastry already has an established brand in store. It was important to keep these attributes intact, while augmenting them into an online presence that was still very much recognizable. I started with keywords and created a moodboard on Pinterest.
Friendly
Tranquil
Quaint
Classic
Fresh
Trustworthy
Approachable
Gathering examples of what other modern bakery cafes helps generate possible visual design choices for Park Street Pastry. Below are the selected typography, color palette, logo, & imagery.
Hi-Fidelity Prototype
At this stage, the visual design choices were added to the desktop wireframes. Below are the responsive designs for both tablet and mobile versions.
Reflection & Next Steps
Reflection
This project gave me a great opportunity to listen to the voices of customers and a small business owner. I was able to meet the goal of designing a responsive website with the community at Park Street Pastry in mind.
Next Steps
Always an iterative process!
Usability testing of hi-fidelity prototype and priority revisions
Implement online ordering feature as this becomes feasible to business and customer needs