E-Commerce

E-Commerce

One DNA — Small Business Website Refresh

One DNA — Small Business Website Refresh

Self-led website mockup for a local small business. Incorporated user research to better engage customers and support the business's goals.

Self-led website mockup for a local small business. Incorporated user research to better engage customers and support the business's goals.

Self-led website mockup for a local small business. Incorporated user research to better engage customers and support the business's goals.

Role

Role

UX Designer, Researcher

UX Designer, Researcher

UX Designer, Researcher

Timeline

Timeline

March 2024

March 2024

March 2024

Skills

Skills

User Interviews, Contextual Inquiry, Prototyping

User Interviews, Contextual Inquiry, Prototyping

User Interviews, Contextual Inquiry, Prototyping

Tools

Tools

Figma, GSuite

Figma, GSuite

Figma, GSuite

Yellow Flower
Yellow Flower
Yellow Flower

Desktop homepage layered on top of One DNA storefront.

Figma Prototype

Figma Prototype

Slidedeck

Slidedeck

Context

Designing One DNA’s next step.
One DNA is a small, gender-inclusive clothing brand specializing in high-quality wardrobe essentials. While their mission and values resonate with a growing audience, the owners face the challenge of scaling the brand’s growth while managing an underdeveloped online presence. This disconnect limits their ability to reach new customers and effectively communicate their commitment to inclusivity and sustainability.

Motivated by their vision and the opportunity to help a brand with such a meaningful mission, I set out to design a prototype for their desktop website. The goal was to create a digital experience that showcases their full potential, emphasizes their core values, and supports both brand growth and user engagement. 

Designing One DNA’s next step.
One DNA is a small, gender-inclusive clothing brand specializing in high-quality wardrobe essentials. While their mission and values resonate with a growing audience, the owners face the challenge of scaling the brand’s growth while managing an underdeveloped online presence. This disconnect limits their ability to reach new customers and effectively communicate their commitment to inclusivity and sustainability.

Motivated by their vision and the opportunity to help a brand with such a meaningful mission, I set out to design a prototype for their desktop website. The goal was to create a digital experience that showcases their full potential, emphasizes their core values, and supports both brand growth and user engagement. 

Designing One DNA’s next step.
One DNA is a small, gender-inclusive clothing brand specializing in high-quality wardrobe essentials. While their mission and values resonate with a growing audience, the owners face the challenge of scaling the brand’s growth while managing an underdeveloped online presence. This disconnect limits their ability to reach new customers and effectively communicate their commitment to inclusivity and sustainability.

Motivated by their vision and the opportunity to help a brand with such a meaningful mission, I set out to design a prototype for their desktop website. The goal was to create a digital experience that showcases their full potential, emphasizes their core values, and supports both brand growth and user engagement. 

Outside view of One DNA social event.

Problems

Bridging the gap.
Through insights from 16 contextual inquiry participants of various gender identities and experience levels with the site, combined with feedback from the One DNA owners and a local small business consultant, I identified the following key issues.

Bridging the gap.
Through insights from 16 contextual inquiry participants of various gender identities and experience levels with the site, combined with feedback from the One DNA owners and a local small business consultant, I identified the following key issues.

Bridging the gap.
Through insights from 16 contextual inquiry participants of various gender identities and experience levels with the site, combined with feedback from the One DNA owners and a local small business consultant, I identified the following key issues.

Friction in user flow — The navigation on the current site is unintuitive, making it difficult for users to browse or find relevant information about the brand or products.

Friction in user flow — The navigation on the current site is unintuitive, making it difficult for users to browse or find relevant information about the brand or products.

Disconnected brand identity — The site lacks a cohesive design that reflects One DNA's core values, leaving users feeling no emotional connection to the brand.

Disconnected brand identity — The site lacks a cohesive design that reflects One DNA's core values, leaving users feeling no emotional connection to the brand.

Unclear styling inspiration — Users are unsure how to style the clothes or what contexts they are best suited for, resulting in hesitation to purchase.

Unclear styling inspiration — Users are unsure how to style the clothes or what contexts they are best suited for, resulting in hesitation to purchase.

Obscure visual hierarchy — New users struggled to navigate the site due to inconsistent section organization and a lack of clear visual cues, making it difficult to understand the structure and flow of information.

Obscure visual hierarchy — New users struggled to navigate the site due to inconsistent section organization and a lack of clear visual cues, making it difficult to understand the structure and flow of information.

Objective

Objective

Redesign the One DNA website to create an intuitive, visually compelling platform that authentically reflects the brand's commitment to gender inclusivity, while providing a seamless and engaging shopping experience that drives brand loyalty and growth.

Redesign the One DNA website to create an intuitive, visually compelling platform that authentically reflects the brand's commitment to gender inclusivity, while providing a seamless and engaging shopping experience that drives brand loyalty and growth.

Redesign the One DNA website to create an intuitive, visually compelling platform that authentically reflects the brand's commitment to gender inclusivity, while providing a seamless and engaging shopping experience that drives brand loyalty and growth.

Design Requirements

The following criteria guided my design process to ensure the new One DNA website aligns with the brand’s values and delivers an optimal user experience.

The following criteria guided my design process to ensure the new One DNA website aligns with the brand’s values and delivers an optimal user experience.

The following criteria guided my design process to ensure the new One DNA website aligns with the brand’s values and delivers an optimal user experience.

Maintain current aesthetic — Keep the clean, simple design to reflect the brand’s focus on timeless essentials and take into account user feedback.

Match current e-commerce platforms — Ensure the new design aligns with common e-commerce functionality and organization.

Community-driven experience — Focus on designing a platform where users feel seen and represented by incorporating customer stories and an overall sense of belonging.

Consistency in visual design — Ensure the design elements are consistent across all pages to create a cohesive and predictable user experience, adhering to the principle of consistency.

Redesign Features

Product Page

Enhancing the shopping experience.
The updates to the product page were guided by the goal of creating a seamless, intuitive experience that reflects One DNA’s brand values and drives user engagement.

Enhancing the shopping experience.
The updates to the product page were guided by the goal of creating a seamless, intuitive experience that reflects One DNA’s brand values and drives user engagement.

Enhancing the shopping experience.
The updates to the product page were guided by the goal of creating a seamless, intuitive experience that reflects One DNA’s brand values and drives user engagement.

GIF overview of desktop product page.

Streamlined product information — Refined the product layout to clearly display essential details such as price, color options, sizes, availability, and item descriptions. The design follows industry standards, making the page less intensive for users to scan and understand at a glance.

Style inspiration — Introduced a "How to Style" section to showcase complementary items and inspire users with outfit ideas, helping them envision how products fit into their wardrobe.

Building trust and inclusivity — Incorporated elements like midway trust indicators to communicate the brand’s values, featured diverse models to emphasize gender inclusivity, and ensured clear calls-to-action at the bottom of the page to guide users through their shopping journey.

New Pages

Expanding the brand’s story.
The addition of new pages enriches the website experience, offering deeper connections to One DNA’s brand and community.

Expanding the brand’s story.
The addition of new pages enriches the website experience, offering deeper connections to One DNA’s brand and community.

Expanding the brand’s story.
The addition of new pages enriches the website experience, offering deeper connections to One DNA’s brand and community.

Lookbook desktop page (left) and .community desktop page (right).

Lookbook — Introduced a lookbook to inspire users by showcasing the energy and lifestyle associated with the products, going beyond aesthetics to highlight their versatility and purpose.

.community — Created a dedicated community page to emphasize that One DNA is more than just a clothing brand and celebrates the unique culture of the Ann Arbor flagship store and the connections it fosters.

User-driven — These pages were designed in response to user feedback, addressing their desire for more storytelling and emotional connection while strengthening One DNA’s brand identity.

Everything Else

Little things.
The finishing touches that make all the difference. These updates tie everything together, creating a cohesive and engaging shopping experience.

Little things.
The finishing touches that make all the difference. These updates tie everything together, creating a cohesive and engaging shopping experience.

Little things.
The finishing touches that make all the difference. These updates tie everything together, creating a cohesive and engaging shopping experience.

GIF demonstration of new dropdown and mini-cart features.

Homepage — First impressions matter. The new homepage is sleek and sophisticated, immediately communicating the brand’s identity. Featuring a striking hero image, the homepage sets the tone for each collection, immediately inviting new visitors into One DNA’s world.

Navigation — The updated navbar implements the new Lookbook and Community pages, making it easy for users to explore the brand’s story and vision. A new dropdown menu for shopping organizes categories like tops and bottoms intuitively, while trust indicators help build a personal connection with the brand.

Subtle enhancements — Added breadcrumbs, product counts, refine filters, and hover effects to improve usability. Quick-add and mini-cart features make shopping faster and more efficient, ensuring users can navigate the site effortlessly.

Retrospective

Summary

New horizons.
This project was an incredibly rewarding experience that pushed my skills as a UX designer and researcher. As my first major solo design endeavor, I gained valuable insights into both user research and the iterative design process.

New horizons.
This project was an incredibly rewarding experience that pushed my skills as a UX designer and researcher. As my first major solo design endeavor, I gained valuable insights into both user research and the iterative design process.

New horizons.
This project was an incredibly rewarding experience that pushed my skills as a UX designer and researcher. As my first major solo design endeavor, I gained valuable insights into both user research and the iterative design process.

Sydney (store dog) overlayed with One DNA interior.

Lessons Learned

Learning as I go.
As my first solo UX project, I learned an incredible amount, from navigating unexpected challenges to refining my process with every iteration. Mistakes were plentiful, but each one was an opportunity to grow and improve.

Learning as I go.
As my first solo UX project, I learned an incredible amount, from navigating unexpected challenges to refining my process with every iteration. Mistakes were plentiful, but each one was an opportunity to grow and improve.

Learning as I go.
As my first solo UX project, I learned an incredible amount, from navigating unexpected challenges to refining my process with every iteration. Mistakes were plentiful, but each one was an opportunity to grow and improve.

Smart note-taking — Focus on capturing meaningful, actionable insights. I learned the hard way that too much data without a clear plan to use it can overwhelm rather than inform.

Reflect and revisit — Allow time to step back and revisit design decisions. Taking breaks helped me approach problems with a fresh perspective and avoid overthinking small details.

Don’t reinvent the wheel — There’s no need to start from scratch every time. I discovered the power of building on established design patterns to save time and deliver elegant, user-friendly results.

See more projects!

See more projects!