Georgetown Cupcake: Website redesign
Making online ordering a piece of (cup)cake!
Research
Design
Prototype
My Role
Tools Used
Figma
Optimal
Duration
3 weeks
Project Introduction
Georgetown Cupcake is a popular cupcake shop with a daily line out the door. Their flagship store is in Georgetown, D.C. and they have expanded with multiple locations nationwide.
Challenge: Georgetown Cupcake needs help in transitioning to an easy-order model where customers can order ahead online.
Research
A quick scan of the homepage gave a positive first impression:
visually pleasing
captivating images that highlight their delicious cupcakes
received positive reactions from users during usability tests
But we can’t judge a cupcake by it’s wrapper…
Heuristic evaluation & feature inventory
There were a number of heuristic violations that impacted efficiency and several key homepage features were missing compared to competitor sites.
Usability tests
I conducted 5 usability tests which helped to identify pain points and gain a better understanding of the users needs.
Three main tasks that gave key insights were:
browse the menu
create a custom assortment order for pickup
remove 1 cupcake from the custom assortment in their cart
of users expected to be able to add items to cart directly from the menu and expressed confusion when they couldn’t
of users ended up with the wrong number of cupcakes in their order and expressed confusion or frustration
of users expressed frustration after realizing that they couldn’t edit custom assortments in their cart without deleting the whole order and starting over
User testing made it clear that the current site’s online ordering process left users feeling frustrated.
Define
Journey map
I was able to create a journey map which helped me see the decline in user satisfaction from beginning to end of the current online ordering process.
With my proto persona in mind, I was able to clearly define a problem and solution.
Problem
Georgetown Cupcake customers who want to order ahead online need a website that allows them to create orders and checkout efficiently.
Solution
Redesign the current website with layout changes for clarity. Redesign user flows for the ordering process.
Ideate
Sitemaps
Through card sorting and tree tests, the current site’s navigation was narrowed down from 10 to 5 categories.
Content was moved to the footer after looking at several competitor sites such as Milkbar and Levain Bakery.
Sketches and wireframes
I started designing with a sketch and wireframe of the homepage as a foundation for the rest of the design.
I was then able to make additional wireframes for product and product detail pages.
Iterate
I was able to iterate on the initial prototype with feedback from user testing.
Product page
When users clicked on “Cupcakes” from the global nav, they said they expected to see individual products instead of the product category cards. They also expected to see the categories and filters as a side navigation.
Product detail page
On the product detail page, users were confused by “Cupcake Care”, so it was changed to “Storing Cupcakes” for clarification.
Prototype
The current version is a mid-hi fidelity prototype
OR
View prototype highlights below
Quick view feature
users can quickly scan product details and add to cart with quick view feature
Product pages
users can select product categories from side menu and also view site location with added breadcrumbs
Product detail page
users can access product detail pages and add to cart from the menu (the total cost will adjust on “Add to Cart” button with product quantity)
Cart to checkout
users can choose their preferred method of receiving the product from the cart and proceed to checkout
Next Steps
Continue user testing and iterate
A/B testing: some of the redesigned pages had 2 versions so I would like to get feedback on those
Create a high fidelity prototype after further testing
Project Takeaways
This was my second project completed for the General Assembly UXD Immersive program, and it was definitely a huge step up from my first project which was to design a lo-fidelity prototype of an AR/VR mobile app feature
I really enjoyed usability testing and seeing how users interacted with the site. The users’ insights and pain points weren’t always the same as mine. It showed me how important testing and research is to put my own opinions and assumptions at bay. It was a good reminder throughout this project that my job is to design for the users, and not for myself.