Grant Houston – Natural Structure | HauteLook iOS Redesign

Improving Checkout and Account Management for HauteLook’s iOS Apps

Redesigning Cart, Checkout, Confirmation, Orders, and Account Management experiences for iPhone and iPad as mobile purchases became an increasingly important part of HauteLook’s business.

Mobile Commerce Redesign

Old iPhone checkout screen
iPhone Old Experience: Checkout
New iPhone checkout screen
iPhone New Experience: Checkout Completed
Old iPad orders screen
iPad Old Experience: My Account > Orders
New iPad orders screen
iPad New Experience: My Account > Orders
Checkout Conversion
23% Increase in Completed Purchases
Address Validation
35% Reduction in Shipping Errors
2013 Baseline
35% of Sales Through the iOS App
2014 Growth
60%+ of Sales Through the iOS App

Project Overview

At the time of this project, HauteLook’s iPhone and iPad applications had become a significant part of the business. By March 2013, purchases through the iOS apps accounted for more than 35% of overall company sales.

Two areas were selected for redesign:

  • Cart, Checkout, and Confirmation
  • Orders and Account Management

The existing checkout flow contained usability issues and technical problems, while the account area had become difficult to navigate, particularly when members needed to locate previous purchases, check order status, or initiate returns.

My Role

  • UX Design & Information Architecture
  • Wireframing & Axure Prototyping
  • iPhone & iPad Design
  • Analytics Review & A/B Test Evaluation
  • Design Documentation & Developer Collaboration

Team

  • Product Managers
  • Business Insights Team
  • Visual Designers
  • Engineers & QA Team

Reviewing Checkout Behavior

HauteLook’s Business Insights team provided analytics and supported A/B testing within checkout.

The analytics helped answer two questions: Where were members getting stuck, and which changes helped more members complete a purchase? The data revealed that unclear error states and hidden shipping information were the primary pain points, which helped us prioritize where to focus design effort.

Reworking Cart, Checkout, and Confirmation

Cart + Checkout

Old Experience
Old iPhone cart screen
iPhone Old Experience: Cart
Old iPhone checkout screen
iPhone Old Experience: Checkout
Old iPhone confirmation screen
iPhone Old Experience: Order Confirmation
New Experience
New iPhone cart screen
iPhone New Experience: Cart
New iPhone checkout missing state
iPhone New Experience: Checkout (Missing Info)
New iPhone checkout completed state
iPhone New Experience: Checkout Completed
New iPhone confirmation screen
iPhone New Experience: Order Confirmation
  • Combined key checkout information onto a single screen.
  • Made missing payment and shipping information easier to identify.
  • Reduced the number of decisions required to complete checkout.
  • Improved visibility into order totals and discounts.

Cart, Checkout, and Confirmation

The existing checkout experience had accumulated usability issues, most notably around address selection. The app defaulted to the last used shipping address, which was often pushed off-screen at the bottom of the layout. Members frequently tapped “Place Order” without realizing they were shipping a new purchase to a previous gift recipient.

To fix this, we moved the address block higher up in the visual hierarchy and required members to explicitly confirm their shipping destination rather than blindly accepting the default before completing the purchase.

The redesign further focused on:

  • Visual hierarchy
  • Screen organization
  • Form completion
  • Checkout progression
  • Confirmation states

The updated layouts reduced visual clutter, made primary actions easier to identify, and improved visibility into shipping, payment, and order information.

Designing for iPhone and iPad

The iPhone and iPad experiences were designed in parallel.

As solutions were developed for one device, they were reviewed against the other. The workflow remained largely consistent while taking advantage of each screen size.

The goal was not to make every screen identical, but to make common tasks feel familiar regardless of device.

Orders, Tracking, and Account Management

Beyond checkout, members frequently returned to the application to review purchases, check fulfillment status, and manage account information.

Orders, Tracking, and Account Management

Account & Orders

Old Experience
Old iPad orders view
iPad Old Experience: Account & Orders
New Experience
New iPhone account navigation
iPhone New Experience: Account Navigation
New iPhone order detail screen
iPhone New Experience: Order Details
New iPhone package tracking screen
iPhone New Experience: Package Tracking
New iPad orders view
iPad New Experience: Orders View
  • Replaced text-heavy order listings with product imagery.
  • Made purchases easier to identify at a glance.
  • Improved visibility into fulfillment status.
  • Added package-tracking functionality within the application.
  • Simplified account organization and navigation.

A Visual Shift for Order History

Previously, members had to scan and comprehend text-heavy line items without visual context to find a specific purchase. Inspired by patterns from Apple and Amazon, the redesign introduced a radical shift: leading with product imagery.

Because shoppers might have four or five pending orders at once, or be holding a physical product they want to check status on or return, making the interface visual allowed them to instantly recognize and locate the correct order without reading through ID numbers or dates.

Additional improvements included:

  • Clearer order grouping
  • Improved status visibility
  • Simplified navigation
  • Updated section labels
  • Expanded post-purchase functionality