Shaping Clay Planet

The business

Clay Planet is a local, independent ceramic and pottery supply company located in Northern California. While offering an impressive selection of products at their brick and mortar location, they also have an e-commerce website that "ships any product, anywhere!". As the kiln, clay and glaze experts of the clay community, they proudly serve customers ranging from teacher, students, artists and hobbyists.

Understanding the project scope

Reimagining the shopping experience

Like many companies adapting to the COVID pandemic, Clay Planet's main stream of business shifted to online sales since many stores were affected by lockdown safety measures. Many local ceramic studios still need materials, and Clay Planet's will call option allows customers to place an order online then arrange a pick-up.

The redesign of Clay Planet's website focuses on 3 objectives:

Create a user-friendly and effortless shopping experience

Reorganize the navigation and layout to be intuitive

Design a streamlined checkout experience

Initial research

Why is this important to solve?

Clay Planet's homepage contains an overwhelming amount of information ranging from product categories, specials, services, directions and store hours. The layout feels cluttered and is confusing to follow, resulting in frustration and even discouragement for a user to purchase a product at the detriment of the business.

The experience of browsing or searching for a product, seeking information regarding store hours or workshop sessions, and checking out is very scattered.

For this reason, the website's could benefit from a much needed redesign.

How might we improve the shopping experience for new users in a way that encourages exploration and a successful checkout?

Problems with the home page

Before conducting user interviews,

I analyzed the current state of the website with a heuristic evaluation to identify possible violations and key pain points users faced. This led to either a positive or negative experience for first time customers.

Overall, I found a few issues on just the homepage alone, specifically confusing navigation, an overwhelming amount of information, as well as poor alignment that made it difficult to articulate different sections.

The product pages suffer from a lack of typographic hierarchy and a poor use of negative space. Product name, description and price tag and options are all dispersed resulting in a hard to scan f-shaped pattern way of reading.

Opportunities in the competitive space

I then took a moment to articulate how similar competitors organized and sold their products. This research was valuable since it gave granular insight to see how other companies selling similar items provide a successful shopping experience. My indirect companies - Allbirds and Microcenter, were helpful to examine clean and intuitive organization since both business sell hundreds of products (within various categories).

I identified which features are important to include in the final design:

• Clean and modern homepage
• Dropdown navigation banner
• Well-organized and detailed product pages
• Breadcrumbs in checkout pages

Recognizing the user

Who is shopping?

In a broad sense, it is easy to generalize the type of consumer browsing Clay Planet's website - someone who is looking to purchase ceramic and pottery supplies.

However, we need to think deeper to understand: What are their shopping habits? Do they research prior to purchasing, or rely on product information and reviews?

User interviews and task analysis

To better understand the habits and requirements of a user shopping for ceramic and pottery supplies, I generated a few questions for interviewing. I spoke to a total of 3 users ranging from practicing pottery in their spare time, to another creating ceramics as a side business. Their responses helped me gain insight regarding opinions and behaviors of shopping on a website.

Additionally, I created a task analysis plan to identify the flow of locating and shopping from Clay Planet's website. These steps instructed a user to search for a specific product, add it to their shopping cart, and select the local pick-up option through guest checkout.

While all users were able to complete the task successfully, they expressed concerns regarding slowdowns throughout the experience resulting in a 4 minute and 35 second average completion time.

Assessing user satisfaction and feelings

Journey Mapping

A visual representation of Priscilla's experience when visiting Clay Planet. We can see her initial excitement when opening the website for the first time, but is then met with frustration when she cannot find what she is looking for, quickly. Here, we can empathize and discover what improvements are needed for each phase to lead to a successful journey.

Beginning the design

Before diving into the wireframes,

I wanted to take a closer look at the browsing experience. From my task analysis, I found that all users default to looking for products by the search bar. None of them opted towards the "Categories" list on the left hand side which serves as the main form of navigation. When asked, they replied that it would be faster to search and they were discouraged of browsing because of how long and dense the list is.

Instead of having a vertical list, I proposed an improvement to the navigation by having a dropdown menu - similar to what is seen in competitors. The new dropdown menu would both simplify and clean up the experience, encouraging users to browse a category they would be curious about.

I created a site map to outline the header navigation and the subcategories for which respective products would fall under. Because of the sheer amount of items, it was difficult to keep it somewhat condensed.

View Site Map

Next, I created a user flow outlining the decision points and steps a user follows through completing the task of purchasing and confirming an order.

Visual guidelines

Shaping the design

After sketching out ideas for various features and screens, I created a simple visual guideline that adheres to Clay Planet's Navy and Light blue color scheme, along with choosing Roboto as the typeface - a font that is clean, modern and versatile.

Implementing feedback

Refining the final product

Overall feedback from preliminary usability testing was positive and users expressed a much better sentiment when browsing the landing and product pages. All participants were able to complete the task of checking out multiple products without any problems or failures at an average of 1 minute and 35 seconds.

From their feedback, I iterated changes to create the final design.

Reflection and takeaways

How did users feel?

Although the main challenge of the project was to redesign an existing website, the beginning product was functional albeit inefficient. Speaking and testing with users who noticed an improvement to the experience through the final prototype marked a degree of success and satisfaction. The overall positive remarks are encouraging to continue building upon the design further down the line.

Background research is vital

As my first redesign project, the foundation of most design features was based on the insights found in conducting background research. Assessing competitors and learning about user habits and needs help me focus on implementing and iterating changes in the different stages of prototypes.

Consider the business impact

Since the final design was conceptual and not shared with the actual business, I am unable to know how much of an impact the redesign has on the company and its customers. If the product was to go live, I would collaborate with the business owner and carefully monitor traffic and sales to see if the redesign has been beneficial.