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
14.96% CTR
31x ROAS
36.5% Free Listings CVR
User Experience Design
Built the site, designed the assets, wrote the UX copy, and listed and merchandised products
Ideated, designed, and managed the user experience based on conducted user research, increasing online sales by 145% QoQ and 12% YoY
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
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
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
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.
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
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
My initial iteration of the sitemap was focused on everything I thought might contribute to solving user needs.
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.
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
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
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
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?
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
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
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 here, with a quick-add button so you can be ready to checkout
Find alternative options and ensure all your product needs are being met
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
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!
While I was unfortunately not permitted to conduct A/B testing, within the first quarter after launch
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
What I learned
Raal products, real constraints
Meeting client needs
