The Home Depot Mobile App

Case Study, UI design

Overview

The Home Depot mobile app is exactly the copy of the website, due to that reason some parts feel too overwhelming for a mobile app. In addition, the whole mobile app feels outdated. The idea of this project is to redesign THD mobile app by refreshing the layout, font, icon, and overall user clarity to create a modern look. Also by selecting and displaying information as needed

List item 1

List item 2

List item 3

Role
UI Designer

Skills
UI Design, Prototyping

Tools
Figma

New UI Kit

Current vs Redesign

Home

  1. My store on the top as the product availability depends on the location. When user click, will be redirected to Set My Store page where user can choose the preference store.
  2. Create Account card that link to Sign up or Log in.
  3. Shop Local Offers card to see weekly flyer based on the store selected.
  4. Offers & Info section as carousel.
  5. More distinction for Scan barcode so that user know that the icon is clickable and remove repetition button for scanning barcode.
  6. Recommended For You section as carousel with vertical content. Limited rows for product description and the same card height to maintain consistency.
  7. Same width and height for all images to maintain consistency.
  8. Subscribe to newsletter card, no need to add button as the whole card is clickable.
  9. New icon for Home page using a simple icon.

I rearranged the order of the content and select more prominent content to show on homepage. Also removing the repeated button as the whole card itself is clickable.

Shop

  1. On the main category page, the search bar located as part of the content. on sub category content user can access search bar as icon on the top.
  2. Images to describe category and sub category.
  3. New icon for Shop page using a more understandable icon.
  4. Title for the selected category

Product Result

  1. In store products availability, change the active toggle color to green. When users scroll the page this area will be hidden.
  2. Area for users to select more options. When users scroll the page this area will be persistent on the top. When users click on Sort or Filter, a drawer will show up from the bottom.
  3. Vertical content for products. Only display basic info, such as brand, product name/description, price and rating. ‘+options’ means that more information are available. Users can click on the whole card to see more detail about the product.
  4. Add to cart as an icon to save more space.

Sort and Filter are separated

Product Detail

  1. Product name and description after image to keep consistency with product cards.
  2. Select quantity by clicking on + or – button rather than typing manually.
  3. Save to My List and Add to Cart are persistent at the bottom of the screen even when users scroll down the page.
  4. Delivery and Pickup info. Display what used to be on the product result card.
  5. Product information. When users click, will be redirected to the correspondent page.
  6. Recommended product card component.

Reviews

  1. Title of the page. When user click on back icon, back to product details.
  2. Total review score. Add text to describe what 1-5 are.
  3. Total reviews, Sort and Filter option
  4. User reviews: rating, title, detail review, source

Cart

  1. Page title stay on the top, same position on all pages.
  2. How to get that specific item, the title depends on the selected options below.
  3. Select options to get the item. Each product might have different options.
  4. Return Policy and Live Chat button, will be redirected to correspondent page.
  5. Pay with PayPal or continue to Checkout Now, will be persistent at the bottom of the screen all the time, even if user scroll down the page.

More

  1. My Store location. When user click, will be redirected to Set My Store page where user can choose the preference store.
  2. Accordion menu to separate between category. Same style for icon with outline.

Set Location

  1. Title of the page so user know what page are they looking at.
  2. See the list of location as List or Map.
  3. Different color and size of the pin point of the selected location.
  4. Radio button to show which one is active. The chosen store (my store) will stay on the top.
  5. Only show important info to the user. When user click on Details, they can see mored detailed store info.

Mockup

Some other cool work