CAKE CREATIONS: Online Cake Ordering Web App

To better understand CAKE CREATION’s customers’ needs, goals, and frustrations, I spoke to them directly. I observed the flow of traffic, the items for sale, the layout of the shop, and their online presence on social media. Talking with the owner and staff, I conducted several interviews in the bakery with customers who had stopped in and spoken to them about their experiences with CAKE CREATION.

I also spent time talking with CAKE CREATION’s owner about the business and what he thought a good website could do for them. He was happy with using social media to get the word out to customers about fresh treats and seasonal specials but agreed that a formal website could be a good place to keep their menu. Following interviews, I gathered all my notes and created an empathy map to understand patterns around customer needs, goals, frustrations, and behaviors. From there, I was able to infer insights that led to identifying customer needs.

• User needs reassurance that no matter what they choose at CAKE CREATIONS, they won't be disappointed in the quality.
• User needs to be able to anticipate what they can choose, no matter when they visit.
• User needs to feel that the commitment to a local business enriches the community.

These needs served as a navigation point for my work going forward. The information I uncovered helped me realize I needed to do more to make ordering easy and engaging for busy users. Once I realized this, I had a clearer idea of how to move forward.

I began my research by looking at independent bakery market trends, which helped me understand the national market and begin thinking about CAKE CREATIONS’ target market. I then researched the local market competition, and looked at the websites and customer reviews through sites like Yelp, for CAKE CREATIONS’ direct and indirect competitors

Based on this research, I developed a provisional persona. The profile represents CAKE CREATION’s customer base and helps me to begin thinking about customer needs, goals, and assumptions to test.

I moved into reframing Adrianna’s needs as design problems by generating a set of problem statements and user story questions that led to brainstorming ideas that respond to user needs. I quickly brainstormed ideas by setting a timer for each question and quickly generating ideas that would respond to these goals.

Utilizing the data I gathered from my user interviews, and research, I was able to create a user persona (shown above) and user stories. Creating these personas allowed me to humanize the target user and assisted me in identifying their needs, motivations, and frustrations.

With user goals and needs established through research, I created a chart where CAKE CREATIONS’ business goals, the user’s goals, and technical considerations were gathered in one place, and identified where the goals intersected. By focusing on these overlapping goals, I was able to create a Product Roadmap.

To clarify the ideas generated during brainstorming, I listed priority features in the roadmap. I now had a plan to move forward with the site's goals and priorities in mind. Metrics were added to track the features' usability.

With a clear direction based on user research in place, I laid the foundation for the CAKE CREATIONS website by first defining its architecture. I created a sitemap showing necessary pages and a user flow that examined the steps a user might take to navigate the website, including the starting points and goals of different users. A task flow also helped show the path of user choices from the entry point to task fulfillment.

Next, I started to sketch. After quickly generating some low-fidelity responsive wireframe sketches, I turned to create these mid-fidelity wireframes in Adobe Xd. I created the site's essential pages, drawing from my user flows, sitemap, and research, in preparation for user testing. Example screens are as follow:

Sketching the app ideas gathered at the stage of brainstorming helped me to translate the required features into more understandable solutions that were dry to ran so the stakeholder could understand easily. Moving ahead step-wise from sketches to low fidelity wireframes to describe the flow of the app and the logical structure of the elements that defined the features of the application. Each case was rapidly prototyped into wireframes so we can understand the flows and ultimately define the information architecture of the product.

To be able to know if the solutions I arrived at after my brainstorming session really meet the needs of the target users I moved my ideas to design some low-to-mid fidelity prototypes that I can test with users and be able to obtain their feedback and improve on them as soon as possible.

After completing my mid-fidelity wireframes, I plugged them into Adobe XD and created a prototype for user testing. I tested the prototype with five users. I asked them to complete a couple of tasks in order to test navigating the website.

Through usability testing of the prototype, a few patterns quickly emerged. I had a major assumption tested and disproved here! I had included the bakery’s address and store hours in the footer of the site, believing that this was a common design pattern to which users would navigate naturally. Instead, every user selected About from the navbar when asked to find the bakery’s information. It was clear that this information needed to go there too! Gathering some notes, I created an affinity map to show exactly how the patterns and pains of users led to valuable insights that I could use to revise my prototype.

After making priority revisions based on insights from user testing, I was ready to re-envision the Cake CREATIONS’ website with refreshed branding, color palette, and images to complete the responsive design. CAKE CREATIONS wished to maintain their logo for visibility, and color accents on the site used the Burgundy associated with their branding

I created a mood board with an ideal color palette, typography options, and adjectives associated with CAKE CREATIONS’ and their brand. A further refined style tile gathered the typography choices, logos, color palette, and some of the images for the site in one document. Having defined CAKE CREATIONS’ refreshed branding and gathered images to express their commitment to quality through good food, I updated the wireframes into high-fidelity designs.

I designed the CAKE CREATIONS website for desktop first, for usability testing. After finalizing the designs, I created the responsive counterparts for each screen.