UX/UI Designer
Designing a personal, trustworthy, and easy-to-browse website for handmade accessories shoppers
Dec 2025 - Present
Small Business Website Design
Tools: Figma | Google Forms
This project began with a personal goal of designing a website from scratch for my own handmade accessories business. While platforms like Etsy make it easy to list products, they can feel crowded, repetitive, and disconnected from the creator behind the work. I wanted to create a shopping experience that felt more personal and intentional, while still being clear, easy to navigate, and trustworthy for buyers.
Since I was designing for my own business, I began with personal insight into the problem, then used a survey, user interviews, competitive analysis, and personas to make sure the final design addressed real user needs.
Solo Project
Role(s): User Experience Designer | User Interface Designer
Background
Since this project was for my own small business, I had a direct understanding of both sides of the experience, I was both the creator trying to present handmade products thoughtfully and the shopper deciding whether a site felt trustworthy, clear, and worth returning to.
As a seller, I wanted the website to reflect the thought and design intent behind handmade products. As a UX designer, I wanted to make sure the website was not shaped by my own preferences, but also the needs and expectations of real users.
User Research
To guide the design, I combined surveys, user interviews, and competitive analysis.
To better understand how people shop for products, I collected feedback from 20+ people, including my own customers who shop frequently through my Etsy store. I focused on:
-
Whether they visually browse or by search
-
What devices they use
-
What websites they like shopping on
-
What frustrates them about shopping websites
Survey
User Interviews
I conducted short user interviews with a few users who shop from independent creator websites. I then followed up with a more focused question: why do people like independent creator websites?
These conversations helped reveal that people value shopping experiences that feel personal and thoughtful, while also creating a stronger sense of trust and support for the creator behind the work.
"I can understand who this creator is by looking at their style and the way the website is designed"
- User A
“I can focus on the products without background noise.”
- User B
Key Research Findings
My survey showed that shoppers want a website that feels clear, trustworthy, and personal.
User Interviews revealed that users felt more connected to independent creator websites when the site felt personal to the creator, rather than like a generic template. They also felt more confident buying when product details, pricing, photos, and shipping information were easy to find.
User Personas
After gathering research, I created three personas to represent different shopping styles and priorities. These personas gave the project a clearer understanding of how different users browse, compare, and shop.
-
Core User - Jennie reflected users who browse for collecting, gifting, and may favorite or return later
-
Secondary User - Daniel represents goal-oriented gift shoppers who just want to be able to choose a gift and checkout quickly
-
Tertiary User - Maria reflects more of a cautious shopper who compares products and review details before purchasing
Competitive Research
To understand how shopping websites are designed, I looked at many e-commerce sites. I was not trying to copy them, but to learn what worked, what felt confusing, and what ideas could help my own website.
I compared each site by looking at navigation, trust, checkout flow, product photos, and overall style. I also looked at details like categories, search, reviews, policies, and the cart process.
This helped me see that marketplace sites were easy to use, but often felt cluttered and less personal. Branded websites felt more polished, but lacked the personal, handmade feel I wanted.
Etsy
What stood out to me:
-
Strong search and filtering like product listings, shop location and reviews
-
Breakdown of detail and information
-
Lacks personality and difficult for sellers to personalize their page
My Etsy shop uses the same template-based layout as other sellers, making it difficult to create a distinct shopping experience
Enroute Jewelry
What stood out to me:
-
Builds trust early with visible messages around pricing, production, and reviews
-
Product pages support both normal and fast purchase paths
-
No hidden details like delivery costs and information are easy to find
Clicking on a listing shows you two important call-to-action buttons (add to bag, shop now)
Bisoulovely
What stood out to me:
-
Small business with strong brand identity and clear themed aesthetic
-
Supports curated browsing through different collections
Organized collections of products and product information
Mind Map & Site Map
Next, I created a Mind Map and Site Map to plan the structure of the website and understand how users would move through the shopping experience. This helped me organize the content into clear sections, including product browsing, product details, brand information, support pages, and checkout.
The Problem
User Painpoints
How can I design a handmade shopping website that feels personal, clear, and trustworthy?
I wanted to redesign my website so users could quickly understand my products, feel confident in the handmade quality, and shop without confusion.
To guide the redesign, I focused on a few leading questions and focus areas:
-
Can users find what they need to easily? (Are there different users?)
-
Is the brand identity clear? (Does the site feel personal and handmade?)
-
Does the shopping flow feel simple and trustworthy? (Can users browse, compare, and purchase with confidence?)
-
Are the products easy to understand? (Are photos, prices, details, and options clear?)
Wireframes
Early Concept
Once I had a clearer definition of user needs, I started translating those insights into structure and layout. I designed several iterations of each page before narrowing down to one. My early wireframes focused on the homepage, product browsing pages, and product detail screens.
I explored questions such as:
-
What should users see first when they land on the homepage?
-
How should categories and featured items be introduced?
-
How can product details feel clear without becoming too dense?
-
How can the interface feel personal without looking busy?
These early explorations helped me prioritize hierarchy, spacing, and browsing clarity before refining the visual design.
Navigation Bar
Appearing on every page, the navigation bar is one of the most important parts of the experience. It helps users find what they need quickly, reduces frustration, and gives them a clear sense of where they are within the site.
I chose the second version because it follows a layout people already expect. The logo stays in a clear focal position and gives users a familiar way to return to the homepage. The navigation labels are short and easy to scan, which makes the site structure easier to understand.
Landing Page (Home Page)
I designed the landing page to create a strong first impression and make browsing feel easy from the start. I experimented with different layouts to explore how to balance the brand, product visibility, and clear navigation visual cues.
(From top to bottom)
1. Hero Section
-
Announcements
-
Navigation Bar | Account | Favorites | Cart
-
Large image or product photo (carousel/slideshow)
-
Header/supporting line/subtext
-
CTA button
2. Product Sections
-
Large images (with a favorite button)
-
Item Name
-
Price (Bigger text, in bold)
3. Social Proof
-
Reviews (rating, customer quotes)
4. The Footer
-
FAQ
-
Policies
-
Contact information
-
About me
Product Listing Page
These wireframes show the product listing page after a user clicks into an item. Based on my research, I included both Buy Now and Add to Cart to support different buying needs.
Buy Now helps users purchase a single item quickly, while Add to Cart supports users who want to keep browsing or buy multiple items. This helped the page better match my personas and create a more flexible shopping experience.
Clicked Listing
Add To Cart
What clicking add to cart looks like
Buy Now
What clicking buy now looks like
What clicking a product listing looks like
Other Supporting Pages
Product Category Page
Footer Link Pages
Basic layout of each footer link page
Basic layout of each product category page
UI Design
For the UI design, I wanted the website to feel soft, personal, and connected to my handmade brand identity. Since my brand logo uses pink and black, I carried those colors into the website to create a consistent visual direction.
The pink tones help the site feel warm, gentle, and handmade, while the darker colors create contrast and make important text easier to read. I also used rounded buttons, simple layouts, and clear spacing to keep the shopping experience approachable and easy to navigate.
Style Guide
I created a style guide to keep the website visually consistent and connected to my brand identity. Since my logo uses pink and black, I used soft pinks as the primary brand colors and paired them with white, light gray, and dark neutrals for readability.
The pink tones help the website feel warm, personal, and handmade, while the darker text colors provide contrast and clarity. I also designed rounded primary and secondary buttons to create a friendly, approachable shopping experience while still making important actions easy to recognize.
My brand logo variants
˗ˏˋ Final Design ˎˊ˗
High Fidelity Prototype
Trust & Clear Hierarchy
-
I refined the text hierarchy and CTA buttons so users can quickly understand the most important information
-
Product names, prices, details, and buttons are organized and clearly visible to help users feel more confident while browsing
Simple Navigation
-
Clear page structure, breadcrumbs, and consistent layouts help users move through the shopping experience with less confusion
Interactive Button States
-
Buttons and clickable links include idle, hover, and/or clicked states
-
These interactions give users feedback and make the website feel more responsive and polished
Accordion Product Details
-
I used accordion sections to keep extra product information organized without crowding the page
-
Users can open details like materials, care instructions, or shipping information only when they need them
Clicked Listing
Add to Cart
Buy Now
Product Page Key Features
Breadcrumb Navigation
-
Helps users see where they are and easily return to Home, Shop, or a previous category while browsing
Category Buttons
-
Users can quickly browse different item types. Since this is a small business with a smaller product collection, I kept the filters clear and minimal instead of overwhelming users with too many options
Sort By Button
-
Lets users sort products in a way that makes browsing easier for them
Future Changes I would make:
Load More Button
Load More lets users view additional products without leaving or reloading the content on the page, keeping the browsing experience smooth
Future Filter Options
Because my shop may grow over time, I designed the page with room to add more filters in the future, such as material, color, price, or product type. This keeps the current experience simple while allowing the website to scale later
Footer Link Pages
Product Pages
What I Learned
During this project, I realized how easy it is to confuse my own design preferences with what users actually need. Since this website was for my own handmade business, I often caught myself thinking, “I like this better,” or “this feels more like my brand,” without questioning whether it made the shopping experience clearer for users. User research helped me step back from my personal taste and look at the design more objectively. By using interviews, personas, and competitive analysis, I was able to make decisions based on user needs instead of only designing around what I personally preferred.
Some key things I learned were:
-
Trust comes from clarity and from making information easy to find
-
Small details can make the shop feel more intentional
-
Simple design choices can reduce friction. Features like breadcrumbs, category buttons, and accordion sections helped make the experience easier without overwhelming the user and the page
-
User Research helped me design beyond my own preferences. Interviews, personas, and competitor analysis helped me make decisions based on user needs, not just what I personally liked
Since I plan to build the website soon, I know some visual details like colors, layout, and content may change, but my main focus will be testing and improving the navigation foundation I have set up and based on how real customers interact with it.