Top Shelf Cookies
Web redesign for local cookie company, Top Shelf Cookies to improve brand image and address usability problems on their website.
-Mockup-Macbook%20Pro%202016.png)
-iPhone%20X.png)
Project Overview
| Brief Intro to Top Shelf Cookies
In addition to having a physical store in Boston, Top Shelf Cookies also offers an online order where customers in different areas can order their cookies through the website. Top Shelf Cookie's compelling entrepreneurial story conveys a warm image and friendly neighborhood charm, while innovative ideas also drive them to constantly develop new flavors that surprise their customers.
| Problem Statement
How might we redesign the website for Top Shelf Cookies, that will effectively enhance the user experience while being able to communicate the brand message and increase awareness.
| Solution & Objective
My solution is to restructure the information architecture, strengthen the CTAs to increase conversions and ultimately accomplish the goal by creating responsive prototype with consistent design elements.
| Role & Deliverables
In the fall of 2021, I worked with Top Shelf Cookies as a contract web designer. In the three months, I was solely responsible for the web redesign project, starting from interviews, research, and to ideation. Lastly, the final deliverable is presented as a high-fidelity prototype with attractive visual design.
| Here's the Process!
RESEARCH
IDEATION
DELIVERABLE
INTERVIEW
Solution
Problem Statement
-
Client Interview
-
Brand Reputation
-
Competitor Research
-
Target Audience
-
User Interview
-
Wireframe
-
High-Fidelity Prototype
-
Visual Design
Background
In addition to having a physical store in Boston, Top Shelf Cookies also offers an online order where customers in different areas can order their cookies through the website. When I browse Top Shelf Cookies' site from the user's perspective, I find there were usability problems that confuse users and get lost in the navigation. Therefore, I decided to redesign the website to help users order products and browse information more smoothly.
Research
-
Competitor research
To learn more about the design direction of the cookie shop website, I searched for competitors and took inspiration from their websites. Milk Bar, Wicked Baked Cookies and Cookies By Design are my main references. At the same time, I also took inspiration from Art of Tea, a website for similar products.
-
Brand Reputation
Past Brand: The history of Top Shelf Cookies is not very long. It started in 2014 as a young company. At first they gave people the impression of a small local cookie workshop with retail stalls in various farmers markets in Boston. At that time, most of the people who bought cookies might come from people visiting the market, and relatively few people knew Top Shelf Cookies directly through the website.
Current Brand: The current Top Shelf Cookies has gone from an unknown small cookie workshop to a well-known cookie store and online merchants in the local area. Top Shelf Cookies not only set up an independent physical store to continue to increase their popularity, they are also actively expanding their online channels. Online shopping and shipping services allow Top Shelf Cookies to sell farther places and find a wider range of potential consumers.
Future Brand: In future plans, Top Shelf Cookies will mainly promote their delicious cookie products through the website. Expand brand awareness to more cities in the United States than just Boston. With the needs of different customer groups, Top Shelf Cookies will also launch more diversified products, such as luxury gift boxes with a variety of flavor combinations, customized services, celebration cards and balloons. Therefore, they need to improve the official website to promote products and convey information. Top Shelf Cookies can also interact with customers through the website. For example, publishing daily-baked cookies flavors, news about new flavors coming soon, and allowing customers to leave comments on the website. These will enhance the brand reputation of Top Shelf Cookies.
-
Insight
After gaining insights from brand analysis and research, I have a clear understanding of Top Shelf Cookies' target audience and the needs of the owners. The information will help me make better decisions when designing.
Target Audience:
1. Primary: Adults aged 18-45
Adults between the ages of 18 and 45 are very interested in trying new cookie types and flavors. Among them, women prefer sweets and are attracted by beautiful packaging compared to men.
50%
30%
2. Secondary: Family
For families, sharing cookies with family members can be a happy time. In addition, this group is usually financially stable, so they are more willing and able to afford gifts.
20%
3. Tertiary: Groups
Companies, organizations, societies, etc. Groups will need to order snacks for guests or members when holding events. Some companies order gift boxes for employees on special days.
High-level Goals:
01
Attract customers to place orders through website promotion. CTAs: Shop/Buy/Order.
02
Deliver brand and product information. Customers can learn about the latest news and receive information notifications through the website. CTAs: Learn more/Subscribe/Sign up/Register.
03
Increases the interaction between customers and Top Shelf Cookies. Feedback from customers helps Top Shelf Cookies understand market needs, improve problems and generate inspiration for new products. CTAs: Write a review/Leave a comment.
04
Customers can get in touch with customer service to solve their problems or special needs. CTAs: Contact Us/Help.
High-Fidelity Wireframes
-
Laptop Version
-Mockup.png)
.png)
.png)
.png)
Users can click on different options for the subscriptions.
.png)
Owners can understand customer needs through the reviews and they can also reply to them to increase interaction.
.png)
-
Mobile Version
Conclusion
I am satisfied with how the final project turned out. My sense of achievement comes from constantly pushing myself to break through and trying new designs while revising.
Through user research and analysis, I learned how important they are before designing. So when I was doing the redesign, I thought about the purpose of each idea and the value it could bring. Does my design address priority issues? Are these improvements helpful and meaningful to users? By improving again and again, I carefully identify potential problems with each revision until I create the most appropriate design.
I learned how to plan and execute the design process well in this experience, and at the same time, I have also established a stable UI design ability.