Role

Individual Designer

Duration

2 Weeks

Tools

Sketch, Axure, and Photoshop 

Overview

Crompton Collective is a well-know staple of the Worcester community. It attracts people looking for unique or one-of-a-kind gifts and home decor. It is also known for it’s event space and wedding venue called The White Room

 

Crompton Collective is owned by Amy Chase, a passionate seller of vintage clothes and antiques. She started her concept online through a blog called PunkySpace.com and later gravitated the business to a mobile truck called the Haberdash that she would drive to various outdoor markets and meet-ups. The success of this effort and her love for Worcester lead to the creation of Crompton Collective.

Challenge

To balance Crompton’s Collectives brand identity, store aesthetic, and The White Room business with a new compelling store experience on their website that is testable through a clickable prototype.

UXDI 11 - Lance Riley - P2.002.jpeg

Process

In order to balance out the key parts of this project I needed to have a grounded understanding of the business and its customer's motivations.

Research

Business Analysis

Competitive Analysis

Contextual Inquiry

Heuristic Analysis

User Interviews

Synthesis

Persona Development

Affinity Mapping

Card Sorting

Scenario Development

Ideation

Sketching

Paper Prototyping

Site Mapping

User Flows

Wireframing

Validation

User Testing

Clickable Prototype

Style Guide

Visual Design


Contextual Inquiry

Visiting The Shop

I started by visiting the store and taking pictures of the products they carried. I paid attention to the atmosphere within the store and who was inside shopping.

I quickly realized the wide range of items that Crompton Collective has and could see that arranging them in a useful way on their website was going to be a challenge.


User Research

I reached out to my network for people familiar with the store. I was able to recruit 4 people for phone interviews. Going into my interviews, I wanted to learn what motivates customers to visit Crompton Collective, the types of items they purchase, and where they currently shop online.

From talking to customers and visiting Crompton Collective, a customer persona began to develop. The primary customer was going to Crompton Collective to walk through the different vendors for unique gifts and enjoys the atmosphere aw well as the nearby shops. They occasionally buy furniture and enjoy exploring the shop for ideas on home decorating projects they want to start. They love shopping at Crompton Collective because of the high quality handmade gifts, friendly staff, and because they know their money is going back into the Worcester community.

 

Persona Development

  • Name: Courtney
  • Age: 25
  • She lives near downtown Worcester
  • Watches home decor and makeup videos on YouTube
  • Follows home decor, vintage, lifestyle topics on Instagram
  • Eclectic style and likes to support the local community
  • Likes buying unique items as gifts for friends and family

“Everything there when you look at it is well made”

She enjoys going to places like Crompton Collective because of how nicely curated it is and there is something new to discover each time she goes.

Courtney-Crompton.png
 

Key TakeAways

User Motivations

  • I want to find unique or one-of-a-kind items
  • I feel connected to the Worcester community
  • I like the quality of the items at Crompton Collective

Online Shopping Behaviors

  • Etsy
  • Amazon

Items They Purchase

  • Gift Cards
  • Journals
  • Beard Oils
  • Worcester Wares

Affinity Map


Information Architecture

Once I gained an understanding of the business and it's customers, I needed to begin applying the knowledge to the project. I approached the site architecture with the goal of balance between the White Room business, support for the vendors, and the new online shop. I had to reorganize much of the sites header to maintain their simple aesthetic while adding the online shop due to the existing site already having 8 items in the header. In this process I discovered several company terms that could potentially pose issues with testing for new customers. My assumption was that new customers won’t understand these terms and may find it difficult to locate items in the store or other important aspects to the business. I made notes of these so that I would be able to inquire through user testing.

I started sketching out the hierarchy of the sites information architecture using post-its on the whiteboard. From this approach, I was able to quickly try out different organizational methods and see what would be the most appropriate place for the different pages that already existed on the Crompton Collective pages in addition to the new pages that would be added for the online shop.

Once this was solidified, I could further develop the idea with a wireframe version of the site map. The updated site map helped me workout how the child categories were going to layout into the main product categories. Once this was established, I was able to create user flows based on scenarios established from user interviews. We knew from the business owner that finding information on the Wedding venue was also very important. We added this to our users flows as well for testing.

Site Map Ideation

Site Map

User Flows


Sketching

Nailing down how the site was organized was important because it told me all the pieces that would need to be designed. With this now out of the way, I could dive into sketching out possible solutions. I began with the header and footers since those would be used across pages and then filled in the home page with a variety of ways to display content that could then also be repurposed throughout the rest of the site.

Paper Prototyping

Working out my ideas on paper gave me the freedom to try out different solutions quickly before moving into more time consuming processes. With this approach I was able to pick out the best elements from my sketches and begin testing my assumptions on users.


User Testing

I showed the paper prototype to 2 existing customers and 2 people who fit into the persona but were not familiar with the business. As I had expected, the company jargon used throughout the site made it hard for new customers to complete tasks related to areas where company jargon was used. In particular, The term “The White Room” and “Meet the Makers” did not test well with new customers but existing customers had no problem with these terms.

Key TakeAways

New Customer Feedback

  • Nav bar item "The White Room" was an unfamiliar term 
  • Wanted the Sign In process to be similar to the “Thank You for Your Order” confirmation
  • Shipping Information vs billing information section was hard to understand

 

Existing Customer Feedback

  • Would like to see Apple Pay at checkout
  • Wanted to see shipping information on confirmation screen
  • Would like to have a pick-up in store option

Wireframing

After getting feedback on the paper prototype, I moved into wireframing using Axure. With it, I was able to create a realistic experience of using the website. I tested this version on 3 new customers and 2 existing customers to learn more about the terminology expected. Customers were provided background and setup to test 3 common scenarios. The scenarios used were to find a mug as a gift for a family member, checkout as a new customer, and locate the pricing for having an event at Crompton Collective. 

Key TakeAways

New Customer Feedback

  • Company jargon still an issue
  • Some links had confusing lables
  • Logo tag line distracting from logo design

 

Existing Customer Feedback

  • Liked the pick up in store option
  • Liked seeing real content in the blog section
  • Sidebar Cart design working well
hero_crompton_alt.png