The Crystal Way Redesign: A Case Study

Background

Crystal Way is a metaphysical store I go to pretty often in San Francisco. They sell a variety of high-quality crystals and gemstones. They also offer sessions with professional readers from all different kinds of disciplines.

The store is a small business with a website that has a ton of potential and great products to back it up. I thought it would be a great idea to practice some UX design skills by redesigning their website. My goal for this magical store was to improve the experience and quality of the website to (as closely as possible) match the in-person experience. With many hours spent interviewing users, and many more on Figma, I finally have a redesign I am proud to write about.

Project Overview: Solo UX design project.

Duration: Two-week sprint.

First things first, let's see what users have to say about the existing website.

To determine the largest pain points of the website's experience, I tasked some users to go through the website explore what the site has to offer, and purchase a crystal of their choosing. Here is what users had to say with their initial visit.

They were confused, plain and simple. The dropdown menu for shopping expanded into a long list of crystal names most people knew nothing about. The categories were difficult to decipher unless you were a crystal expert. Users had no idea what Smokey Elestial Quartz was or the difference between a Quartz and a Selenite.

The photography on the home page is the first impression users have of the website, and the images are not the most impressionable. Users noticed the inconsistent sizing, placement, and products on the home page.

Users did not enjoy the pixelated, low-quality photos that did not represent the quality of the crystals the shop sells.

So the two main pain points for the store ended up being awkward information architecture and a wonky homepage. To solve these issues, we will have to find our main user first.

Who are we designing for?

Based on the users I interviewed who were interested in crystals and metaphysical products, I compiled a user persona with a compilation of insights from all my users into one. Which is Olly!

The problem statement I came up with is:

Olly needs to find a knowledgeable website to help him buy crystals because it is difficult and time-consuming to research crystals on his own.

The solution for the problem could be:

By creating a hub of knowledge within the site that is easy to navigate, Olly will be able to gain crystal knowledge to help him make an informed purchase. We know this is true when we see an increase in traffic for informational pages followed by purchases from this site.

Let's start solving Olly's problem with a peek into other crystal vendors.

What do other metaphysical stores look like online?

After performing a comparative and competitive analysis of other crystal stores online, I came up with a neat little graphic to show where Crystal Way stands compared to other companies.

From the research done above, it is safe to assume that Crystal Way has a good amount of features but is lacking an intuitive organizational system for their shop along with consistent photography across their whole website.

In order to find an organizational system that worked, I looked at competitors and saw many of them categorized crystals based on their shape, and from there, users were able to organize the shaped crystals into different filters such as color, size, and price. This felt like a promising way to solve the organizational issue Crystal Way was having.

But research can only be research if backed by evidence.

I can think of crystals in shapes, can you?

Sorting crystals by their shape made sense to me, but the biggest mistake of design is seeing yourself as the only user. I had to detach myself from the experience and let fresh users do the talking.

To test if users were able to decipher shapes rather than the names of crystals, I set up a closed card sorting activity where users were able to sort different images of crystals into pre-assigned categories. These categories included: Tumbled stones, Rough Stones, Towers and Points, Geodes/Clusters, and Spheres.

After 48 hours of recruiting users for card sorting, and going through several different submissions, users had very high agreement rates of which crystal goes into which category, with each card being sorted in the correct category 50% or more of the time.

Now that we know this way of organizing crystals make sense to users, I was able to move forward with building a map of what I wanted the site to look like.

The Crystal Map

Here is a map of the website before:

And After!

The main changes made for these maps were the categories under the shop button and using our research to change it into something more user friendly.

Mid fidelity Usability Tests

After creating 20+ Wireframes of the new website, it was time to put it to the test and see if users would have an easier time going through this process.

I asked users to take a look around the site and purchase a Jade Point using the new categories I made.

Here is what I gathered from user insights.

First, categories were difficult to find, they were tucked into the corner in the top right which was done to keep a minimal look to the page. This choice did prove to not be super intuitive to users as they scrolled down the whole page in search of where to shop by category.

Second, the discovery page where users are able to browse featured products lacked a clear call to action, users did not know where to click on and what to do with the information.

So for my next steps, my goal was to improve the interface to be both knowledgeable and simple while including photography and colors that were consistent with the brand.

Mood Board

The key to a good redesign is a good mood board to lay out what the feel is for the new website, here is what I did with this mood board.

• My goal for Crystal Way is to show that photography is a crucial part of a brand's identity. There aren't just crystals in the mood board, but all things adjacent to show customers like Olly what crystals can do for you and what they look good within your home.
• I made sure to include images with good composition and high quality as an example of how photography can change a whole website's feel.
• I chose fonts that were close to the original website's design as a way to honor the original website. The combination of a serif and sans-serif also resembles the crystal's timeless beauty, knowing crystals are not going out of style any time soon.

High Fidelity Prototype!

After several hours of designing, presenting, and several cups of tea, I had finally come up with the final prototype to share with you all.

You can access it here.

Next Steps

• Now that my high fidelity prototype is finished, I plan on testing more users to see how I can take this project even further. I am always looking for more ways to simplify the experience of the user and hearing what they have to say is the first step.
• Crystal Way also sells candles, incense, and more, so finding a way to categorize those into the store's website will be another step moving forward.

Things I learned

• Card sorting was an activity that I had never done before and was a bit intimidated by. I was having a hard time setting it up and had to remake each card a number of times, but we all have to start from somewhere, right? I learned that new programs are normal in the UX field and that keeping up with the latest ones is part of being the best designer you can be. Being comfortable with not knowing a program and having the drive to learn and move forward is something I’m growing confident in with every project.
• I learned that I love UI design. I was always interested in making beautiful things, but the hours washed away when working on Figma and designing these screens. The moment I knew it, I was presenting it in front of a group of peers. I learned that the excitement with what I come up with next is another reason why UX design is so fun to me.