Refreshing the homepage of the apps to drive engagement
__

The Brief

The UX team collaborated with the product and UI teams to update the homepages for our apps. That effort included updating existing components and adding new authorable components.

Project Goals:

• Increase homepage engagement on the app to improve customer conversion

• Create authorable components to inspire and delight customers

• Encourage customers to either sign in or create an account

• Promote specialty programs like BOPIS and Loyalty to increase adoption of omni channel shopping

Client:
Foot Locker Inc. Banners (Foot Locker, Kids Foot Locker, Champs, Footaction, Eastbay)

Role:
UX Designer

Team:
Product Owner, UX Designer, UX Content Writer, UI Designer, Development Teams

Deliverables:
User flows, Wireframes, Best Practice Guidelines

How it started

When we first started this project, the homepage was functional, but it wasn’t as engaging or inspiring as it could be:

• Lacked variety: The only component able to be authored was a full screen image with overlaid text.

• Products were pushed down: A free shipping banner, FLX promotion slot, and a (primarily blank) set my store component occupied about 2/3 on the initial screen.

• Bulky and repetitive: Full screen navigational buckets occupied more than half of the homepage.

• Limited items featured: A third of the products were recent launches, another third were items on sale and the remainder of products on the homepage were new arrivals.

Ideation phase:

We brainstormed some ways to help improve the home page and add fresh components that could be used for multiple purposes.

Ideas included to:

• Feature upcoming launches

• Show new ways to feature products and/or shopping categories

• Offer video and shoppable looks

• Increase flexibility on using components

• Update carousels with added variety

• Preview inbox messages, orders, and more

• New twist on saving items to favorites

The New Components:

From the component concepts that we had created, we held a workshop with the team to help prioritize which components we should implement first.

Here are the new components that were ultimately developed:

Image Grid | Calendar Preview | App Greeting | Pick up in Store | Tap to Copy Promotions | Marketing Perks

Image Grid

This component offers the ability to promote collections, products, brands, or shopping categories in a compact amount of space.

Highlights:

• Adds variety to the mainly single-column page layout by allowing for multiple columns

• Versatile building block for the app: simple yet effective with great potential for re-use

• Helps with the transition to the shop tab by increasing familiarity with the grid design along with decrease the amount of homepage real estate dedicated to navigation from 75% to 10%

• Allows for a collection of items to be grouped together and be visible without the need for scrolling
  

Calendar Preview

Previously, we only featured past sneaker releases on the homepage, which didn’t always have items still in stock. This component will give customers a preview of upcoming releases from the homepage.

Highlights:

• Promotes a few exciting releases, adding to the hype of the drop

• Provides a timely snapshot of some upcoming releases

• In the future, this component can be also used to feature events

App Greeting

This component will help personalize the app and provide an approachable, friendly greeting for customers.

Highlights:

• Encourages customers to sign in or create an account

• Welcomes users throughout the day with a tailored message

Pick up in Store - Initial update

The initial update focused on reducing the overall size of the shop my store component

Highlights:

• Focused the component to one overall task instead of multiple based on conversion rates of tasks

• Simplify the amount of elements and copy to the component

Pick up in Store - Phase 2

Adding featured categories or items will help improve conversion and allow users to more quickly shop a set store.

Highlights:

• By including categories, customers can quickly start shopping their selected store with a reduced need for filtering

• When featuring products, we can pique a customer's interest in the items available at a particular store

• Incentivizes users into setting their store to see their store items featured

• By tailoring the component and displaying available set store items, there’s an added element of customization to the homepage

Tap to Copy Promotions

This component was deployed primarily to assist with copying promotional codes. However, one of the biggest requests from the brands was to also add a shorter hero component. This will help address the request and provide an alternative way to include promotions throughout the homepage.

Highlights

• Allows users to quickly copy promo codes while also providing a quick preview of the fine print

• Enables the option to have the promotional code featured lower down on the page, (given that typically only a handful of items are eligible)

• Provides a shorter, horizontal layout and condensed alternative of the hero component that can be used in a variety of ways

Marketing Perks

This component provides a digestible list to increase brand awareness of programs and services such as perks of the loyalty program.

Highlights:

• Creates an easy-to-read and scannable list

• Can provide an overview of loyalty programs or omni shopping, accompanied by icons that help it stand out on the homepage

• Increase overall design variety available for the homepage by adding another layout for authorable components

Component Use Guidelines

Once the components were developed, we wanted to ensure that they would be implemented in an effective and engaging way. The team assembled a guide on how to best use the components to author the homepage.

Included were best practices, placement recommendations and suggestions on ways to incorporate the new components into the homepage to support a great user experience.