Bohème Clothing & Gifts
ROLE: UI/UX Designer
TOOLS: Figma
DURATION: 10 weeks
Bohème Clothing & Gifts
ROLE: UI/UX Designer
TOOLS: Figma
DURATION: 10 weeks
Bohème Clothing & Gifts
ROLE: UI/UX Designer
TOOLS: Figma
DURATION: 10 weeks
OVERVIEW
Bohème is a boutique based in Davis, CA that offers curated secondhand fashion to the local community, operating on a “buy-sell-trade” model. This means that they rely on seller trade-ins rather than donations for their inventory, where sellers can bring in their clothes for cash or store credit. As part of a team of developers and designers, I worked on building Bohème’s digital brand identity through a complete overhaul of their website. A key objective was to simplify the trade-in pipeline to lower the barrier for seller engagement.
OVERVIEW
Bohème is a boutique based in Davis, CA that offers curated secondhand fashion to the local community, operating on a “buy-sell-trade” model. This means that they rely on seller trade-ins rather than donations for their inventory, where sellers can bring in their clothes for cash or store credit. As part of a team of developers and designers, I worked on building Bohème’s digital brand identity through a complete overhaul of their website. A key objective was to simplify the trade-in pipeline to lower the barrier for seller engagement.
OVERVIEW
Bohème is a boutique based in Davis, CA that offers curated secondhand fashion to the local community, operating on a “buy-sell-trade” model. This means that they rely on seller trade-ins rather than donations for their inventory, where sellers can bring in their clothes for cash or store credit. As part of a team of developers and designers, I worked on building Bohème’s digital brand identity through a complete overhaul of their website. A key objective was to simplify the trade-in pipeline to lower the barrier for seller engagement.
The Problem
The Problem
The design and functionality of Bohème’s old website presented significant barriers to user engagement and business growth. Built with basic HTML and CSS, the site suffered from a cluttered layout overwhelmed by dense text blocks that created cognitive overload for users. Stock photos and a lack of branding undermined the store's unique identity, giving the site a dated, generic appearance.
The design and functionality of Bohème’s old website presented significant barriers to user engagement and business growth. Built with basic HTML and CSS, the site suffered from a cluttered layout overwhelmed by dense text blocks that created cognitive overload for users. Stock photos and a lack of branding undermined the store's unique identity, giving the site a dated, generic appearance.
The Solution
The Solution
We modernized Bohème’s website to reflect its vibrant community roots while introducing high-utility features. By transforming the "Buy-Sell-Trade" process from a text-heavy info page into a streamlined appointment scheduling system, we increased seller participation and established a more transparent, professional, and trustworthy user experience.
We modernized Bohème’s website to reflect its vibrant community roots while introducing high-utility features. By transforming the "Buy-Sell-Trade" process from a text-heavy info page into a streamlined appointment scheduling system, we increased seller participation and established a more transparent, professional, and trustworthy user experience.
INITIAL RESEARCH
INITIAL RESEARCH
Analyzing Competitors
Analyzing Competitors
We examined the websites of other Davis-based thrift and consignment stores to understand the local market landscape and identify opportunities for differentiation. We evaluated key features including donation/trade-in models, online shopping capabilities, brand identity strength, seller guidelines clarity, etc.
We examined the websites of other Davis-based thrift and consignment stores to understand the local market landscape and identify opportunities for differentiation. We evaluated key features including donation/trade-in models, online shopping capabilities, brand identity strength, seller guidelines clarity, etc.
Understanding Pain Points
Understanding Pain Points
Through direct client consultations and user persona development, we identified that our target audience of predominantly college students valued speed, clarity, and efficiency. Their primary pain point was an unfamiliarity with the trade-in process, not knowing what to bring in and when they could bring it. Bohème’s trade-in service could offer a lot of value to these students, but they needed an efficient, frictionless experience to learn about it.
Through direct client consultations and user persona development, we identified that our target audience of predominantly college students valued speed, clarity, and efficiency. Their primary pain point was an unfamiliarity with the trade-in process, not knowing what to bring in and when they could bring it. Bohème’s trade-in service could offer a lot of value to these students, but they needed an efficient, frictionless experience to learn about it.
IDEATION
IDEATION
Site Map
Site Map
We translated Cindy’s need for clarity into a structured Site Map that removed the mystery of the trade-in process. We organized the navigation into three pillars: Buying, Selling, and Gifting. The Buy-Sell-Trade page explicitly lists "Accepted Items" and "Items We Cannot Accept" before leading the user directly to the booking module. The Media page established community, designed to foster a deeper connection with Bohème’s local audience.
We translated Cindy’s need for clarity into a structured Site Map that removed the mystery of the trade-in process. We organized the navigation into three pillars: Buying, Selling, and Gifting. The Buy-Sell-Trade page explicitly lists "Accepted Items" and "Items We Cannot Accept" before leading the user directly to the booking module. The Media page established community, designed to foster a deeper connection with Bohème’s local audience.
Low-Fidelity Wireframes
Low-Fidelity Wireframes
Initial wireframes, some of which are shown below, set a base for each designer on the team to explore various rough design concepts for each page. These concepts were shared and critiqued before we established a unified visual style, and they helped us form ideas about the direction we wanted to take the branding.
Initial wireframes, some of which are shown below, set a base for each designer on the team to explore various rough design concepts for each page. These concepts were shared and critiqued before we established a unified visual style, and they helped us form ideas about the direction we wanted to take the branding.
Creating a Digital Brand Identity
Creating a Digital Brand Identity
Visual Storytelling: Generic stock imagery was to be replaced with images of the store's colorful interior and exterior, friendly staff pictures, and shots from community involvement, helping users visualize themselves as part of the Bohème community.
Strategic Color & Typography: We decided to use a warm and bright color palette that reflects a friendly, community-oriented, and fun brand. The colors create strong brand recall because of their vibrancy, standing out from competitors who typically rely on muted, earthy tones,. The typefaces chosen are readable and modern.
DESIGN
DESIGN
Prototyping & Refinement
Prototyping & Refinement
During the design phase of the project, we worked collaboratively across pages, aligning ideas and unifying the design direction during weekly standup meetings. Multiple revisions of each page were shared with the client and iterated based on feedback. Below is the progression of one of the key pages, the Buy-Sell-Trade page, shown from left to right.
During the design phase of the project, we worked collaboratively across pages, aligning ideas and unifying the design direction during weekly standup meetings. Multiple revisions of each page were shared with the client and iterated based on feedback. Below is the progression of one of the key pages, the Buy-Sell-Trade page, shown from left to right.
The final iteration of this page manages user expectations upfront. By clearly listing "Accepted Items" immediately followed by a scheduling CTA button, we reduced the cognitive load and provided a clear path to conversion.
The final iteration of this page manages user expectations upfront. By clearly listing "Accepted Items" immediately followed by a scheduling CTA button, we reduced the cognitive load and provided a clear path to conversion.
This same logic of designing for clarity was extended across the rest of the site:
Media Page: Designed to foster community, this section serves as a digital extension of the physical store, utilizing authentic imagery and video content to build long-term trust and social proof.
Gift Guide: We simplified the gifting process by creating a focused, high-utility page that offers clear choices between physical and e-gift cards and organizes gifting occasions into an intuitive list.
About Page: We highlighted Bohème's core values of sustainability, affordability, and community as well as its history to serve as the foundational narrative for the website.
This same logic of designing for clarity was extended across the rest of the site:
Media Page: Designed to foster community, this section serves as a digital extension of the physical store, utilizing authentic imagery and video content to build long-term trust and social proof.
Gift Guide: We simplified the gifting process by creating a focused, high-utility page that offers clear choices between physical and e-gift cards and organizes gifting occasions into an intuitive list.
About Page: We highlighted Bohème's core values of sustainability, affordability, and community as well as its history to serve as the foundational narrative for the website.
By unifying these different pages under a single cohesive design system, we ensured that whether a user is booking an appointment, browsing through the media, or purchasing a gift card, the experience remains intuitive, vibrant, and rooted in Bohème’s community values.
By unifying these different pages under a single cohesive design system, we ensured that whether a user is booking an appointment, browsing through the media, or purchasing a gift card, the experience remains intuitive, vibrant, and rooted in Bohème’s community values.
Final Design
Final Design
The fully implemented Bohème experience is now live and can be accessed at: bohemethreads.com.
Below, you can explore an embedded interactive Figma prototype of the website (you can also see it through this link: Figma).
The fully implemented Bohème experience is now live and can be accessed at: bohemethreads.com.
Below, you can explore an embedded interactive Figma prototype of the website (you can also see it through this link: Figma).
