Sunshine Cookies Website

Designing an on-brand website for a vibrant homemade cookie business.

👩🏻‍💻  Role: UX Designer
🔨  Tools: Figma, Miro, Maze
⏰  Timeline: 80+ hours (4 weeks)

Background

The Sunshine Cookies team offers local delivery to customers in the metro Detroit area. Currently, the business relies on word-of-mouth and a casual social media presence to receive sales, mostly through direct messages, text, call, and email.
‍

Research

I interviewed five participants in order to determine their desires, motivations, and  common obstacles they faced when shopping for and purchasing baked goods online. Their valuable insights from this research process would then drive my subsequent design stages. The age range of my participants was from 32 — 62. I conducted four remote interviews via Zoom and one in-person interview.

Synthesizing Participant Responses

Creating an Affinity Map of Interviewees' Insights
‍
I summarized my notes from each meeting in order to capture each valuable insight from the participants. After note-taking, I went back and summarized the key points on post-it notes and created a full affinity map for all participants.
‍
Colour coding and posting their main talking points were visual tools in helping me extract similar themes and clustering related categories among participants. These were the most shared themes among the participants’ insights:
‍
    • Habits + Preferences
     • Online Buying
     • Pain Points/Concerns
     • Thoughts on Customization
     • Specific Custom Features

Creating a Cookie-Loving User Persona

When I was generating the user persona of Melanie, I aimed to have her goals, needs, and frustrations reflective of all the valuable information my interview participants provided. Moving forward, Melanie would serve as the closest representative of Sunshine Cookies’ customer profile and benefit the most from the website's design decisions.

I revisited the key insights from my user interviews and crafted the primary pain points into features of Melanie's problem space with How Might We questions. These questions helped me ideate upon several ways Melanie would go about resolving some of her annoyances and problems when searching for baked goods options online.

Mixing various ingredients together, before we bake a solution.‍
I now had an overall idea of the hypothetical needs and wants of potential customers, such as Melanie. But it was also crucial to chat with Krista, the company owner, to understand her goals and wants for the website. After my talk with Krista, I was able to identify three main goals for Sunshine Cookies' website.

Client (Krista's) Main Goals
• Implement a streamlined order form for custom decorations (quantity, date, visual preferences)
• Display social proof (social media links and testimonials)
• Instill visual trust (photo gallery of products)

I then created a Venn diagram outlining the primary business and user goals. The intersecting points between these areas served as good starting points for design ideas. 
‍

Designing the Site Layout

The next step was to create a site map in order to start thinking about how the information will be presented on the website.

These are the main screens I designed in order to help Melanie successfully go through a user flow, which consisted of browsing the cookie options and creating and submitting a custom order request for an order of cookies.

Main Screens
• Landing Page
• Custom Orders Overview Page
• Photo Gallery Page
• Complete Custom Orders Request Form

Diagramming the User Flow

Then, with the main screens in mind, I created a user flow to demonstrate how Melanie would progress through certain points in the website. The flow would be successful when she is able to place a custom order request through Sunshine Cookies' order form.

From Sketches to Wireframes

Once I envisioned the most significant user flow, it was time to draw out my ideas!

After I sketched some rough pages in my notebook, I transformed the framework into a mid-fi prototype in Figma. The main pages included the: landing page, custom orders overview page, a complete custom orders form, and the photo gallery page.

The first version of the mid-fi prototype would serve as the initial prototype for user testing in the following stages.

Usability Testing

Now that I had a mid-fi prototype, it was time to test version one right away!

I imported my prototype from Figma into the Maze platform and created a few missions for the testers to complete. I conducted this test on eight participants via remote user testing.

The missions consisted of the following:
1. Find the photo gallery from the landing page.
2. Navigate to the custom orders overview page.
3. Read through the custom orders overview page.
4. Begin and submit a custom orders request form.

Seven out of eight participants were able to complete the tasks successfully. The participant who couldn't finish the test indicated that a certain element was not clickable to the next stage in the test, though there was an existing link for that particular element in the prototype. This was excellent feedback on how to make spots more intuitively interactive and clear. All users presented helpful and actionable insights such as these, as detailed in the affinity map below!
‍

Given this valuable feedback from user testing, I focused on making priority revisions for version two of the prototype. All of the actionable items were centered around enhancing the custom order form:
‍
• Improve typography to increase text size and readability
• Optimize layout of the summaries page for more intuitive information presentation
• Refine text copy so custom options are more clear
• Reduce the number of steps it takes to click through the form
• Increase interactivity with the progress bar
‍

Now that I had made some primary improvements in the user flow, it was time to start adding brand styles and UI elements for the hi-fi prototype!

Given that my client already possessed an established company logo, I worked to create a style guide and UI kit that were consistent with the brand colour palette and keywords.

Upon my discussion with my client about brand identity, these were the keywords that I considered when creating the style guide: tasty, cheerful, imaginative, celebratory.
‍

I then completed the whole flow of the hi-fi prototype with priority revisions and branded UI.
The relevant screens were:
‍
• Landing Page
• Custom Orders Overview Page
• Photo Gallery Page
• Complete Custom Orders Request Form

Concluding Thoughts

Designing a responsive website for my client, Sunshine Cookies, was indeed a welcome challenge. It was a worthwhile experience in trying to align the business' vision, goals, and user needs and creating a hi-fi prototype that reflects the brand and skills of this business.

With more time, the "final" prototype could benefit with more usability testing so that certain design decisions can be further refined for an enhanced user experience.

Sunshine Cookies currently does not take online orders for their cookies. However, if they were to transfer their business model to an online e-commerce platform, a checkout process is a feature I would definitely assist in adding to their website's user flow in the future.

Thank you for reading!