We would like to help local businesses since they struggled due to the long pandemic period. We found a local business called Toronto Cupcake and despite their great product, unfortunately, the website is not user-friendly enough to increase their profits. We are going to devote ourselves to suggesting a new design and developing a front-end web application for their website.
We observed that the Toronto Cupcake website was not conducive for the user to purchase cupcakes online. Users could not acquire necessary information regarding nutrition facts & allergies. The visual elements of the website were not professionally designed. The website was not user-friendly.
Improve visual appeal of the whole website and organization elements (e.g. navigation, shopping cart & items)We intended to make the user experience more aesthetically pleasing
www.torontocupcake.com
Web & Mobile version: Landing page, Product page and Order page for Prototyping and Front-end development
Usability test
A/B Testign
Iterations
Wireframe
Clickable prototype
Hi-fi mockups
User Persona
User Interviews
Affinity Diagram
Brainstorming
UI analysis & redlining
Card Sorting
Site Map
User Flow
Problem Statement
User Journey Map
Competitor Analysis
We created a provisional persona with the needs of ordering cupcakes online, based on our understanding of people who order dessert menus online. This persona was created with assumptions, not research-based yet.
Bio
Tara is a 33-year-old event planner who lives in Toronto. She’s an outgoing and creative person and loves to meet people and organize gatherings. She is always interested in popular party venues or local food merchandisers for upcoming events. Especially, she wants to find a place to be able to make large orders online, with great quality o cupcakes and customization.
Personality
Age: 33
Occupation: Event Planner
Location: Toronto, ON
Education: Event Management
Status: Single
Interests
- Popular party venues in Toronto.
- Local food merchandisers with good quality and customer service.
- Popular dishes or finger-grab foods for parties or events
Motivations
- Provide event plan to clients to confirm.
- Looking for a new pastry person to make custom sweets.
- Trying local food to support them.
Needs & Expectations
- Fresh and good quality products with reasonable prices for large orders.
- Order progress.
Goals
- Wants to order specific colours for an event that will be held in 2 weeks.
- Wants to find the cupcakes that meet the event/party concepts.
- Wants to find the place where she can order customized cupcakes
Pain Points / Frustrations
- Delivery deadlines.
- Products don’t match with photos.
- Lack of information about allergy/ nut free products.
◦ What is your habit of ordering food online?
◦ Describe when you made an order for food online
◦ When you buy food online, what information are you looking for?
◦ Which website/service do you use often to order your food? Is there any specific website? Which site and why?
◦ Tell me about your event planning experiences (birthday, bridal shower, etc)
◦ What is the most important factor to make you order online when it comes to food/dessert menus?
◦ Is there any specific website where you make online orders for food often? Which site and why?
◦ etc...
◦ Tell me about yourself
◦ How old are you? (age range)
◦ What do you do for a living?
◦ What do you usually do in your free time?
◦ How often do you plan events? (include small parties, gatherings)
We conducted 5 user interviews not taking much of their time to understand what motivates users to make online orders and their online order habits. We tried to focus on individuals who plan events either for companies or family events and choose to buy food or desserts online for the events.
We reviewed the interview result and organized them with affinity diagram to get insightful ideas. We could learn users usually make decisions relying on referrals, personal experiences and the information on the website. They also feel lack of information especially for the nutrition facts when they shop online for dessert menus.
Price
Review
Quality pictures
Nutrition facts
Ingredients
Straight forward checkout
Options for Delivery
Customizing options More delicious
Authenticity
Lack of Information
Order without tasting
Corporative events
Friend gathering
Special Events
Here’s our user personal, Linna Ford, who we created based on our findings from the research.
Lina, who is a 37-year-old customer service supervisor lives in Toronto. She recently noticed that one of her colleague’s birthday is coming and she wants to organize a surprise birthday party for her.
She wants to find a reliable local cupcake store where she can make an order online. She wants to order the favourite flavour of cupcakes of the birthday girl and needs to be careful with the allergies and nutrition of her team members.
Bio
Tara is a 33-year-old event planner who lives in Toronto. She’s an outgoing and creative person and loves to meet people and organize gatherings. She is always interested in popular party venues or local food merchandisers for upcoming events.
Age: 37
Education: Master in Business
Status: Engage
Occupation: Customer Service Supervisor
Location: Toronto
Personality
Core needs
• Trustful place with quality ingredients.
• Variety of options of ingredients (ex: vegan ).
• Customizable products.
• Being able to see real photos of the product.
• Special dates products.
Frustrations
• Delivery Time.
• Not being able to know the ingredients used.
• Hard to know if is a good product or tastes good.
• Not sure about the real nutrition facts.
Motivations
• Live the company's values.
• Experience new things.
• Mindful of high-quality intake.
• Support valuable local businesses.
Interests
• Flea markets.
• People satisfaction.
• Leadership.
• Planning.
Based on our findings, people order cupcakes online on special occasions. For special events, they want to order from local stores and especially for online orders, they usually rely on referrals and their personal experiences. Also, the pictures on the web or mobile apps and the promotions affect users’ decision-making. However, they struggle to navigate the websites due to a lack of information, such as nutrition facts or allergy info.
Linna, who is planning a surprise birthday party for her team member needs to be careful of her colleagues’ diet habits and allergies and also wants to customize the cupcakes to show her love and appreciation to her team members.
How might we help Linna ensure her orders on this website for a successful surprise birthday party?
Linna found that one of her team members birthday is coming in 2 weeks.
She decided to organize a surprise birthday party.
She heard that the birthday girl loves cupcakes.
She realized that she also needs to be careful with her team’s allergies and diet options and struggled to find good supplies.
Her friend suggested an online cupcake shop where she had a satisfying experience.
She visited the website and could find all the nutrition info easy.
She ordered cupcakes for the surprise birthday party and it was successful.
Linna and her all team members were so happy and they recommended this shop to their friends.
We visited 3 competitor websites to learn and get inspiration by analyzing their pros and cons.
We brainstormed with I like, I wish, What if to get fresh ideas to redesign the Toronto Cupcake website.
With the combined interview insights and the ideas from brainstorming we prioritized each idea on its importance to the user as well as the business owner, which is Toronto Cupcake.
Toronto Cupcake Logo
- Brand Logo
Hamburger menu
- Good to save space in mobile, but it will be better to show all the menu option for web
Date, suggestions.
- Quick button for people looking for custom cupcakes for companies or events.
COVID Guidelines
- Nice to provide specific COVID guidelines to customers.
Hero Image
- It would be nice to have better quality images for the hero image.
Paragraph
- Divide sections of announcement and business information clearly
Footer
- There is no change when hovering the button.
- Need to organize buttons by header or footer.
We analyzed the original website of Toronto Cupcake to detect usability issues and identify to resolve them. To make the understanding of how and what should be done, we annotated with red-lining on each page of user path.
Selection of language
- The language option can be on every page. Can be add on Nav bar or footer.
Title page
- Better design to understand that's the title of the website and not a cupcake.
Summary of prices.
Card product
- It shows an image, let select the quantity user wants to buy and the button to add to the cart. It's missing the price.
Quantity
Add to cart button
- Brings user to cart instead of ask them to continue shopping or move the product selected to the cart.
Header
- To show categories.
- It shows different prices depending on quantity. We can add the price for each product instead of on the top.
Quantity
- Selection of quantity of this product in specific that user wants to buy.
Update button
- Help costumer to update the order
Flavour/item details
- Shows the flavour and item name
Order details
- Present order quantities, price and total.
- It could be condence with 1-5 shows more clear information.
Buttons
- Give options to users to place orders, continue shopping, or clear the cart.
- place order can be CTA button, and place right button instead of left.
To build the new sitemap, we did the open-card sorting with 12 participants. We provided all existing menus on the website and allowed them to rename, delete them or create new ones.
This is the new sitemap we created based on the card sorting result.
This is the new sitemap we created based on the card sorting result.
Once we organized all our ideas from the previous processes, we began to design mobile and websites. While sketching our low-fi wireframes, we drew inspiration from competitors as well.
We combined all the ideas from the low-fi wireframes and jumped into the mid-fi clickable prototype. We worked with the tool Figma and created our clickable prototype for both web and mobile version.
We conducted 5 usability test with the mid-fi clickable prototype to find out any pain points with our resolution. After collecting the result, we prioritized the inspiration and agreed on the areas of improvement.
Paint Point - Product Page
◦ The same name of the cupcake is repeated on the product page. It looks like some testing or developing sample.
◦ The quantity of the order is set as 2 therefore users misunderstood that the minimum order is 2 for each item, which is not.
Paint Point - Others
◦ Footer for the mobile version needs to be redesigned. It doesn’t seem organized and especially, and the Instagram logo doesn’t seem to fit in.
◦ On the order page, the box for notes is huge and users need to scroll down quite far to see the total price.
◦ We got questions about the purpose of the note. The specific reason for leaving a note before placing an order should be explained.
◦ Try different font weights.
◦ Mobile cards need more space.
◦ Spacing or layer differently inside of card contents.
◦ Check-out page looks better then mid-fidelity.
◦ The hero image captures the eyes.
◦ Successfully complete the tasks.
◦ My basket page looks nicer than the previous prototype.
◦ A/B test, 90% of users choose high-fidelity images.
