Make It Sweet is the largest cake supply store in Central Texas and has been in business for over 30 years. They started out as All in One Bake Shop, but when they moved their store to a bigger location, they rebranded as Make It Sweet. Jennifer and Randy Bartos own the shop and have asked for an update to the website. Currently the website is outdated and disjointed. They had a designer refresh the online shopping pages of the website, but they’re not cohesive with the other pages of the site.
Jennifer and Randy would like to build the branding of the website around the current logo. They want to make it easier for users to search and buy baking supplies using the redesigned website, thereby increasing online sales. The process of finding and booking classes needs to be finetuned. Finally, they want to build a baking community where users will come to get ideas.
I designed a brand for Make It Sweet around the current logo and build an e-commerce responsive website with category tabs where users can search for classes, get recipes and ideas, and shop for supplies.
I completed this project for DesignLab's UX Academy. While Make It Sweet is a real company, I did not contract with the owner to redesign their website.
This project developed after reading through project briefs presented by DesignLab. It was suggested the project seek to help a local shop, possibly a bakery, and Make It Sweet immediately came to mind. As a cake pop creator, I have frequented Make It Sweet for my supplies and have attended a few of their classes. They run a very successful business and their current website doesn't reflect that.
I began by researching other cake supply stores who are successful in the organization and categorization of their e-commerice site. My research further analyzed other hobby companies who offer classes to determine the strengths and weaknesses of their online booking flow.
To discover who the user is, I developed a survey. From the survey, I wanted to discover how people search and shop online for supplies as well as how they sign up for classes related to their hobby. My preferred target audience was the baking community, but I found I needed broaden my audience to hobbyists in general to be sure I had enough data.
After my initial research, I worked on coming up with the person that would represent the user. I created several provisional personas before narrowing in on one personality. Meet Hannah. She is a cake decorating hobbyist who frequents Make It Sweet for not only the supplies for her hobby, but also the classes to learn more about her hobby.
In an effort to preserve the content of the original website, I create a site map to establish the pages currently part of the website as well as new pages to build and design to meet the business goals.
After establishing the structure of the website, I began zero in on what part of the website I would design first. My focus was to design a landing page and a process to allow users to browse and book classes. Beginning with hand-sketched wireframes, I created clear sections to explore variations of content for each section. I found myself, at this early stage, drawing design elements that would create character and add charm. From the hand sketches, I created low-fidelity wireframes of the homepage and the classes page in Sketch, then added additional screens for tablet and mobile to ensure the design was responsive.
Next I designed the UI elements around the existing logo knowing the owner was committed to it. It is the sign on the front of the store and is present in all their marketing. The dots in the logo pay tribute to sprinkles, a staple in cake decorating, but also communicate a playful vibe. I added a muted backdrop of these sprinkles thoughout the landing page as a way to carry the brand's style and create cohesion. I also designed fun frames around the classes images that speak to the doilies on which cakes are places for decoration purposes. The style guide includes the color palette that was developed around the logo as well as typography choices.
A UI kit further defined the brand complete with design patterns. On the classes page, I created a design pattern that mimics a traditional recipe card. Each category of class has a tab that opens a file of cards with the individual classes for users to browse.
High-fidelity designs were created in Sketch for desktop, tablet and mobile screen sizes.
_UI.png)
I conducted usability tests with 3 participants. All three were done in person. I recorded all sessions for the purpose of taking detailed notes later. I wanted to observe the users as they nagivated throught the prototype. Their task was to book a “Mirror Glaze” cake decorating class, select a date of Sat, Oct 10th in the afternoon, choose a quantity of two, add it to the shopping cart, and checkout. During the task flow, the user was asked to express their thoughts and feeling out loud.
This project ended after the first round of usability testing, but if this were a real project, there were several key findings that would guide me in future iterations. All of my participants found the webisite easy to navigate and were able to complete the tasks without much hesitation. The biggest pain point was with regard to choosing the date and time. I made the mistake of making all four date options and all three time options the same. This was the first time I conducted usability testing on a low to mid-fidelity prototype and I overlooked this. While some elements were duplicated for the sake of time, this was one place I should have added detail. Another thing I would iterate would be to change the message from “thank you for your order” to “ thank for signing up, see you soon.” Even though the checkout flow might be the same for buying classes as it is for buying fondant, to the user, it is different and I think there’s value in communicating this through feedback. Finally, it was pointed out that there should be some way to communicate to the user how many spots are left on a given date and time, in case the user is wanting to purchase a class for several participants. This would limit the availability and the user should know this.
If I had more time to continue working on this project, not only would I complete these iterations, but I would build and test more pages of the website with the goal of creating a full-functioning website.
