Brief
The design request was for a full website audit, competitor analysis and audit, and site redesign and prototype for Toronto Cupcakes, a mom-and-pop business
Audit
On initial inspection, Toronto Cupcake had a very bare-bones, and at times, confusing sitemap and navigation. It was plagued by several critical usability errors, such as a chat bot covering the main menu, unnecessary buttons, and no clear menu on the homepage. A short assessment of my main findings can be found below:
Navigation and Structure: C+
The navigation and structure are intuitive but were not easily identifiable. The menu bar is hidden under an icon on the homepage, requiring an extra click to access any other pages.
Visual Design: D
The design is not visually compelling. The pictures are of poor quality and do not attract attention. The accents on the site are also simple, with little regard or thought in creating a cohesive brand identity.
Content Evaluation: B+
The content is largely relevant. There are tabs that contain irrelevant content, but a user can still navigate to where they want to without hassle.
Interactivity and Functionality: C-
The site is mostly functional. All interactive elements work as intended. The largest issue is the cookies pop-up. No matter how many times the button is pressed, the pop-up comes back within seconds, blocking the bottom part of the screen.
Performance: A
The site loads quickly without major hassle. There are no hi-fidelity images or videos on the site that would otherwise affect load speed.
Accessibility: F
The site is not equipped for users with accessibility needs. The contrast on the menu is not enough to make out text against the background. The spacing between elements also makes the text hard to read and select.
The full audit can be accessed here:
Competitor Audit
To understand the kinds of competitors operating in this space, I did a bit of research on other cupcake vendors. To keep it simple, I searched for local rivals with a similar mom-and-pop feel.
The full audit of the local competition can be found here:
Wireframe
Upon completing the audits, I took stock of the issues I had noticed and made some plans to address them.
The site had to be simple. Too many menu options only confused users and kept them from achieving their goal of online ordering.
The cupcakes needed to be front and center. All pictures needed to be hi-fidelity, and users needed to see them as soon as they opened the site.
Based on these criteria, I began designing the wireframe of the landing page. These were the main points I accomplished in the draft.
I prioritized a clear view of the title and logo of the company, followed by an easy-to-access navigation menu with the most important tabs: Shop, Corporate Events, Cupcake Delivery, About, FAQs, and Visit Us.
I included a brief "About Us" section and a quick, visual products section to inform users about the site.
To cap off the page while also keeping it on the short side, I included some testimonials for first-time buyers.
Hi-Fidelity Version
From there, I began to build out and polish the rest of the site. This process required me to simulate the user experience from start to finish: accessing the site. selecting an order and navigating the purchasing screen.