Research

Before designing the website, I began by researching 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 compared some larger nation-wide candy companies online presence to compare and contrast the UI design.

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. A decision was made to use these 4 personas throughout the design process instead of creating a Primary Persona because purchasing candy is something that is open to anyone.

Define

From the research, I found 2 problems:

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

2. There are many competitors where customers could purchase candy.

This lead to thinking about how can I make it easier for users to learn about Christies Candies & Mints products and visit in person or online? The solution is to build a responsive website that features the history of the store, products with clear descriptions and statuses, and essential information such as hours, address, and contact information.

To help define how users would interact with website, I started by creating the main task flow where users would find and purchase candy online. This task flow was then used as the basis for the user flow to visualize how a user could navigate Christie’s Candies & Mints. This helped determine what pages were needed as users took different paths and to discover what they would do on the webpage.

The sitemap was created based upon the flows and helped to conceptualize how users would navigate the website and how material could be chunked together.

Design

Using the research and defining artifacts, I sketched some layouts for the sitemap pages. These are the screens that a user would interact with when finding information about Christies Candies products, location, and history. The key page is the landing/homepage because this is where users would start their search of christie’s Candies webpage.

Using the sketches as a starting point, I built out Low-Fi Wireframes for key screens to help inform the final layout and to receive user feedback based on the task flow of purchasing candy online.

Since this is a company that has been established for over 50 years, they already have a logo and colors established that was included in the branding style guide. It was important to create a UI toolkit with their color palette and other design components used on this website.

All of the above was used to bring together the Mid-Fi Wireframes that would eventually be used for the prototype testing.

Final Thoughts