E-Comm. Web Redesign
Toronto Cupcake
​
This project was a 3-week process of re-structuring and re-designing a desktop-sized e-commerce website, presenting an interactive prototype, and explaining the step-by-step process to get there. Before re-designing, a full research of the current website was conducted, by thoroughly looking and clicking away at each current feature of the site. By doing this, I was able to generate some information that assisted me further along in my project. I started by taking screenshots of the current site, focusing on the flaws and writing down questions when something arose. For example, “Where is the cart?”, “How do I get back home?”, “How can I choose different flavor cupcakes if I want to order a dozen?”. Aside from navigating the site, I also noticed that the images chosen to represent their products did not convey aesthetics and were not pleasing for a gourmet cupcake website. From here, I was able to move along and perform a competitive and comparative analysis.
Duration: 3 weeks
Team: Solo Project
Role: UX Designer, Researcher
Tools: Figma, FigJam, Canva, Google
Competitive & Comparative Analysis
I created a comparative feature inventory chart alongside some of the most popular and well-known cupcake sites, such as Sprinkles and Susie Cakes. This chart provided me with more insight into what other e-commerce sites are doing with their website that Toronto Cupcake currently lacks. Being that Sprinkles and Susie Cupcakes are e-commerce sites from the US. I looked around at other local cupcake sites that are currently the real competition for Toronto cupcakes. Those websites show a more unique and flavorful image and a better navigational feature that provides a seamless experience for the users. By gathering this information, I knew that this was something to add to the redesign of Toronto Cupcake.
Synthesis
Before sketching and putting down ideas on paper, I needed more information and real-life data. I reached out to 4 random people to get their thoughts and opinions on specifically ordering cupcakes/ cakes online. By giving my interviewees a short scenario, they understood that the following questions were solely focused on online purchases. 100% of my interviewee came to wanting quality when it comes to their desserts. Pictures can say a lot online, but can the look support the taste? All four also mentioned that reviews and nutritional facts are important to them, as well as the convenience of paying; they expressed that with all the technology that exists, consumers should be able to pay with ease through all web platforms. After finishing my interview, I transitioned into affinity mapping to conclude with a persona. Explaining its needs, wants, and frustrations when it comes to purchasing cupcakes online. Which then led me to create my statement problem to finalize this step.
Persona
Card Sorting
Because Toronto cupcake consists of many different flavors of cupcakes, I listed them all and had more people sort them into categories they feel fit them best. The card sorter made up categories and cards were then placed into those categories. After collecting data, most of the card sort were very similar regarding the categories given. 25% of my card sort data came back with something a little different. However, since most of them had similar conclusions, I could move along to site mapping; this was the beginning of my sketches and generating a user flow.
Site Map
The card sort assisted me with creating a site map to begin the phase of finally re-designing the website. Because Toronto Cupcake lacked the ease of navigating their consumers through their site, I knew that this was needed to have and a consistent flow through out. I was able to add 3 main navigations from the home page that lead to the product listing page into each product description page. I also added the convenience of being able to fill out a custom form straight from the home page, especially since Toronto Cupcake is highly known for their custom orders. A navigation into the “About Us” page was also included as they work well with big corporations on catering custom orders, as well as their contribution to serving their community. I drew up a rough sketch of the new site and how I wanted the layout and the look to be, page by page. By creating this, it made it easier to begin my wireframes process before prototyping.
Revised the landing page with CTA and added a more refined PLP.
Design Decision
I synthesized a user flow and a rough sketch to give me an idea of how a user might navigate the redesigned website. As I built the wireframes along with a prototype, I was then able to use this to start a usability test to see how this all works out. After observing a few usability tests, I knew what I needed to add and which feature each user failed to use. 50% of the users were led to click the “quick add” of their product straight to the cart without looking at the product description page. While one did, that user also used the “quick add” feature from the product description page, leaving me to realize that was something I would want to keep. Users also showed that they were going straight to the products rather than viewing the “About Us” page, or did not bother to look at the custom form. 25% of the user clicked on the quick pay with Apple Pay, and one checked out by entering their credit card information.
​
After researching and synthesizing, I proceeded to add colors and images to finalize the website. Toronto Cupcake previews website consisted of only a pink and white color palette. With the redesign, I wanted to keep the originality of the site by keeping the pink tones, but added a secondary color of teal blue. The teal blue was created to make the website to pop and add fun to the site. Call to actions, an “About Us”, “Custom Orders”, and “Delivery” interactive images were added as well to continue highlighting what the business is known for. A global navigation was added to help lead the consumers easily to where they would like to go. This navigation leads consumers to the product listing page where they can purchase quickly, add, and customize their orders and a quick view of their cart. The home page allows them to sign in if they are returning customers, a search bar, and a location icon for a direction to the store front and/or contact for more information. For convenience, apple pay and google pay was added to the checkout page. Some images from the original site were replaced and the logo was kept the same. Below are the before and after of the e-commerce site redesign.
Included a PDP with nutritional facts, and a quick "add cart" button.
Added an easier cart view, and log in for returning customers.
Less customer information needed when checking out and options for Google Pay or Apple Pay.
Wireframes
During my wireframe process, I made sure to focus on the CTA missing from the previous site. Landing page, a more visual PLP and PDP, as well as the convenience of adding Apple Pay and Google Pay. By me adding these features, it had already enhanced not only the site but also visually by updating the product images and creating more depth in by adding a shadow box and strikes. As I continue to create the wireframe, I begin to realize that moving into HiFi would be seamless with the pages all aligned. I also wanted to continue the cleanliness of the images without cluttering the page too much. With the images being clean, the original pink color was still very much visible.
Key Takeaway
Three important takeaways from this project:
1. Call to action is a must-have on the homepage
2. Always have consistency in the navigation throughout each page.
3. Alignment and organization - a repeat check up on each page is a must, something will always go out of line, and having organization as you work through each wireframe will reduce repeat actions taken.