Nach der Arbeit

An UX study on an eCommerce site

 I designed an eCommerce website for Nach der Arbeit, a start-up menswear brand that sells a variety of apparel such as jerseys and t-shirts, as well as some accessories like keychains and stickers.

My role: UX, UI

Course: NYU User Experience Design II

 
 
 
NachderArbeit_iMac.png
 

The Brief

The primary goals were to promote sales and brand awareness, as well as to incite an appreciation for well-designed clothing in general. In doing so, I aimed to:

  • Allow users to browse, purchase, and share products via social media
  • Feature work produced by local artists and contributors
  • Publish blog content reflective of the brand and its community
  • Promote attendance at company events
German for “after work,” Nach der Arbeit alludes to a youthful, alternative lifestyle outside of a day job. The brand is heavily influenced by skate culture, soccer, music and art, and often invites collaboration among likeminded artists in the NYC community.

German for “after work,” Nach der Arbeit alludes to a youthful, alternative lifestyle outside of a day job. The brand is heavily influenced by skate culture, soccer, music and art, and often invites collaboration among likeminded artists in the NYC community.


Strategy

Competitive Review

To better understand the market, I conducted a competitive review of similar brands including Oi Polloi and End Clothing. While all brands offer a selection of high-end contemporary menswear, Nach der Arbeit differentiates itself as offering a fresh perspective on classic menswear items and lending support to the creative community in NYC.

 
 
 
 

Mental Models

Following the comparative analysis, I created a mental model, pictured above, to identify user triggers, functions, and follow-ups before, during and after interaction with my product. These included factors as they pertain to things like ambitions, distractions, daily tasks, leisure time, relationships, responsibilities, location, and demographics.

 

 

Survey

With the product goals and mental model in mind, I developed a survey to understand the shopping habits of my target audience and and its perception of a new brand. 

The survey consisted of 2 qualifying questions and 6 open questions. From 18 survey respondents, I confirmed that 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 mental models and survey results, I created personas that all shared an appreciation for high-end clothing but represented different shopping habits and reasoning for supporting a new brand.

 
 
 
NachderArbeit_personas.png
 

 

User Flows and Site Map

Considering each persona, I mapped out user flows based on key factors from mental models identified earlier in the process. The user flow outlined here begins with the decision to click "Shop Now" upon landing on the homepage; it offers two primary paths to either shop first or explore the rest of the site. Accounting for pages, decision points, and user confirmation, I tried to map out the logic at any one stage of the user flow, knowing that this step would later inform the development of the site map.

 

 
 

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

Next, I spent some time developing lo-fi and hi-fi wireframes. Drawing from the user flows, I made five pages essential for usability testing: homepage, product overview page, product detail page, blog, and blog detail page. Highlights include:

  1. “Shop the Collection” is the main CTA above the fold.
  2. Featured blog posts invite users to learn about the creative community in NYC.
  3. Lookbook images are peppered throughout the site, offering insight into the lifestyle.
  4. Complimenting the product details, social media offer social proof and inspiration.
 
 

Protoype and Usability Testing

From here, I created a clickable prototype to test the wireframes. Working with three participants, I asked 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?

Feel free to carry out the tasks yourself in the prototype.

 

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

While the focus of this assignment was on the UX process, I was excited to use the research to design hi-fi mockups of the product. From feedback from the user testing, I iterated upon the wireframes to ensure the concept met both business and user needs.

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!


Previous: Safe Horizon / Next: CrossFit