Lexy Yu

The Home Depot Project Loan
(Case Study)

This UX Case Study provides a detailed description of how I designed a consumer financing application as a senior Product Designer.

Background

The Home Depot Installation Services Division was low on sales and lacked the competitive edge of providing their customers suitable financing solutions that tailored to their customers and the various business workflows within their Home Depot Installation Services Division (including Kitchen, Window & Door, Flooring, Cooling, Heating, Roofing, etc).

Role

As the lead Product Designer for the project, I was responsible for the User Experience design and the Visual design. My role was to participate in all activities starting from high level Requirements elicitation till shipping the project for the client’s acceptance test. During the project circle, I highly collaborated with the external/internal stakeholders, PMs and Engineering teams on this project.

The Design Process…

Empathize

Collaborated with our Research team, we conducted on-site visits, interviews and surveys to gain user insights from the Home Depot customers and the Installation Services departments, in order to learn about the staffs involved in installations, the store layout and technologies, the installation process from multiple perspectives and how payment options are presented to customers. I was able to capture their pain points and frustrations. These guided me in drawing up the empathy maps and user personas.

And here were the key findings:
- Nearly 75% users say they would like to finance their home projects if suitable products are available.
- Users have more confidence in a product when they’re familiar with the brand and the place.
- Users feel more comfortable about a product if they have more control on it and do all they want by themselves.
- Users like to be able to track their loans and do things by themselves instead of having to ask a third party all the time.
- A good mobile app builds trust and confidence.
- Some users are skeptical about trusting their money and personal information with other parties and it’s very important to design something that feels comfortable and trustworthy.

Define

Problem Statement:
The Home Depot customer has the problem that he/she cannot do bigger home improvement projects or installation services with the Home Depot when there is no suitable financing solution in place. Our solution should deliver a financing product that is suitable for his/her needs so he/she can do bigger home improvement projects or installation services with the Home Depot.

Project Requirements:
To design an easy-to-use loan app that appeals to the Home Depot customers and the Home Depot Network for their workflow integration:
- Speedy approval and disbursement of loan
- Borrow amount according to the customer’s project need
- Sufficient time for the customer to work with the installation services department, or getting other purchases
- Opportunity for the customer to increase/decrease the initial approval limit when there are changes in his/her home improvement project, if his/her credit profile allows
- Flexibility repayment plan
- As simple and frictionless as possible
- Easy onboarding
- Easy access to the loan for reviewing details and self-managing the loan

The Customer Journey:

Ideate

After the discovery phase, I had a clear idea on how the product should work, envisioning what the user flows for could look like, from getting to know about the financing option, applying for and getting credit decision, continuing with their options, customer onboarding, making transactions, reviewing balance and calculating their repayments, managing account and loan options, making repayments, etc., and what steps would the customer need to go through in the loan process, and on-screen? What about the edge cases, error handling or identifying the most important requirements in every step of the customer journey. I conducted brainstorming sessions with the team for as many ideas as possible, and produced user flow diagrams, use cases, feature and requirement charts, wireframes to help illustrate the ideas.

User Flows Example:

Use Cases & Requirements Example:

Prototype & Test

I categorized, analyzed and short-listed the winner ideas for wireframing and prototyping to run usability tests on with the users, including the Home Depot customers and staff from the Installation Services Departments. I constantly went back to refine/iterate my ideas/prototypes based on the user feedback and re-ran tests again with the users as many rounds as necessary, until I achieved the ideal solution.

Preliminary Wireframes Example:

Final Product

All design and content needed to be clear, effective and accessible to users, as well as compliant with the Home Depot's corporate branding and style guide.

Outcome

This nation-wide Home Depot Project Loan has been well received by both the Home Depot customers and the Home Depot Network ever since its launch. Tens of thousands of loan applications have got approved and tens of millions of dollars have got spent with the Home Depot Project Loan card every year. It has successfully reached and beyond its initial target and is expected to grow based on data.

This is the plaque I received from the sweet company to recognize my contribution and consistently high performance on bringing this mega project to life. *Only sad fact: it's completely sealed in a crystal plaque, and the numbers were randomly generated, of course :(

More UI Highlights

Atomic Design System

The Tag Atomic Design System is a series of individual styles and components, that we combine to create straightforward and beautiful design and experiences.

The Story

Our application is built by large team. As our team continues to grow, the need for visual processes becomes more important in order to create coherent and consistent user experiences that can scale. Without a standard design system, different people will contribute new styles and design principles over time, casting the overall product experience to diverge and out product to devalue.

Through a standardized design system, our team can eliminate inefficiencies and other main problem areas by:

1. Reducing the amount of time spent doing painstaking visual QA work for each feature or product enhancement.
2. Ensuring a consistent mockups and wireframes during the design process across all product and engineering teams.
3. Keeping a strong visual north star that eliminates the need to reinvent the design wheel during each product sprint.

At the end of the day, our design system is built to ensure product consistency, overall team efficiency, and better experience to delight our users.

The Foundation

The Methodology

We followed the Atomic design methodology. Atomic design provides a clear methodology for crafting design system. Team members are able to better appreciate the concept of design system by actually seeing the steps laid out in front of them.

Atomic design gives us the ability to traverse from abstract to concrete. Because of this, we can create system that promotes consistency and scalability while simultaneously showing things in their final context. And by assembling rather than deconstructing, we’re crafting a system right out of the gate instead of cherry picking patterns after the fact.

The System

Credits: This highly collaborative project and design system was created and contributed by multiple members from the product design and development team from the organization.

Sunrise Medical Website & App

Sunrise Medical is a world leader in the development, design, manufacture and distribution of medical equipments. Sunrise Medical’s key products, marketed under the Quickie, Sopur, Zippie, Breezy, Sterling, JAY and Coopers proprietary brands, are sold through a network of homecare medical product dealers or distributors in over 130 countries.

However, the manufacturer is faced with the problem of outdated design and low conversion on their online presence. A detailed analysis of the problems revealed a number of problems that were solved with the help of an integrated approach. The project scope includes the manufacturer’s product site redesign and mobile app development.

To ensure its success, a detailed site map is established to help both the users and search engines navigate the site. User needs is also analyzed for different groups of target users(Consumer, Dealer and Clinician). Then all areas of site, features and functionalities are revisited and redesigned or enhanced. The cycle of prototyping, testing and iteration takes places frequently, as part of our important process to save time and solve many problems.

The important adaptive version of the site is also carefully considered. After all, the most popular device for browsing the web is mobile. The project is designed in the best traditions of minimalism. Made with soul and taking into account all the needs of the target users.

For most of the product lines, we need to design intuitive product cards, advanced product filters, product categorization and product suggestion tool for target users to interact with, which is critical to the product usability and user experience.

In addition to product browsing and searching, the different target users are also able to sign into their account/portal to accordingly do online order, book a demo/training, or get self-help learning and resources.

Credits: This project was contributed by multiple stakeholders from Sunrise Medical organization.

City of Markham Culture Plan IA & Design

The City of Markham manages significant cultural assets and provides an array of programming for its citizens and visitors. The long-term strategic development and management of Markham’s civic cultural assets and fostering of community-based cultural assets is crucial to the City’s future development and its success as a welcoming, liveable and prosperous place for all.

The project is to put their vision and plan into visually presentable format to support their public communication.

This projects involves tremendous information and stats to work with, and requires multidisciplinary skills, including Information Architecture, Editorial Design and Image Manipulation.

This over 100-page City of Markham Culture Policy & Plan, was successfully designed and delivered to the City of Markham, Culture Department.

Creative Markham for All! To learn more please visit City of Markham official website.

Foresight CEM Mobile App

Vital Insights(now Enprecis Group) is the leading designer, developer & distributor of customer experience management solutions for the automotive industry.

Vital Insights, a Canada-based provider of enterprise customer experience management (CEM) software solutions. Vital Insights designs, develops and distributes enterprise-class daily tracking and Customer Experience Management (CEM) solutions. Its product lineup is Foresight™, a platform that distributes, gathers, and manages customer feedback.

I join the branch to design and develop the company’s new product Foresight Mobile™ – a mobile application for CEM, to give their users a tool to respond to time-sensitive issues, preventing possible customer defections directly from their wireless smartphones.

I design and develop the new dashboard and portal to help their partners, such as BMW, Audi, JLR, Infiniti, Nissan, to gather and analyze data through highly customizable surveys, emails, social media and other digital channels, as well as to view KPIs, reports and other insights, through this innovative, powerful platform.