HALSTEAD WEBSITE
Research, Design, & Prototyping | 2022-2023
HALSTEAD WEBSITE REDESIGN
In 2022, Halstead set out to modernize their website. I was tasked with creating the wireframes, mockups, and design system that would guide the development team. Their goals were to give the site a more modern look, improve usability for customers, and streamline the navigation compared to the previous version.
CONTRIBUTIONS
Research & Prototyping
UI/UX Design
Responsive Design
Icon Design
Photography
PROGRAMS UTILIZED
Illustrator
Photoshop
Figma
COLLABORATORS
Janelle Hinesley – Sr. Graphic Designer
Kelli Greene – Manager
Ashley Maldonado – Digital & Email Marketing Specialist
Sylvie Alusitz – Studio Coordinator
Znode – Web Developer
ABOUT
HALSTEAD
Halstead is an eCommerce jewelry supply firm that caters to both large and small studios in every facet of the jewelry industry (pun intended). Halstead believes in the power of small businesses to support hard-working families who want to live life on their own terms. Small business drives our economy and the American dream for many entrepreneurs. We know how tough it is and we respect the tenacity it takes to build a jewelry studio. We endeavor to be an advocate and indispensable supply chain partner for small jewelry businesses around the world.
MY ROLE
I spearheaded the creative direction of the new website. As such I was responsible for researching, designing, and prototyping several key pages for the new website, ensuring they aligned with Halstead’s updated goals and user needs. Once the ideation phase was complete, I established a design system and style guide to ensure the transition from ideation to prototyping to development was smooth and seamless.
RESEARCH & PROTOTYPING
With the evolving landscape of online retail in recent years, Halstead Bead transitioned from a strictly wholesale jewelry supplier to serving both wholesale and retail customers.
This shift required a significant update to the website, including:
- A sleeker, more modern design to attract younger customers while still appealing to long-time users
- Improved navigation and product filtering to help all customers find items more quickly and with less frustration
- New landing pages tailored to the four primary customer segments Halstead serves
- Multiple features to introduce customers to new or overlooked products they might not otherwise discover
UX PROTOTYPING
Once the main issues of the existing site were identified and the goals for the new design were clear, I began building a low-fidelity prototype of the updated website.
The UX prototypes included key pages such as the homepage, a customer persona landing page, the blog homepage, a product category page, and a product details page.
MENU DESIGN
Halstead needed a multi-menu design that would be easy for our customers to navigate and would work with the multiple subcategories we have of our products. My boss did not like the mega menu designs, so anything like menu of Topo Designs was out.
After looking at several websites, I settled on a design similar to Verve. We liked that the submenu stayed a single line, but we wanted the submenu to show under the masthead image so customers wouldn’t have to scroll too far up to reach it.
Desktop Menu
Original Halstead menu design
Menu design inspiration
New menu mockup
Mobile Menu
Original Design
Inspiration - Tiffany
New mobile menu mockup
UI DESIGN
The development of the website was going to be contracted out, so my next step after creating the UX prototypes was to create a UI guideline for them to follow.
In addition, I began sourcing images and creating icons to fill out the wireframes. Halstead had a few alterations, but were overall pleased with the new, modernized style.
HOMEPAGE
I cleaned up and modernized the new home page so that it now features a larger masthead and a reduced amount of copy. The product categories seen below the former website masthead didn’t lead to product pages, but info pages. The new design now features actual products and product categories higher up in the page.
Halstead wanted to create and feature info pages for the four main categories of customers we serve, so that became the main feature below the masthead.
BLOG HOME PAGE
For the new blog design, the marketing team wanted to show customers more recent articles in a smaller space, so I redesigned the first section after the masthead to show several articles in one area.
Another update was creating sections to feature articles from all of the blog categories.
PRODUCT CATEGORY PAGE
The category page design was changed to better match the rest of the website by including a masthead. We also made the subcategory images more evergreen by switching them from compilation images to icons.
To allow customers to focus more on the products, we reduced the amount of information showing on the page by moving the filter menu to be a sticky dropdown option at the top of the screen.
PRODUCT DETAILS PAGE
Like the other pages, I simplified the item detail page. Before, customers would be overwhelmed with the amount of information showing on the screen. Now the item details are shown via an accordion menu.
RESULTS
The redesigned Halstead website featured a cleaner, more modern layout with simplified navigation and a sleeker overall look that better reflected the brand’s evolution. Halstead saw an increase in traffic and conversion rates as well as a decrease in abandoned carts.
Ahead of the launch, we ran a social media campaign and other outreach efforts to give customers a heads-up about the need to reset their accounts. We also shared previews of the new layout and navigation to help ease the transition. Thanks to this proactive communication, the launch was smooth and met with positive feedback from customers, who appreciated the improved usability and fresh design.
