• Website

TAGS

A classic clothing brand, that makes shopping easy for women on the go.

TAGS embodies the adventurous spirit of modern women, offering a tailored shopping experience that's as effortless as it is stylish. This e-commerce platform is a seamless blend of high-end sophistication and user-centric design.

Overview

  • Role
    UX/UI Designer
  • Duration
    2016 - 2017
  • Company
    Sunrise Brands, TAGS
  • Tools
    Sketch, Invision
Problem

Sunrise Brands enlisted my expertise to design a dynamic e-commerce platform for their contemporary fashion label, TAGS. Tasked with not only crafting a seamless online shopping experience but also driving the brand's visual direction, the challenge was multifaceted. TAGS sought a platform that not only resonated with the adventurous lifestyle of its target audience but also reinforced its core business values: high-end, minimal, sophisticated, and functional.

Solution

TAGS is a sleek and intuitive e-commerce website that caters to the needs of the modern, adventurous woman. I crafted a seamless browsing and purchasing journey, while also implementing features such as loyalty points integration to enhance customer engagement and satisfaction. The result is a visually captivating and user-centric platform that reflects TAGS' ethos and supports their mission to revolutionize the fashion retail experience.

Scope of Work

By prioritizing user needs and expectations from the outset, I ensured that the project not only met but exceeded expectations, delivering an exceptional digital experience.

Process

Personas

As a first phase of the product design process, we carried out several interviews with people from the target audience and identified three main personas for this e-commerce UX project.

Zoey
27 | Graphic Designer | Single
Info

Just finished post-grad and now works for a tech company. Slightly above average annual salary. Loves to travel when she can. Doesn't mind saving on good fashion.

Frustrations

She has trouble finding classic and trendy things online. She tries to avoid having the same look as someone else.

Needs
  • An easy way to shop for affordable yet hip clothes
  • Express her unique style
  • Shop key pieces for any season
Marisa
34 | Digital Media Manager | Single
Info

Works in Digital Media management for a top 500 company. Above average salary. Travels for work, but mostly for leisure. Can afford higher end pieces.

Frustrations

She has trouble finding classic and trendy in one place. She also gets overwhelmed trying to find things she likes online.

Needs
  • An easy way to shop for quality, yet hip clothing
  • Express her unique style
  • Easily packable, classic separates for travel
Julia
48 | Marketing VP | Married
Info

She's married with children and works as a VP of marketing. Above average salary. Travels moderately for both work and leisure. Likes being rewarded for customer loyalty.

Frustrations

She's not much time for shopping, buy when she does has trouble finding stylish/functional pieces. She has trouble creating entire looks.

Needs
  • Functional pieces that fit her lifestyle
  • Suggestions for head-to-toe looks
  • Ease of shopping

Information Architecture

After working with managment to determine the merchandise hierarchy, I was able to define the overall structure of the site. This ensured ease of navigation and determined where to include valuable information such as size, points info, etc.

High-Fidelity Wireframes

After iterating on main components of the site through sketches and rough wireframes, I created a functioning prototype with higher fidelity wireframes to be utilized for user testing.

User Testing

I helped conduct several user tests in which users’ were asked to carry out typical ecommerce scenarios within iterations of the prototype. I've detailed a few of the iusses gathered from the tests and how they were ultimately addressed.

01
Something popped up

After landing on the website, many found the email capture modal pop-up distracting and disruptive to their browsing experience. To address this, I ditched the modal for a sticky footer at the bottom of the site. This adjustment allowed users to engage with the site's content without interruption while still providing them access to important information.

02
Shop smarter, not harder

Users expressed frustration with adding items from the lookbook to their cart individually. For efficiency, I implemented a single "Add to Bag" button under each item in the lookbook. This button dynamically populates when options for each desired item are selected, allowing users to add multiple items to their cart simultaneously.

Design

Color & Typography

White, grays and blues dominate the color palette, echoing the brand's sophisticated and modern aesthetic. The combination of a sans-serif font and a contemporary serif font adds refinement to the site's text while ensuring readability and clarity across all devices.

Icons

Simple and straightforward iconography enhances the user experience by providing clear visual cues without overwhelming the minimalist design. This ensures intuitive navigation throughout the site.

Grid

The website's layout is structured on a 1440-wide 12-column grid, providing a flexible and organized framework for content placement and alignment.

Components

To streamline both design and development processes, I created reusable components for UI elements throughout the website. These components were designed with flexibility and scalability in mind, allowing for easy customization and adaptation to evolving requirements.

Final Solution

Homepage

The homepage is structured to highlight key entry points for seasonal collections, essential pieces, and account access. Additionally, there is emphasis on the brand's social media presence with the hashtag #getawaystyle.

Lookbook

A curated set of styles and accompanying photographs to assist in purchasing complete looks from head to toe. From each slide, users can buy only certain pieces that they like or the entire outfit.

Account

Here users can store personal data like payment information and addresses for future purchases. Also included is a detailed view of points earnings and usage and an explanation of the referral program.

About Page

Through compelling storytelling and vivid imagery, this page captures the brand’s ethos of stylish and functional clothing designed to accompany women on their journeys.

Product Details

The product details page prioritizes clothing photography while providing essential information like sizing and returns. Its clean design is uniquely adaptable for various devices, maximizing space for informed decision-making.

Size Guide

A comprehensive guide to sizing across multiple articles of clothing. Also provided are tips on how to measure for particular items. The guide is also readily available for users on the the product details page.

Points Page

Details the various ways in which users can earn points towards future purchases. This links into the users account to show their current balance of points and those pending.

Checkout

Meticulously designed for seamless usability, prioritizing ease of navigation and effortless application of earned points. This user-centric approach ensures a frictionless journey from cart to completion, enhancing overall satisfaction with the purchasing process.