About Toronto Cupcake
The Toronto Cupcake Company, founded by Michelle Harrison in 2010, offers a variety of cupcakes through its online platform. Orders can be placed over the phone or website as there is no physical store.
Problem
There are a number of problems with the website, Despite its success and customer satisfaction, the website has several issues:
• The site is unattractive. Poor colour and image selection. It's not cupcake-like.
• Website interactions fail to engage users.
• Website information architecture is poor and confuses shoppers.
• The payment process is highly inconvenient for users.
Redesign Goal
• Improvement of the "Customization Task" to provide users with a more convenient path and increase overall customer satisfaction with our site.
• Enhance the site's design in order to bring in more new users.
• Make navigating the site easier.
• Create a less challenging online shop and payment system.
Heuristic Evaluation
We began the research part by reviewing the current website with our users, who are fairly diverse in age and community. Following this, our team conducted a heuristic evaluation of the website before conducting user interviews to enhance our understanding of key research areas.
Home Page
Product Page
Corporation Page
Shopping Cart Page
Competitive Analysis
We did this part as the next step involved evaluating five other websites with similar business plans.
Major Takeaway
•There is no option to return to the previous page on most websites.
• Filter options are important for users to access their favourite products.
• The navigation of a website should be easy and user-friendly.
•Website reviews are essential for new users.
Persona
Based on our research, we created the persona that will be going through our website flow.
Solution Statement
After creating a persona based on research we did, Here are some user needs for the website and the solution we provided.
• Build up a trust for attracting new users.
• Based on our research, here are some user needs for the website and the solution we provided.
• It is important for users to find the website attractive in terms of UI and layout.
• Redesign pages with better visuals and proper design elements like images, and fonts.
• Users can Have the ability to customize cupcakes.
Creating a customized page allows users to visualize any steps of building up their cupcakes based on the options available.
Story Board
Based on the persona character, we are going to illustrate the journey that Maggie is going to take through the website after applying the right solutions for her.
User & Task Flow
We have worked through the process of ordering customized cupcakes, and here you can see the user flow.
Site Map
Presented here is the site map that summarizes the website's information architecture. It was created based on the answers we received from the user during the research phase.
MoodBoard
After consulting with stakeholders and considering the existing colour scheme, we chose this mood board and UI kit to redesign the website with a visually accessible approach.
UI Kit
To create a consistent visual design for the website, we tested various fonts and colours.
Based on these tests, we created the current UI kit, which uses complementary colours to the website's palette and the products it offers.
Sketches and Wireframes
After finishing the moodboard and UI kit, we sketched based on our research and used it to create the wireframes.
Homepage
Customized Page
Always Available Page
Corporate Page
Iterations and Usability Tests
We have iterated on our design by getting feedback and usability tests. here you can see some of them.
Home Page
Customized Page
Always Available Page
Corporate Page
Payment Page
Hi-Fidelity Desktop Deliverable
Learning
• Creating designs that meet users' needs requires extensive studies and research to understand their pain points and preferences.
• It is always a team effort that results in successful user experience and user interface designs.
• Our successful design must meet business goals and customer desires.
Next Steps
•Making the product more user-friendly by conducting usability tests and iterations.
•Developing a mobile app for Toronto Cupcakes to make it easier for the users to access
via their mobile devices.
