Reinvigorating Super Silver’s Shopify

Super Silver has been Santa Cruz's Favorite shop for stunning jewelry since 1995.

Year

2022

Industry

Fashion & Accessories

The work I did:

UI & Visual Design

"Leave boring behind with our stunning selection of sterling silver jewelry"

Intro

Super Silver is a California-based Jewelry retailer specializing in offering an amazing selection of sterling silver jewelry. I was hired to the project to refresh the main pages of the website, maintain the system of categorizing the inventory, and publish the new theme.

View Website

Team

Digital Marketing, Research, Copywriting, Project Managment:
Isabel Gautschi

Tools and Methods

Shopify CMS, Figma, Photoshop, Wireframing, Prototyping, Micro-copywriting

Goal

Reinvigorate the Super Silver online shop using a purchased Shopify theme to refresh the aesthetics, increase navigability, and improve the user experience of their website.

The Low Down

Analytics research was conducted by digital marketing specialist Isabel Gautschi. The key insights she gleaned were:

The majority of users viewed the website using mobile.
Users also tend to land on the rings collection page, earrings collection page, and the Santa Cruz location page from Google.
It was discovered that users were adding items to their carts, but there was a high percentage of cart abandonment.

What’s Up with the Abandonment?

We reviewed the checkout flow on the previous version of the website and found it unclear and confusing, causing a major pain point.

Consider This

The client had already purchased a professional Shopify theme and were invested in implementing it.
The client had spent significant time on using Shopify’s native tagging system to categorize their vast inventory and didn’t want to lose it in the update.

Testing Usability

Isa and I thoroughly tested the “adding item” and “checkout” flow of the chosen theme to ensure that they were clear and straightforward.

Target Audience

Super Silver caters to fashionably adventurous people of all backgrounds, genders, and sizes, who are seeking stylish, silver jewelry at a range of price points.

But was that their visual story?

Their home page featured beautiful jewelry, but it did not have images of people enjoying their jewelry to emotionally connect with, and looked more like a generic collections page.

Inspo

I looked at a variety of websites, but took cues from three great sites belonging to companies that are at different stages of their development:

Tiffany & Co | Metal x Wire | Savage X Fenty

Talk to the Audience

I wanted to pull in both more images of diverse people showing off their slick, silver pieces, as well as afford the company more sections to promote fun events, seasonal deals and collections that speak to their audiences interests, such as gem lore and astrology.

Visualizing the Updates

I created fleshed out mock-ups of the pages I was tasked with redesigning in Figma. I did not create a full prototype, but did add an interactive demo of the “Mega Menu” to showcase how the existing header menu would be reorganized into a dropdown in the simplified menu. Upon further exploration of the architecture of the Shopify site, I noted there was no dedicated “Contact” page for the Online Store, and added one in as a simple wireframe.

Home Page Figma Web Mock-Up

Home Page Figma Mobile Mock-Up

Challenges

The client faced unexpected logistical challenges causing delays in gathering photographic content for sections approved in the design.
While the client had amazing images of their jewelry, they did not have as many usable images of people wearing their jewelry as I had hoped.
The peculiarities of the chosen theme, and some requested alterations caused last minute tweaking to the original mockup design to ensure readability.

Final Product

The client was eager to relaunch their site in time for the 2022 holiday season and so an agreement was reached to launch without some of the proposed design updates to meet this need, particularly the improved UX of the new checkout flow. I also adjusted the application of the color palette to compliment the updated logo which was provided over the course of the project, and some of my suggested microcopy was incorporated into the home page.

Mobile

Desktop

I added a carousel hero and more sections to feature events, seasonal deals, and promotions to add more interest to the home page, and furnished multiple CTAs to invite the user to explore the shop’s plentiful offerings. There is a top banner which affords space for a short message and room from links to social media and I simplified the header menu and shifted the old header menu to a dropdown mega menu with links to featured collections. Lastly I separated the contact form for the online shop from the pages dedicated to each physical location for clarity.

Underneath the Hood

The Shopify 2.0 platform does not offer a built-in way to display the tags that are used to categorize inventory to customers. This was a problem because the client depended on tags to help users filter their inventory. The solution was a purchased “search and filtering” plugin, which I ensured was properly integrated into the filters of the client’s purchased theme.

Lessons Learned

For future, similar projects I would ensure I have access to the client’s finished image / visual content before the design phase to balance designing to meet the client where they are while advocating for beneficial upgrades. For a project of this scale I would also design wireframes for all pages and a higher-fidelity mockup to represent look and feel. I would do this to be better equipped to offer and restructure design tradeoffs to respond to the evolving needs of the project and client.

Previous Project