flying_mock (12).png

Overview

Hey, Cookie is a local business in San Francisco that offers handmade treats and a fun, personalized delivery experience.

But, this intention was not translated in their website. There was no structure or hierarchy with the information presented and was very outdated. The brand’s identity was lost and there was no efficient process in place to order.

I uncovered the following business needs:

  • Motivate current customers to continue purchasing from the website

  • Increase brand awareness and identity to allow them to reach new customers

Responsibilities

  • Ux research

  • Visual design

  • Interaction design

The Problem

How can we create a better user experience for ordering baked goods online?

How can we bring awareness to the brand’s identity and direct new customers in the right direction?

The Solution

Redesigning a responsive website that aligns with Hey Cookie’s brand identity and offers an intuitive interface for online ordering helping users easily navigate through the website and place an order efficiently.

Home

Guiding users with the order now CTA button and featured items upfront allows users to place an order efficiently. New users can easily learn more information about the business.

New Website Blue Mockup Instagram - Laptop (1).gif

Navigation Menu

Incorporating a menu section and catering section allows users to easily access products offered and submit a form for catering needs. Custom krispies was separated to its own section to allow users to easily submit an order through a form. Adding the check delivery feature allows users to easily check if they are eligible for delivery.

Menu

Allowing users to view details and also adding dietary labels to each product makes it easier for users to find the right products for them. Adding a search bar and filters also limit the scrolling needed.

Shopping Cart

Adding a shopping cart allows users to view or add more items into their cart before deciding to make a purchase.

Understanding my users

Users were asked to complete a few tasks so I could test the website’s usability as well as questions about their experiences.

Some of the pain points expressed:

  • Confusing Navigation Menu

  • Couldn’t figure out how to place an order

  • Trouble finding reviews

  • Spending more time than intended to place an order

  • Having to scroll a lot to find something

  • Lack of item descriptions

Design Decisions

Sketching out ideas

Wireframe Sketches

I explored different layouts by sketching out several iterations of my solution. This helped me brainstorm possible ideas in an efficient way before moving on to the UI elements.

Iterations of homepageHere are the design tradeoffs:Iteration #1: can’t access featured items on the homepage, no information about businessIteration #2: too much scrolling required to see reviews, allergy info may not need to be prioritizedI decide…

Iterations of homepage

Here are the design tradeoffs:

  • Iteration #1: can’t access featured items on the homepage, no information about business

  • Iteration #2: too much scrolling required to see reviews, allergy info may not need to be prioritized

I decided to go with iteration #3 because it is the quickest way to access the menu. The reviews are also easily accessible and visible.

Iterations of menu pageHere are the design tradeoffs:Iteration #2: too much white space, requires more scrollingIteration #3: product images are too smallI decided to go with iteration #1 because it allows for users to view the product images easily…

Iterations of menu page

Here are the design tradeoffs:

  • Iteration #2: too much white space, requires more scrolling

  • Iteration #3: product images are too small

I decided to go with iteration #1 because it allows for users to view the product images easily. It also optimizes space.

Testing the flow of my designs

Users were also asked to complete a set of tasks, these were common issues that arose:

  1. Unaware that clicking the product image would navigate to the product details at first glance

  2. Users skipped the delivery date and went directly to choose the delivery time

  3. Users tried to close the shopping cart first before clicking go to menu

  4. Users didn’t expect to input their delivery information so early on in the process

  5. Users didn’t think the filters looked apparent

My Solution

After iterating on the priority issues, here are some of the final screens:

 Learnings

While conducting generative research, I realized that I didn’t have access to as many people as I hoped for, so if I could’ve gone back, I would’ve reached out to my stakeholder sooner.

Walking my stakeholder through my process not only helped me validate my design decisions, but also helped me practice collaborating with others.