- UI/UX
- Web Design
- Visual Design
- UX Research
- Responsive Design
- Interaction Design
- Prototyping
- Usability Testing
- Brand Experience Design
UX/UI Design:
- Competitive analysis
- User surveys and one-on-one interviews
- Site map
- Personas
- UI kit
- 3 designs options presented
- High-fidelity mockups & prototypes
- Usability tests and findings
Tools:
- Figma
- Photoshop
- Illustrator
- HTML
- CSS
User Research &
Define Problems
Competitive
Analysis
Define features
Design &
Prototype
Development
User Testing
Problems
Users struggle to understand how a product can be both size-specific and fully customized.
The customization process risks overwhelming users with too many options at once.
Communicating premium, handmade value in an online environment is challenging without physical interaction.
Proposed Solutions
Designed a step-by-step customization flow to clearly guide users through sizes and options without overwhelming them.
Used clear visual hierarchy and structured product information to explain customization choices, materials, durability, and hardware quality, helping users understand the value and final outcome of the handmade product.
Emphasized craftsmanship, materials, and brand story throughout the experience to communicate premium value in an online-only environment.
Research
Research focused on understanding how users perceive premium, handmade pet products online and how they navigate complex customization options without physical interaction. Competitive analysis of similar pet brands was conducted to identify common usability issues, gaps in customization clarity, and opportunities for differentiation.
Findings
1. Users needed clear guidance to feel confident when selecting sizes and hardware for a custom, handmade product.
2. Premium value was not immediately perceived without detailed material, craftsmanship, and production information.
3. Breaking information into structured sections helped reduce uncertainty and increased trust in an online-only brand.
4. Users looked for reassurance about durability and safety, especially for outdoor and active use.
5. Transparency around production time helped manage expectations for handmade products.
Turning customization complexity into a clear, confident, and premium shopping experience
Developing Empathy with the users
Through research and analysis, we gained a clear understanding of what users need when purchasing custom, handmade dog accessories online. It became evident that users wanted more than a typical e-commerce experience. They wanted clarity, trust, reassurance, and a premium, well-crafted experience that supports confident customization from product discovery to purchase.
- Users want a premium brand that stands out from mass-market pet accessories
- An easy-to-use experience is key to guiding users through product customization
- Clear descriptions, production details, and transparent policies help build trust in an online-only handmade brand
- High-quality images, detailed views, and material info are crucial for confident purchases
User Case Scenario
This user case scenario maps out the journey of a first-time visitor who discovers Barkpackers on social media and navigates a custom product page. The scenario was used to identify key touchpoints, reduce friction during customization, and prioritize product page features that promote clarity, trust, and confident decision-making.
Theme selection
- Minimal visual language - reduces cognitive load and keeps focus on the product and customization process.
- Clear visual hierarchy - helps users scan information quickly and understand what matters most.
- Progressive disclosure - detailed information is revealed only when needed, preventing overload.
- Content-first layout - ensures that product details and decision-making elements remain the primary focus.
DESKTOP
PHONE
Clarifying Visual Design
The visual design is structured to naturally guide the user through the page and reduce confusion during the customization process. Clear visual cues, consistent spacing, and well-defined hierarchies help distinguish product information from interactive elements. Active selections are emphasized visually to make choices clear at a glance, while clean composition and balanced contrast improve readability and support confident decision-making.
Product Page UX Strategy
- I simplified a complex, fully customizable product by creating a clear visual hierarchy and disclosing information progressively.
- Used a preselected default configuration with highlighted option states to help users understand customization at a glance.
- Integrated a size and hardware guide into the selection area.
- I arranged product information (features, specifications, care instructions, and production time) to reduce cognitive load and build trust.
- I emphasized the handmade, premium value (handcrafted 100% in Greece, quality materials, and durability).
- Help with discovery and upselling by matching products from the same collection or category.
UX Desicions
The product page was designed to simplify a complex, customizable product and guide users toward confident decisions.
- Customization options are grouped and clearly separated to reduce cognitive load and make choices easier to understand. Key information such as size, hardware, and price is placed upfront, while secondary details are revealed only when needed.
- A dedicated Size & Hardware Guide helps users make accurate selections without leaving the page, reducing uncertainty and friction. Supporting information is kept in collapsible sections to maintain a clean layout and prevent overload.
- Related products are shown after the main content to encourage exploration without distracting from the primary purchase flow.
UI KIT
High Fidelity Prototype
The hi-fi wireframes were detailed and interactive, showing the layout and functionality of each component. They demonstrated the flow of user interactions and allowed for user testing and iterative feedback, ensuring a smooth,
intuitive experience before final development.
Launch Live Website
Usability Testing
Usability testing focused on evaluating how easily users could navigate the product page and understand the customization process. Special attention was given to identifying points of confusion around size selection,
product options, and information hierarchy. Insights from testing helped refine content structure, improve clarity in key decision points, and ensure that users could complete their purchase confidently without
feeling overwhelmed.
Results:
- Product customization: Users found the customization flow clear, with the Size & Hardware Guide helping them make confident choices.
- Information structure: The separation between highlights, specs, and care details improved readability and reduced cognitive load.
- Trust & confidence: Emphasizing handmade production and materials increased trust and helped users feel more comfortable completing their purchase.
Summary
The goal of this project was to transform a complex, fully customizable handmade product into a clear and intuitive shopping experience. With a thoughtful information hierarchy, guided customization, and minimal visual design, the product page helps users understand their options, build trust, and make confident decisions. The final result strikes a balance between usability, aesthetics, and storytelling, thereby reinforcing Barkpackers premium, handcrafted identity.