christies candies & Mints

Responsive Website Case Study

expanding customer access online

Design a responsive website a responsive website that highlights the business’ story, highlights products, allows users to view stock, add products to their cart, and allows online checkout.

I chose this store for the project because it have been around for over 50 years and does not have an online presence.

 project overview

Background

Design a responsive website a responsive website that highlights the business’ story, highlights products, allows users to view stock, add products to their cart, and allows online checkout.

Goal

I chose this store for the project because it have been around for over 50 years and does not have an online presence.

KPIs

  • Browse in-stock candy

  • Add items to cart

  • Choose shipping address or pickup in store

  • Pay online

Scope

Product Design + UI

Timeline

8 weeks, 10 hours/week

Client

Christies Candies & Mints
Design Lab Course

The Challenge

How Can we expand the store’s visibility to increases sales
in person, via phone, and online?

Research

Goals

Understand what competitors are doing in the space

Learn how to make Christies Candies & Mints website the most useful for their target audience

Competitive Research

I began by looking at local competitors, both in store and online, to explore what makes them unique in the market to help distinguish Christies from the competitors. I also looked at larger nation-wide candy companies online presence to compare and contrast the UI design

Persona

Because my client has many return customers, I was able to work with them to discover their existing market audience. This lead to the 4 main personas that would purchase in-store or call in orders.

defining the product

Problem

1, Potential consumers may not be familiar with the store’s, its products, or its location.

2. There are many competitors around for customers to purchase candy from

How might we make it easier for users to learn about Christies Candies & Mints products and visit in person or online?

solution

Build a responsive website that features the history of the store, the products with clear descriptions and status, essential information such as hours, address, and contact information.

user flow

I created a flowchart to visualize how a user may navigate Christie’s Candies & Mints when deciding to make a purchase online. This helped determine what pages were needed as users took different paths and to discover what they would do on the webpage.

Task flow

I created a task flow on purchasing candy online.

Site map

The site map was informed by the User Flow, Task Flow, and research.

Design

Sketches:

I sketched some screens based on the screens in the sitemap. These are the screens that a user would interact with when finding information about Christies Candies products, location, and history.

The most important page is the landing/homepage because this is where users would start their search of christie’s Candies webpage.

Low-Fi Wireframes

I built out wireframes for key screens to help inform the final layout and to receive user feedback based on the task flow of purchasing candy online.

desktop

mobile

Brand Identity

The color palette was pulled from the front of the store and the awning. The color palette got strong support during the Hi-Fi prototyping test.

Usability Test

Objectives

Test how users interact with the website when using the task flow of purchasing candy online.

method

  • I had did semi-moderated remote user testing on the lo-fi prototype to and on the hi-fi prototype with 12 users.

Wireframe Hi-Fi - Desktop

Wireframe Hi-Fi - Cell

final thoughts

Summarized Insights

The purpose of the responsive website is to get potential customers to purchase candy in-store, via phone, or online. The design helps each of these users make a purchase by making sure that the phone, hours, and location are easy to find and by highlighting the product in stock. This allows users to browse the store virtually and create lists that will help them make purchases in all 3 modalities.

Next Steps

  • Handing off the current prototype to the client and for them to make a web version to prototype the interaction with the shopping cart with adding multiple items.

  • Possibly create some A/B testing to see if a design can be changed to receive more potential orders.

  • The checkout may be revamped depending on what tools the web designers use to launch the website.

What I Learned

  • Working with a client and to determine a manageable project is important to reduce scope creep.