Wearing many hats
Haricot Vert is a small charm jewelry and craft business that started in Brooklyn in 2020. Due to it's start-up nature, I had the pleasure of holding many different responsibilities.
Here is a brief overview of the different roles I filled throughout my time at Haricot Vert over the last year.
Jewelry Production
Branding
Events
Email Marketing
Advertising
I also started and oversaw our Google Advertising campaigns in Q4 that resulted in
User Experience Design
How it started
Online
Haricot Vert started out of the owner's living room in 2020 when she created a website portfolio to showcase her art. Her handmade charm jewelry quickly gained popularity and turned into a full fledged business.
Brick-and-mortar
After years of working with only a few employees, the owner was able to open her first brick-and-mortar store in April of 2024, located in Williamsburg, Brooklyn.
The problem
Since opening their brick-and-mortar, Haricot Vert has seen a significant rise in costs and needs to increase online sales in order to stay afloat.
Why do customers shop in store?
According to the owner, customers come to the physical store because
They want to design their own piece using the charm-bar
They are confused about how to create a custom piece online
They seek creative community and expertise
In addition to custom products, Haricot Vert offers signature styles and limited-edition collections, and hosts a café and crafting space offering workshops, open craft hours, and events in-store. The site needed to encompass their extensive offerings and make them easily accessible to users.
How competitors are solving the problem
How are our competitors helping and hindering users?
Brooklyn Charm, Catbird, and Susan Alexandra are a few of Haricot Vert's custom charm jewelry competitors located in New York City. I compared their strengths and weaknesses to help me understand what retailers offering similar products online are doing to meet customer needs and what features are working or failing, better preparing me for user interviews and highlighting what to mimic or avoid in my own product.
Who is the target audience buying these products online?
After surveying over 100 customers of varying age, gender, and location on their use of the Haricot Vert website, we found that the majority of users are
Gen Z
Female
What are their pain points when buying these products online?
After interviewing 12 customers on their use of the Haricot Vert website, we found that primary pain points are
"I found the product I was looking for but I don't know how to customize it in the way that I want to. I wish there was sales-rep support like they offer in-store."
Research findings
How do customers make their decisions?
What to purchase
Customers look for specific product materials and review photos for confirmation that a product will meet their needs and goals.
How to purchase
Customers look for ways to narrow down options and receive recommendations online where sales rep support is not typically available.
How might we help users make a purchase?
Solution
A jewelry and craft platform guiding customers through customizing products and events that specifically emphasizes the importance of creative community.
Product goals
Product features
Feature
Build-your-own customization, clear menu and search features to filter products, and menu organized by how the user prefers to shop.
Evaluating solution ideas
Is it realistic for the owner?
I sorted solution ideas based on user value and effort. The build-your-own customization visualizer
had high user value
required the most effort of any of proposed product features
Without a budget for web development, this feature felt too daunting and unrealistic for us to implement by launch. Instead, we opted to stick with a customizer that would exist on current product listings, still providing users with step-by-step cues and visual aids, like these gifs, charm charts, and photo buttons. I continued developing a full customization visualizer for future implementation.
Information architecture
Understanding user's mental models through card sorting
We wanted to better understand how users conceptualize, group, and label ideas so that users can find information where they expect it to be. To develop our information architecture we used OptimalSort, conducting a closed card sort with 7 main categories and 52 topics based on the website's current system.
Ambiguity
The categories and topics with the least card sorting agreement among test users highlighted the need for clearer word choices and hierarchy, especially considering the brand's use of poetic product-naming practices over informational
Word choice: Users struggled to distinguish between the intended meaning of words like unique vs. made-to-order, custom vs. DIY, signature styles vs. collections, and workshops vs. events
Hierarchy: Users struggled to follow the way information was organized and why certain categories were nested under others, highlighting the importance of products not being grouped from general to specific, but by how users shop
Sitemap
Iteration 1
My initial iteration of the sitemap was focused on everything I thought might contribute to solving user needs.
Iteration 2: MVP
My second iteration of the sitemap focused only on what was absolutely necessary for Haricot Vert's website to launch while meeting user needs.
Some additional features were added to accommodate specific requests from the client.
Flows for usability testing
When building out task flows, I had to consider that users may not know what they're looking for. I considered what users would do if they knew what they wanted versus did not:
Find/customize a product if know what you are looking for by using menu/filters
Determine if the product suits your goals using product information and tips
Learn about a new product that might fulfill your needs using recommendations
Wireframing
Mobile-first wireframing
Because the website is mainly used by a younger audience and new customers often discover the brand through its social media marketing, 97% of users are accessing it from a mobile device.
Therefore, we wanted to ensure that all product features would work on the smallest screen.
Visual Identity
Working with existing branding
I wanted to adhere closely to Haricot Vert's brand guidelines that I created while still giving the website a fresh new look. The owner has described their branding as nostalgic, kitschy, creative, personal, and community-driven. My goal was to make it feel less digital, heavily incorporating collage and animations to evoke the feeling of handmade art.
I also focused on use of social proof (fun photos of customers or employees in action and user-generated content) to foster creative community.
Testing the MVP prototype
Conducting usability tests
We conducted moderated usability tests using a test plan of 3 main tasks on 12 total participants, with 8 being from the target user group.
The usability tests went smoothly, with 11/12 participants able to complete all tasks without support. However, upon reviewing the test recordings, I found that there were several edits to be made to improve the user's journey to meeting product goals.
How can we revise the flow to help user's make a purchase?
Priority revisions based on usability test results
I sorted areas of improvement based on product goal impact and effort required. Some ideas were set aside for future revision due to time or Shopify's technical restraints. I prioritized low-mid effort revisions that directly impacted primary product goals:
More recommended product links: Users were looking for categories based on new, bestselling, or budget-friendly so I added more recommendations to home page
Events & workshop menu shortcut: Not all users realized you could find events under the visit us in real life category, so I added a shortcut to the menu
What recommendations are based on: Users wondered why specific products were recommended to them so I added tabs for similar and recently visited products
Cart quick-add: Users were looking for ways to quickly keep track of products they may be interested in, so I added a quick-add button to products
Fallback states: Users were running into empty carts, carts with out-of-stock items, and invalid payments, so I added empty, error, and edge case states to checkout
Get recommendations we know you'll love
Home page: Not sure what you need?Primary CTA leads you to our best-selling offerings, or check out what the press suggests or our curated collections of what's new, popular, & budget friendly
More recommendations were added to the home page to ensure a little something for everyone can be found right when they enter
Virtual shopping appointments: Get direct sales-rep expertise as you are walked through the in-store customization experience online
Find exactly what you're looking for where you expect it to be
Navigation: Choose how to shop, whether it's by product or collection, IRL, or through virtual shopping appointments or events
Navigation was tailored to how users prefer to shop
Product page: Expand for tips and materials, ensure all your product questions are answered, and get more personalized recs based on similar and recently viewed products
Personalized recs were added in tabs so the user always knows where they're coming from
Cart quick-add: Forgot something? Don't worry, your cart has your back. Find even more product recommendations in your empty cart, with a quick-add button so you can be ready to checkout
Find alternative options through empty states and ensure all your product needs are being met
Extensively customize your experience to fit your needs
Filter and sort: For more specific results, use the filters and sort menus to narrow down your choice by what's featured, product type, price, and more
Narrowing the search so users can avoid choice paralysis
Connect with others and join a creative community: visit us in real life
Or hear from us directly
Archive, press, blog, faq: Find out more directly from the community! Hear from our founder, the press, and our team
To highlight the community-driven team of real people hand-making these products
Updating features + addressing user needs: the live site!
Get the full story
About: Lastly, see where it all started with the story behind the brand from the founder herself and view the site that went live in October of 2024!
Within the first quarter after launch
Traffic: purchase conversion doubled and bounce rate dropped by 39%
Quarter-over-quarter growth: online sales increased by 145% compared to the quarter prior to launch
Year-over year growth: online sales increased by 12% compared to the same quarter the previous year
View live site
What's next
Moving forward
Next steps for Haricot Vert
The future of Haricot Vert's website lies in the owner's hands. I hope they will eventually be able to implement the features I had been developing before my departure, such as
Build-your-own product customization: Interactive charm jewelry builder that visually simulates every step of the in-store experience
Product listing simplification: Many of their existing products are separated out into multiple similar listings that can be confusing to customers, which could be resolved by combining listings and transitioning to the build-your-own format
What I learned
Raal products, real constraints
Meeting client needs
