TJ MAX Website | Jacob TD

This hypothetical project intended to exercise and test my design skills from a user experience perspective.

I evaluated TJMaxx's online shopping experience and explored a few improvements using UX design principles.

The first step, talking to the customers of course!

talking to customers

In addition to talking to customers, I visited multiple TJMaxx stores to gather a better understanding of the store and its customers. This was one of my favorite tasks of this project.

pierre-chatel-innocenti-Lk-nu_hX6ms-unsp

Initial Screening

Received 38 responses for an initial survey that was sent out.

hugo-l-casanova-UTLQ3icUT7g-unsplash_edi

Qualified for usability test

11/38 customers qualified for the usability test.

pierre-chatel-innocenti-muMR2IhCbZ0-unsp

Target Customers

4 of them were available for testing and represented TJ Maxx’s target audience.
(3 Female, 1 Male)

Reveal The Designer

TJ Maxx does not advertise/publicize the designer brand names on its website because it prefers to save money on licensing fees. This means users cannot search by brand and must “Reveal The Designer” across many products online.

Seasonal Fashion

TJ Maxx’s differentiator is offering “current season designer brands” but these are not prominently displayed on their site (i.e. The Runway)

The Treasure Hunt

Search Engine Optimization

Like their in-store experience, TJ Maxx’s online content is vast and overwhelming. Their target audience enjoys “the treasure hunt” but also does not want to go digging.

TJ Maxx’s desktop website is separate from their mobile site (unresponsive). In order to
rank higher in SEO, they will need to reorganize their content so it is displayed consistently across devices.

Observations from the physical store and the digital website.

target persona

A female shopper aged between 25 & 44, fashion & value conscious, enjoys the experience of hunting for that special item, cross-shops at high-end department & specialty stores for designer brands

*Derived based on research.

UX design processes followed

01.

Information Architecture & Sitemap

02.

Task Flow &

User Flow

03.

Layout Analysis, Feature analysis & Element analysis

04.

Heuristic Evaluation, Card sorting & Usability Testing

05.

Low to Mid fidelity mockups & Usability testing

Screen Shot 2018-08-24 at 2.30.43 AM.png

site map

Decoding the site map and understanding the information architecture was an ardent task, huge in scale. This understanding gave me confidence in generating solutions for the design opportunities as they evolved.

TASK

You have been invited to your friend's wedding one month from now.

The attire is semi-formal.

SCENARIO

Navigate the TJ Maxx website and add a designer dress and shoes of your choice to your shopping bag.

Layout Analysis

All competitors/comparators take advantage of using the full desktop viewport.

Century 21 & GILT’s landing pages stand out by utilizing editorial imagery that accurately portrays their “high-fashion” positioning.

Nordstrom Rack and GILT utilize a simplified primary navigation bar offering focused categories.

Nordstrom Rack, Century 21, and GILT have clear utility navigation icons in the upper right-hand corner

Nordstrom Rack and GILT offer “Help” and “Leave a Message” for customer service inquiries.

feature Analysis

All competitors/comparators have 4-6 different sort/filter options, allowing customization of the product selection.

Nordstrom Rack, Century 21, and GILT provide secondary and tertiary categories in the left side menu to refine the search even more.

Century 21 and Burlington have a header within the Product Gallery that showcases the product

categories at the top of the page.

Competitive_Comparative Analysis - Feature analysis.png

element Analysis

GILT, Nordstrom Rack, and Century 21 provide the user with a visual hierarchy using different colors and font weights which are consistent with their branding.

Century 21 provides a checkout progression timeline at the top of the page so users can track where

they are in the checkout process.

Heuristic evaluation

Findable: Serious Problem

The Primary Navigation overlay fills viewport almost
completely above the fold. Information overloads in each category, lead to decision fatigue with so many options and overlooking information (i.e. The Runway).
Much time is spent sifting through excessive categories and
sub-categories. Filters/sorts for products are irrelevant and
provide varying results.
The layout of the product gallery page does not effectively utilize the full real estate of the viewport, and there are no other view options. This results in almost infinite scrolling.
For Mobile, “Quick Look” is not available, and “You May Also Like” carousel has limited suggestions.

Accessible: Minor Problem

The site can be used across devices, but desktop website experience is inconsistent with mobile
experience, as some features are unavailable on
mobile site.
Low contrast between foreground and
background colors. Adequate contrast is
necessary for all users, especially users with low
vision.
Text that has a contrast ratio of less than
4.5:1, or large text (larger than 18 point or 14
point bold) has a contrast ratio of less than 3:1.

Clear: Serious Problem

Filters/Sorts collapse, so there are no clear indicators of applied filters/sorts while shopping.
The filters applied do not exclude "out of stock" options in the
product gallery (information is provided in product detail page
only, so users need to go back and search again for in stock
items). Filter settings are not accurate based on input.
Inconsistency with unclear filters, specifically size - some
products offered in American vs European sizes.
The repetition within categories is confusing.
"You may also like" carousel is unclear because it does not
provide appropriate options to assist the user in shopping.
(either too similar to the selected product, or inaccurate
recommendations)

Communication: Minor Problem

Multiple levels of product categories communicated
could cause decision fatigue
“Compare at $____” does not communicate the savings
clearly. Also, “You Saved $____” in shopping bag is also
unclear, and inaccurate (excludes tax and fees).
“Checkout Chat” feature is gimmicky - does not
accurately communicate valid User Reviews, lowering
credibility.

Useful: Serious Problem

Content on the site is detailed but produces a lot of time spent for
users to move through each category, filter, sort, etc. to try and
find a product they need. Frustration and/or abandon may occur
if the user does not want to put in effort, and simply goes to another
site if TJmaxx does not offer a useful online shopping experience.
Content typically remains the same for both FTU’s and Loyal Users - not uniquely curated for either.
Many options to view the same the information but in different
ways which may cause decision fatigue in the online shopping
experience.
Utility Icons in the top right corner are small and not labeled.
The "Profile"" Icon is not present on the Utility navigation on the mobile site.

Credibility: Serious Problem

Several font families with varying weights and colors
being used, in addition to the different punctuation
rules. The lack of a clear hierarchy in the styling makes for a page that feels unstructured and lowers the credibility.
Several entry points and instances of clearance
sections and clearance promotions within primary,
secondary, and main landing pages. Can be
overwhelming and distracting to the experience.
No way of speaking to a real person on either platform
if assistance is needed when online shopping. When
asked for sensitive personal data on the checkout page,
there is no help or support content available.

Controllable: Minor Problem

Hamburger navigation menu on mobile pops
out from left and almost takes up full screen -
no way to adjust the view.
For mobile, the back button often takes the
user to the last screen visited instead of
previous screen based on navigation levels, this
causes confusion because users feel out of
control of where they want to navigate.
Zoom Feature in Product Detail page covers
product information fully which is inconvenient
and disturbing to the shopping experience.

Learnable: Meets Best Practice

Once the user is oriented, they can grasp the
navigation and content.
Main & Utility Navigation is global, and there are many
defined tertiary and quaternary categorizations to build context for the user.
Mobile sites may be more difficult to learn since the
interactions/content displayed may be hard to grasp
and not digestible on mobile devices.

usability testing

Scenario

You have been invited to your friend's wedding one month from now. The attire is semi-formal.

Task

Navigate the TJmaxx website and add a designer dress and shoe of your choice to your shopping bag.

4/38 tests

4/4 users completed the task.

The usability test was conducted remotely using Lookback.io with 4 users representing the target audience and selected from 38 prospective users.

"What is the runway?"

"Nothing(Filters) seems to be working, so I am going to look for something red."

I decided to focus on Findability as an opportunity to improve.

"These categories do not make sense and are irrelevant."

How
might
we...

The Problem Statement

How might we enable a new customer to perform online shopping at TJmaxx with high accuracy by providing easy navigation and sensible filters so that she might reach the checkout window quickly?

Why

Information overload in each category leads to decision fatigue with excessive categories and sub-categories, irrelevant filters/sorts and also overlooking of information (i.e. The Runway).

To play, press and hold the enter key. To stop, release the enter key.