BORN SMART CLOTHING

Born is a new smart clothing product range concept. This project explored the scenario of a major online fashion retailer launching a smart clothing line for the first time. Apps for mobile and smart watch are currently in the design process, with the intent of revolutionising our relationship to dress.

Client
Services
Year

General Assembly Case Study
UX Design
2016

CASE STUDY


Major e-commerce store Urban Outfitters is launching it’s first ever
range of smart clothing. The brief was to redesign the existing website
for the release of their new and exciting product.

DEFINING SUCCESS

PRODUCT LIFECYCLE


As this is the release of a brand new product I needed to define what the success of the product would look like to determine how the website and experience should be designed to achieve this.


DESIGNING FOR SUCCESS


My initial goal was to design the website for maximum sales of the Born clothing.

However, as this was a new product into the market,  I realised it was vital to design the site not only to sell, but also to educate the user about the product, and to make sure the product is used to it’s full potential. This would ensure the product’s greatest chance of success.

Using the smart clothing to it’s full potential also required the user to download the accompanying app, Born. This would enable customers to be able to take full advantage of the clothing’s unique smart features.

EDUCATE

SELL

USE & ENJOY

What this means for the customer:

THE CUSTOMER

PERSONA


I developed a persona based on Urban Outfitters core demographics.


HEURISTIC ANALYSIS

COMPETITORS WEBSITES


I performed a usability inspection of some competitor’s websites (with 4 users) to get a better understanding of some usability principles in the fashion e-commerce space.

This allowed me to pinpoint some best practices and also problems of the user interface I should avoid. I asked the users to rate particular parts of the experience out of 10 (10 being a perfect experience). Below are the averaged results. I also interviewed them to understand the reasons behind their ratings.

INSIGHTS


Insights:

  • Users preferred dropdown mega menus
  • Users preferred large images over text
  • The fewer mouse clicks the better

URBAN OUTFITTERS WEBSITE


I also performed a usability inspection of the existing website to pinpoint some existing issues that could be addressed while designing for the new release .

Insights:

  • Confusing navigating to categories in local navigation
  • Accessing ‘Wish List’ was not clear
  • Image layout could be improved on product page
  • Selecting sizes when purchasing was confusing
  • Checkout flow was too long

INFORMATION ARCHITECTURE

ONTOLOGY

I performed an open card sort to get an indication of how I should categorise he smart clothing within the existing site. My results from the open sort was far too varied to draw any conclusions.

I felt that smart clothing was a new product category and not just another brand and it needed its own global navigation menu. I decided to validate the existing ontology of the current website with this change to the menu with a closed sort. The results supported the current structure with a few changes…

82%


of users tested expected to find both Beauty and Intimates filed in the Women's menu.

This simplified the global navigation and allowed me to place Born at it’s own major category in the global navigation.

NAVIGATION

GLOBAL NAVIGATION


From a business perspective I wanted to have the ‘Born’ smart clothing to have it’s own global category menu. From the card sorting I saw that I could place the ‘Beauty’ and ‘Intimates’ in the ‘Women’s’ menu, leaving room for in the global menu for ‘Born’.

Existing Menu

New Menu

MEGA MENU DROPDOWN


Supported by the heuristic evaluation results, I also added the dropdown mega menus and tested them against the existing site. Users much preferred the mega menus.


CHOREOGRAPHY

NEW HOME PAGE


Smart clothing was a brand new product category for Urban Outfitters and an exciting new direction that would set it apart from other online retailers.

I wanted to keep the look of the site familiar to shoppers but I also wanted the product to stand out and be the most prominent. It was also important to have fast access to the existing main categories as this was the bread and butter of the business.

WIREFRAMING


Smart clothing was a brand new product category for Urban Outfitters and an exciting new direction that would set it apart from other online retailers.

I wanted to keep the look of the site familiar to shoppers but I also wanted the product to stand out and be the most prominent. It was also important to have fast access to the existing main categories as this was the bread and butter of the business.

Existing home page:

New home page:


USER FLOWS

3 USER FLOWS

Below are the 3 user flows for each of the core tasks that the user will
need to perform to give the product the best chance of success for the business.


THE ULTIMATE FLOW

Looking at these 3 vital flows in isolation was good for people who only needed to perform 1 task.
However, it was vital to able to perform all these three tasks in succession.

My goal when designing the site was to make it simple for a the user to be educated
on the product, make a purchase and download the app in one easy and logical flow.


EDUCATION FLOW

IDEATION


I  order for users to purchase many of them will need to be educated on the product first. The idea was to make the education as fast and easy as possible to get the customers straight to the purchasing flow as soon as possible.


CONCEPT


An immediate call to action video educating the customer on the technology as could also double as an advertisement for the product. I then placed a call to action shopping button after the video taking them straight to the category’s shop.

First Iteration:

USER TESTING


I user tested the first iteration and received feedback that people wanted more information and education of the technology of the product. I placed another button at the end of the video for the customer to discover more information, however I wanted to make the shop button more prominent.

Second Iteration:

PURCHASE FLOW

PRODUCT PAGE CHANGES


The heuristic analysis performed earlier showed that a few adjustments needed to be made:

  • Users were not selecting a size before hitting the ‘Add to bag’ button, as the sizes did not look clickable (even when asked to select a size).
  • The layout of the images could be improved.
  • Users were unsure were to view there saved favourites.

These issues were addressed when re-designing the product page.

Existing Product Page:

New Product Page:


CHECKOUT FLOW ANALYSIS


Evaluation of the current site showed that the credit card checkout flow was too long. I mapped out the current flow to see where I could reduce it. I looked at other competitor sites for ideas.

I combined the Shipping Information and Delivery Information pages as there was only one check box on the shipping information page.

Purchase Flow Changes:


DOWNLOAD FLOW

THE FINAL STAGE


Now that the customer has been educated and purchased the products, we need them to download the Born app so they have an interface in which to interact with their purchase. This will ensure they use the product to it’s potential, purchase more or share with their community.

DOWNLOAD FLOWS


There are three different user flows to download the app:

  • Home page banner
  • Info page Link
  • Receipt page (after purchase)

For this explanation ill focus on the Ultimate flow, after purchasing.


THE RECEIPT PAGE


I added a call-to-action download for the app on the receipt page, this would link through to the iTunes store.

Testing showed that this was successful in getting users to click through to download the app after their purchase.

Download Flow from Purchase:

Receipt Page:
iTunes Download:

SITE MAP


BORN APP

SMART CLOTHING INTERFACE


I am currently in the process if designing the new innovative iOS and Apple Watch apps for smart clothing. Please contact me for any information regarding these new developments.

Features Include:

  • Garment History
  • Garment Future
  • Smart Social
  • Environmental Awareness
  • Smart Hotspot Shopping

SUCCESS METRICS


For this new product success metrics will be very important and as stated earlier will need to go beyond just garment sales data. They will include:

  • Garment purchases
  • App downloads
  • repeat purchases from Born app
  • ‘Smart Social’ activity (from Born app)
  • Data analysis from app