Role:
UX Developer
Tools:
Figjam, Slack, Figma, Visual Studio Code, SASS, JavaScript, ISML, Google Lighthouse
Timeline:
August 2024 to December 2024
Team:
Felix Madsen, Keith Elder, Kerith Reid, Bernard Lawrence
What’s on Fire Mountain?
Fire Mountain Gems and Beads is the largest jewelry crafting supplier on the west coast of the United States. Their website is an e-commerce site that also functions as a blog or newsletter about the company.
Optimize, Optimize, Optimize
The Fire Mountain Gems and Beads company has prided itself on a user first mindset long before they had the opportunity to build a website. Unfortunately, site performance did not reflect this commitment to their customer base. I wanted to remove as many pain points as possible for returning customers and make the site easier to use for new shoppers.
Navigation Menu Overhaul
The first pain point I found on this project was the amount of clicks needed to find a specific product. Originally, the dropdown menus could only be engaged with a click, with further clicks within the dropdown menu taking the user to a specific catalogue. I had these menus drop down when the user hovered on them, instead. I also added highlights to help the user navigate and slight delays to avoid jarring changes to the page. The sale button was highlighted red on hovering and had red text normally because that’s where most returning customers wanted to go. User research showed this slight delay and informative use of color made the sight much easier to navigate.
Search Engine Optimization
Our site was not being favored by Google’s search engine rankings. A quick analysis found that our site was much slower than it should have been. A few weeks of refactoring revealed redundant libraries, unnecessary javascript, and images far larger than necessary. I also applied the ‘lazyloading’ tag to any images below the fold and wrote a quick algorithm to recognize when a div was being populated from a template below the fold. These efforts improved our Search Engine Optimization Score from less than sixty to greater than ninety.
P65 Compliance Messaging
In 2024 the State of California passed Proposition 65, officially known as the Safe Drinking Water and Toxic Enforcement Act, a piece of legislation that required businesses to warn their customers if any of their products contain any products that can cause cancer or birth defects.
I added these toxin warnings to out site in a way that would make them difficult to ignore but manageable for users. I deliberately made the copy for these warnings as short as possible while still remaining informative. I was acutely aware of alert fatigue and how necessary this information was.
The warning appears in bright yellow directly above the product description and is two sentences long. This was to ensure that users read the warning as soon as they recognized what it was, rather than scrolling by it. The warning can be minimized by clicking on it, but that requires users to engage with the warning.
Key Takeaways and Future Projects
Iterative development is our only bulwark against technical debt. The Fire Mountain Gems and Beads team did the smart thing and used a relatively slow time to make changes they knew their site needed. We collected and organized the findings of our user research to leave better records for future developers.