Toronto Cupcake is a
Canadian bakery delivery business that specializes
in cupcakes.
Canadian bakery delivery business that specializes
in cupcakes.
In this case study, I analyzed the current state of Toronto Cupcake's desktop website to identify problems and issues, proposing solutions in the process, in an attempt to improve its overall user experience and functionality. Done as a part of a UI/UX program at the British Columbia Institute of Technology (BCIT).
This case study may contain copyrighted material the use of which has not been specifically authorized by the copyright owner. This case study has helped me to promote my capabilities and advance my education specifically in the area relating to user experience (UX) research and includes my personal opinions, satire, criticism and review. I believe this constitutes a ‘fair use/dealing’ of any such copyrighted material.
Tools used include Figma, InVision, Miro, and UXPressia.
This case study may contain copyrighted material the use of which has not been specifically authorized by the copyright owner. This case study has helped me to promote my capabilities and advance my education specifically in the area relating to user experience (UX) research and includes my personal opinions, satire, criticism and review. I believe this constitutes a ‘fair use/dealing’ of any such copyrighted material.
Tools used include Figma, InVision, Miro, and UXPressia.
Defining the problem(s) and
conducting a website analysis
conducting a website analysis
While they’ve accumulated and gained a strong reputation for fresh, delicious cupcakes over the past decade, Toronto Cupcake’s current website is objectively outdated visually and in overall navigation in terms of their online ordering service. These issues may make it difficult for potential new customers to navigate their interface and increase the possibility/chance of losing them due to its confusing nature.
In an attempt to generate and provide solutions on how the website can be improved, I will be employing the 5-step UX Design Process: Define, Research, Analyze, Design, and Validate.
To analyze the website, I drafted a hierarchical task analysis of the main task the website is used for, which is the process of ordering cupcakes. I then analyzed the four main pages I found to do with this process: their home page, cupcakes page, cart page and checkout page.
From this, I was able to pinpoint two main problems:
In an attempt to generate and provide solutions on how the website can be improved, I will be employing the 5-step UX Design Process: Define, Research, Analyze, Design, and Validate.
To analyze the website, I drafted a hierarchical task analysis of the main task the website is used for, which is the process of ordering cupcakes. I then analyzed the four main pages I found to do with this process: their home page, cupcakes page, cart page and checkout page.
From this, I was able to pinpoint two main problems:
1. The visual web design is unpleasing and can give the impression of “unprofessionalism". This is due to mistakes such as spelling errors. In other words, the overall UI/UX credibility of the website can be improved.
2. The online ordering system is confusing and outdated. Some problems include unorganized cart display information and unconventional payment methods. The challenge here is to make the overall ordering experience for new or returning customers more efficient and less complicated.
Researching, creating user personas and journey maps
After pinpointing the issues I found on the website to gain context and empathize with users, I needed to determine who Toronto Cupcake’s users were in the first place. Due to the nature of their services of providing cupcakes for anybody, no matter the reason, I hypothesized that their target audience is relatively broad, but I eventually created a persona based on one of the target audience groups I hypothesized: groups looking to order cupcakes for celebratory events, such as birthdays.
I also created a customer journey map based on my persona to discover some pain points they might experience along the way, and generate ideas for possible solutions.
I also created a customer journey map based on my persona to discover some pain points they might experience along the way, and generate ideas for possible solutions.
Analyzing, doing competitor analyses and creating low-
fidelity wireframes
fidelity wireframes
I did a competitor analysis comparing Toronto Cupcake with three other cupcakeries/bakeries with online ordering in the Greater Toronto Area. This method not only served as a way for me to gain inspiration but also as a way for me to identify common website practices. This was also to see if I could apply them to and/or improve upon them with my re-design.
The three competitors I analyzed were The Rolling Pin, The Cupcake Shoppe, and Bobbette & Belle. Common design features I noted were top navigation bars with cart placement on the right, eye-catching hero messages, and similar cart/checkout page layouts.
With some ideas & opportunities in mind, gathered from doing the journey map and competitor analysis, I then planned out and ideated some designs in an attempt to solve some of the problems, previously identified, on Toronto Cupcake's current website; and to do so, I created low-fidelity wireframes.
The three competitors I analyzed were The Rolling Pin, The Cupcake Shoppe, and Bobbette & Belle. Common design features I noted were top navigation bars with cart placement on the right, eye-catching hero messages, and similar cart/checkout page layouts.
With some ideas & opportunities in mind, gathered from doing the journey map and competitor analysis, I then planned out and ideated some designs in an attempt to solve some of the problems, previously identified, on Toronto Cupcake's current website; and to do so, I created low-fidelity wireframes.
Designing, proposing solutions, and creating high-fidelity wireframes
After drafting the low-fidelity wireframes, I created high-fidelity prototypes using Figma and InVision. It was during this process that I began bringing some of the proposed solutions I outlined during the ideation phase "to life" and in a more organized and attractive manner.
Some proposed solutions include:
1. Aesthetic-Usability Effect: Revamp UI by further implementing consistent branding, feature testimonials on the home page to improve credibility and trust with users, and have the addition of a persuasive hero message to leave a good first impression.
2. Jakob's Law: Re-design certain layouts, such as the cart and checkout pages, in a similar fashion as other websites; utilize a top navigation bar system for easier and simpler overall site navigation. This is to have the user focus more on concentrating on the task in front of them rather than having to learn a new model.
Some proposed solutions include:
1. Aesthetic-Usability Effect: Revamp UI by further implementing consistent branding, feature testimonials on the home page to improve credibility and trust with users, and have the addition of a persuasive hero message to leave a good first impression.
2. Jakob's Law: Re-design certain layouts, such as the cart and checkout pages, in a similar fashion as other websites; utilize a top navigation bar system for easier and simpler overall site navigation. This is to have the user focus more on concentrating on the task in front of them rather than having to learn a new model.
Validating, gaining feedback, and continuous refinement/testing
Once I re-designed the four Toronto Cupcake pages with my proposed solutions, I prototyped them using InVision. This was to make it testable by simulating how the flow would work if it were a live website and preparing it for user testing. By doing this step, I'm able to receive crucial feedback on my proposed design solutions and identify any areas of improvement or errors. This rinse-and-repeat process will allow me to further work on improving the experience of the website.
The next steps for this Toronto Cupcake website project, if it weren’t a month-long case study assignment, would be to carry on with the validation phase by continuing user testing. Ideally, a bigger scope of user testing should be done with a larger sample size to gain more perspectives. From there, continuous refinement to the high-fidelity prototype should be done to further improve the user experience of the website, specifically for the process I covered in this case study (ordering and checkout).
The next steps for this Toronto Cupcake website project, if it weren’t a month-long case study assignment, would be to carry on with the validation phase by continuing user testing. Ideally, a bigger scope of user testing should be done with a larger sample size to gain more perspectives. From there, continuous refinement to the high-fidelity prototype should be done to further improve the user experience of the website, specifically for the process I covered in this case study (ordering and checkout).
Takeaways, outlining what I've learned from this project
This case study assignment was my first stepping stone in further exploring the world of UI/UX. As a visual designer who did his undergraduate degree in Communication Design, user experience design has always interested me and is a field I may want to work in. I’ve learned a lot from doing this case study, the main points being:
1. Collaboration is highly important: Working towards improving user experience is not possible by working individually because, by definition, you’re designing for others and not just for yourself. Gaining as many perspectives and feedback from others, whether they be aspiring UX designers/students or target audience groups, is crucial.
2. UI/UX is a continuous process, not just a technique: The world is continuously changing and as UI/UX designers, we need to continuously be on the lookout for ways of improving user experience, even if the design is already in a good spot.
3. Research is a must: In order to design for something, you need to know all about its contextual information. Without doing so, you risk not drawing valid solutions. I thought this case study served as a good reminder of how important research is.
1. Collaboration is highly important: Working towards improving user experience is not possible by working individually because, by definition, you’re designing for others and not just for yourself. Gaining as many perspectives and feedback from others, whether they be aspiring UX designers/students or target audience groups, is crucial.
2. UI/UX is a continuous process, not just a technique: The world is continuously changing and as UI/UX designers, we need to continuously be on the lookout for ways of improving user experience, even if the design is already in a good spot.
3. Research is a must: In order to design for something, you need to know all about its contextual information. Without doing so, you risk not drawing valid solutions. I thought this case study served as a good reminder of how important research is.
