Project overview
Background
I think one of the best ways to explore a neighborhood is by walking around and seeing all the local shops. One day I was craving donuts and wanted to see if I can find a local shop to try. With a quick search on Google Maps, I discovered Peter Pan Donut & Pastry Shop that seemed to have exactly what I wanted! I decided to look for their website to see the donut flavors and prices so that I didn’t have to spend eternity in front of the cashier while having an internal battle about what flavors to get. On the website, however, I found it extremely difficult to find out what flavors they serve, how much they cost, and what makes their donuts stand out.
PROBLEM
It was extremely difficult to navigate their site and to understand the products (donuts, sandwiches, and drinks) they are selling.
Project goals
project results
tools
Make it clearer to sweet lovers what this shop is, what it sells, and how to purchase.
Reimagine and redesign the shop website
Allow users to view and purchase shop products easily
Mural, Miro, Figma
User research
information architecture analysis
I first took a look at the site itself to understand the information architecture and how a user would typically navigate this site and what they would see.
I noticed that there were a few pieces of information that are repeated in multiple pages (shown in darker tan boxes).
competitive analysis
I looked at both franchise and local shops that sold donuts such as Dunkin’ Donuts and Doughnut Plant. The competitive advantage for Peter Pan is their story and history in the neighborhood. They truly have a mom and pop shop story, and wanted this to be evident to their customers, but wanted to make sure they are aligned with what users are used to.
identify persona
To understand the users, I went to Reddit to ask the community a few questions regarding their demographic, why they get donuts, when they get donuts, and how often.
Meet Natasha:
Key takeaways
- Consumers have a preferred donut flavor, but are also willing to try seasonal or popular flavors
- Consumers are open to trying new dessert shops
- WE LOVE DONUTS!
Planning
color palette
I looked into the color palette as there was no set color theme on the current site. From images of the shop and the shop uniforms, I wanted the website to be an online reflection of the store itself. Therefore, I wanted to incorporate the teal and pink from the employee uniforms and the yellow from the store sign.
user story map
For my prototype, I wanted to focus on three key features: brief summary, our products, and cart. Currently, their site is only informational; however, I wanted to explore how this donut shop can expand to sell their products online and how that would be like.
Brief Summary
Our products
Cart
- Brief information about what makes this shop special
- Captivating image of what the store is known for
- Item name and price
- Popular items
- Items categorized by type (Donuts, Sandwiches, Drinks)
- Add to cart function
- View cart items
- Ability to edit items in cart
- Add payment information
- Ability to check out
Prototyping
I started designing the Landing page. Based on my research, it is most important for users to immediately get captivated by their products: donuts! I wanted to make sure to highlight what is unique to them - handmade honey glazed donuts and their 70 year history. From there, I wanted it to be easy for the user to browse their products starting from popular items first.
Disclaimer: The products listed DOES NOT reflect the actual items they sell OR the pricing of their items. The items and price shown in the prototype are all made up by me. Please visit their website and go visit them (if you can) because they are delicious!!
View prototype
.png)