nach der arbeit Website Design

How might we design a seamless eCommerce experience for a startup clothing and lifestyle brand?

Goal: To promote sales, brand awareness, as well as feature work produced by local artists.

Team: UX/UI Designer (Me), Developer

 

 
 
NachderArbeit_iMac.png
 

Discovery Phase

Discovery.png

Research and Synthesis

Interviews and Competitive Analysis

Through conversations and an interactive mood board, I learned about the company's values, inspiration, and goals for product sales and brand awareness. As a small fashion start-up, a well-designed site would not only boost online sales, but serve as a new platform for other up-and-coming creatives to boast their work through the lens of “after work.”

I also researched similar brands including Oi Polloi and End Clothing to better understand the competitive landscape. While these brands all sell high-end contemporary menswear, nach der arbeit positions itself as offering a fresh twist on classic menswear items.

Mental Models

With a firm grasp on the business goals and requirements, I delved into user research. To understand the behavior of target consumers, I created mental models to specify triggers, functions, and follow-ups for any given interaction with the site. I considered factors such as ambitions, distractions, and demographics to help define user characteristics, goals, and journeys.

 
 
 
 

Surveys

Supplementing this UX technique, I developed a survey to understand shopping habit and to measure perception of an emerging brand in the industry.

The survey consisted of 2 qualifying questions and 6 open questions. From 18 survey respondents, most participants consider themselves consumers of high-end clothing. They typically purchase from contemporary brands like A Bathing Ape, A.P.C., Acne Studios, Carhartt, and Palace.

 
 

While the average spending amount was $101-150 during each purchase, the frequency of shopping varied.

 

Most users are also open to supporting an unknown brand, responding that they would be willing to spend at least $100 at the time of purchase.

 

Users ranked style, quality, and comfort as the 3 highest criteria when purchasing high-end clothing. A good web presence also would most likely influence their decision-making.

 
 

Personas

Based on insights from the mental models and survey, I developed personas that all shared an appreciation for high-end clothing, but differed in their shopping habits and rationale for supporting a new brand.

 
 
NachderArbeit_personas.png
 

Build Phase

 

Ideation and Prototyping

User Flows and Information Architecture

Next, I mapped out user flows for each persona, which informed the entire information architecture. In the example below, the user flow starts with the decision to click “Shop Now” from the homepage; 2 divergent paths prompt the user to shop now or explore the rest of the site. I specified the logic at each stage of the flow, accounting for pages, decision points, and user confirmation.

 
 
 

Before Purchase

  • Appreciates clothing that is stylish, well-made and comfortable
  • Does heavy research before purchasing

During Purchase

  • Needs good photos and customer reviews to provide more insight before buying
  • Needs customer service for extra validation

After Purchase

  • Should be able to return/exchange easily if necessary
  • Wants to be notified of discounts and events

 
 
 

Wireframes

From the user flows, I created low-fidelity and high-fidelity wireframes for 5 key pages: homepage, product overview page, product detail page, blog, and blog detail page.

On the homepage, the main CTA is “Shop the Collection” to help promote the goal of product sales. Complimenting the product details, “fit pics” from social media offer social proof and inspiration; look book images are also peppered throughout the site, offering insight into styling and the associated lifestyle. The blog is interactive and accessible, inviting users to engage with the product and community as a whole.

 
 

Prototypes and Usability Testing

To test the wireframes, I created a clickable prototype and observed how users navigated to the shop and blog.

All users were able to complete the tasks on the different pages and stated they were very/somewhat satisfied with their experiences. They stated the site was easily navigable and image-driven, which peeked their curiosity to explore beyond the products and into the blog and lookbook. Overall, they felt like they had enough information to get a good sense of the brand and overall lifestyle.

Visual Design

After rounds of user testing, I designed high-fidelity mock-ups for each of the wireframes. In the same fashion as the wireframes, I created a clickable prototype to test the visual designs and iterated to ensure the best experience possible.

Image Sources: C'H'C'M' and Formagramma

 

Homepage

 

Product Overview

Product Detail

Blog Detail

Blog Overview

 

Thanks for reading!