nach der arbeit

A case study on an eCommerce site

 I designed the site for nach der arbeit, a small clothing and lifestyle brand based in New York City. German for “after work,” nach der arbeit alludes to an alternative lifestyle outside of a day job. The brand is heavily influenced by skate culture, soccer, music and art, and invites collaboration among likeminded artists in the city.

My role: UX, UI

 
 
 
NachderArbeit_iMac.png
 

The Challenge

With the goals of promoting sales and brand awareness, the objectives were to:

  • Provide access to browse, purchase, and share products via social media

  • Publish blog content reflective of the brand and its community

  • Feature work produced by local artists and contributors


Inspiration

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
 

Ideation

 

User Flows and Information Architecture

Next, I meticulously mapped out user flows for each persona, which later helped inform the entire information architecture.

In the example below, the user flow starts with the decision to click “Shop Now” from the homepage; two 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

user-flow.png
 

 

Wireframes

Drawing 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.

 
 

Protoype and Usability Testing

Prototypes and Usability Testing

To test the wireframes, I created a clickable prototype and asked 3 users to: 

1. Imagine that you came to the site to purchase clothing. You want to learn about the product as much as possible before purchasing. How would you do this?

2. Imagine that you want to get a sense of the lifestyle behind the brand. How would you find this information?

 

Usability Testing Summary

 Test Participants

The participants included 2 males and 1 female consumers of high-end clothing. All of them currently live in New York City and have office jobs. While all of them are computer and mobile-savvy, only 2 participants stated they are frequent online shoppers. Their most visited sites include eCommerce sites, event blogs, news sites, and social media.

 Site Performance

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

NDAProduct overview.jpg
 

 

Product Detail

NDAProduct detail.jpg
 

 

Blog Overview

NDABlog overview.jpg
 

 

Blog Detail

NDABlog post.jpg
 
 

Thanks for reading!