Sabrina Yi-San Liu
E-commerce Mobile Application Redesign
Solo UX Redesign Project
TJMaxx's mobile shopping application is a necessary investment, especially as the trend of online shopping becomes increasingly popular. However, upon closer assessment of the application, their most important "Discover" and "Shop" pages are full of limitations and cluttered elements. I took on the redesign to improve the online shopping experience for TJMaxx's mobile shoppers and enhance the usability of the native application.
Discovery
The design process started with identifying the users, their goals, and the challenges they might face on their online shopping journey.
User Persona
With the knowledge of where TJMaxx stands as a seller of low price quality products, I developed a user persona to reflect the needs of the customers. We understand that our persona, Katrina, greatly values not only budgeting and savings, but also the quality that TJMaxx brings.
User Scenario & User Journey
" She wants to get some throw pillows and blankets for her family at the best values "
When we put our persona through a scenario like this one above, she goes through these 4 common journey phases:
Awareness of her need in getting some throw pillows
Searching and browsing for throw pillows
Saving the products and adding them to bag
Checking out
Obvious pain points resurface at phase 3 and phase 4. As Katrina is adding the products to bag from the wish list, she has to click through multiple steps in order to finally add a product to bag. And, as she is checking out her bag, there is no pickup option for her to save on delivery fees.
Application Assessment - Save & Add to Bag
When looking at the current application to visualize Katrina’s interaction with the application, more usability issues arise.
Inside of the wish list, products are skewed all the way to the the left even though most users are right handed. As we design and develop mobile apps, we have to ask ourselves if these calls to action are within thumb range.
When selecting ”Add to Bag”, the product image fills the entire screen. The “Add to Bag” CTA button is hidden unless users know to scroll down to it. After adding a product to bag, the interface can be confusing since there is no indication of where the user is within the app.
Application Assessment- Checkout
Here are the screens for checkout. The interface tells the users how close they are to free shipping; however, it doesn’t give users the option for pickup. As users scroll, they will see the estimated shipping fee. As we know from our user persona, budgeting and saving are very important. How might we help in this regard?
Insights and Opportunities
Some insights that we can translate into solutions to help our users are to eliminate redundant add to bag steps and offer an order for pickup option at checkout to help them save.
Design Solutions
After assessing the current app and the insights gained, I incorporated these design solutions into the redesign:
The My Favorites page is incorporated into the tab bar for quicker access within thumb reach
Add a quicker view of product customization details on the My Favorites page
Include common checkboxes designed for users to select items
The “Add-to-bag” CTA moves saved items to bag without users having to click twice
Provide in-store pickup options for users who want to save on delivery fees
Usability Testing
A usability study was conducted to validate and test the design. Each recruit received the scenario of checking out a product from the wish list.
From the usability test observations, I found three important themes:
Navigational obstacles while looking for their wish list
Confusion when selecting a product in the wish list
All recruits were able to efficiently access the shopping bag for checkout
Through analysis of the observations, I discovered that the navigation challenges were due to the information architecture of the Favorites page. Instead of accessing it through the tab bar, some testers looked for the page inside of the hamburger menu and some look inside My Bag. Furthermore, there was some confusion in selecting the item to add to bag due to a habit of revisiting the product before placing an item in the bag. Last but not least, the usability test validates that the later steps of the user flow are smoother than the initial steps.
Iterated Design
After the usability study, I iterated on the design, and the iterated solution has 3 different ways of navigating to My Favorites page and offers 2 different ways of adding products to My Bag. Because there are no usability issues detected in the later steps, I retained the original checkout flow.