Priory Fine Pastries

E-Commerce Responsive Web Design and Rebrand
Research, User Testing, Exploration, Refinement, Final Solution
Design Assistant Work- May 2020
100 hours over the course of 10 weeks
Problem Statement
Busy people feel overwhelmed by the number of choices and need a way to order baked goods that is time-efficient and easy to find the products that they are craving or are in the market.
Project Overview
I designed a modern, responsive website for a Pittsburgh, PA-based bakery, an e-commerce website that makes it easy to purchase baked goods online. Have a visually pleasing online presence and spread awareness of products. Establish a way to bring the in-store bakery experience onto a digital platform.
My Role
  • UI Design
  • UX Design
  • Re-Brand Identity
  • Information Architecture
mobile website design for bakery
Competitive Analysis
I reviewed websites of other bakeries along with their traffic and keyword searches to help identify the strengths and weaknesses of competitors in town.
+ Modern look to their main page
+ Suggestions of similar items underneath on item page
+ Page layouts are image-heavy
+ Serving Size suggestions
+ Newsletter to help bring more visitors to your website and build relationships and loyalty

+ Keep brand image consistent between different pages, check out points, emails
+ Use of white space to show off the products
+ Have large images to showcase items
+ Don't use creative names like sweet lane, making it challenging to find the products the user is looking for

The use of a newsletter could help increase their traffic value. Adding serving suggestions next to their cakes sizes and include their gallery of items within the product page instead of separate navigation. Lastly, have a list of the different flavors and fillings available.
User Interview
I sent a survey using google forms to friends, family, and coworkers that consume baked goods on a regular basis. I asked questions like:
*Tell me about your last experience at your favorite bakery?
*What are some of the things that make you decide to buy baked goods in the store?
*Was there anything that frustrated you about your last in-store experience?

+ Freshness of products
+ Availability of products
+ Fulfill cravings
+ See visual display

Pain Points:
+ Long lines
+ Sold out items
+ Time spent going to a bakery

Based on all the information gathered, three personas for the e-commerce bakery. Their goals and frustrations reflect the data compiled from the surveys. The design for this e-commerce website has the user goals in mind to be met with the site features. Below the user journey wants to purchase a dozen variety of donuts for her co-workers. The goal is to have a seamless user experience the next time she wants to treat her co-workers.
three persona cards based on researchOffice sweet tooth persona journey map through making a purchase
User Flow & Site Map
User flows are created to show the path taken by a prototypical user on the bakeries website to complete a task. I explored some user flows that take them from their entry point through a set of steps towards purchasing a product. Informed by features and priorities outlined in my research, I created a site map to show the information organized based on the hierarchy of content, proposed for the new Priory site.
Call To Action:
+ Contact Us
+ Order Online
+ Visit Our Store
+ Newsletter Sign Up

Successful Conversion Action:
+ Purchase
+ Contact about a Catering Event
+ Form Request for Custom Cake
+ Join Newsletter

User flow chartsite map to showcase page hierarchy
Low fidelity wireframes are developed first based off of the user flows created. Three people who filled out the initial survey took part in testing wireframes.

Feedback :
     - Add in a pop up to show feedback when an item is added to your cart
     - Have a filter for best sellers along with a best sellers section so that any category can be sorted by best sellers
     - On the cart page have the total stay above the fold

To get a sense for the flow and test experience an interactive prototype was created with the feedback from the wireframe and user goals in mind.

variety of wireframes for the different pages on the website
Final Solution
Provide an e-commerce website that makes it easy to purchase baked goods online. Have a visually pleasing online presence and spread awareness of offerings.

Color and UI style:
Minimal design with a focus on product photos. Use grids to keep content organized. The overall tone is friendly and elegant to have a balance of attracting locals along with a more high-value purchase like custom cakes for special events. The logo and color scheme was kept from the original logo and made more sophisticated and approachable. The diamond shape in the O of Priory is used repeating as a pattern.

Some Compromises made include:
+ Online forms include a section to book an appointment online
+ Having a bestsellers section under the shop page along with a filter option
+ More space between list items
+ Create an account vs guest checkout option
+ Product rating dismissed for a reminder that customized products are available

High fidelity wireframesstyleguide for priory fine pastriesletterhead and menu designpackage design store front design