Crystal Way
Timeframe
2 Weeks
Role
UX Designer
Team
Solo Project
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.
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.
The first thing I started with was gathering some local crystal lovers to interview and observe for usability testing.
To determine the largest pain points of the experience of the website, 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.
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 who our main user is first.
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.
"I'm not a crystal expert, all I know is my birthstone, and maybe one or two crystals."
What to do with this new information?
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.
Research
Design
Whom do we Design 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 new Blueprint to Crystal Way
To begin building a mid-fidelity prototype of the new website, I first had to map out each page of the old one and determine what we can remove and simplify for the best experience. Here is a map of the current website.
And here is the map of the newly proposed website.
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.
Now, it's time to build the website through Figma and begin testing the prototype with fresh new users.
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.
.png)
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.
.png)
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.
.png)
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.
.png)
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.
.png)
Things I learned
Card sorting was an activity that I had never done before and was a bit intimidated by. 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.
.