Reece maX Mobile

Reece maX Mobile

Role: UX Designer

Skills: UX Design, UX Research, Competitive Analysis, UX Flows, User Journey Maps, UI Sketching, Wireframing, Branding, Prototyping

Timeline: February 2023 - April 2023

Reece's Background

Reece USA has established itself as a leading force in the Plumbing and HVAC industries, experiencing impressive growth and success. With a primary focus on trade customers, delivering exceptional shopping experiences is key to their continued success. To achieve this, Reece is exploring the development of a mobile app tailored specifically for its Repair and Remodel customers, marking the first step toward creating a comprehensive mobile platform for all of Reece’s clientele.

The Challenge:

Reece USA understands that providing an outstanding shopping experience is essential for its growth, especially for its Repair and Remodel customers. The challenge lies in effectively addressing the unique needs of these customers. In response, Reece is considering a dedicated mobile app for Repair and Remodel customers, with the goal of expanding to a full-scale mobile application that serves all Reece customers in the future.

Problem Statement

How might we develop a mobile app for Reece USA that effectively meets the needs of Repair and Remodel customers, enhances their shopping experience, and seamlessly integrates with Reece's existing systems and processes?

User Research

During our initial conceptualization phase, we utilized a Miro board to ideate freely and wrote down our ideas on sticky notes. To promote creative thinking, we consciously avoided limiting ourselves by considering competitors, best practices, or constraints. We encouraged the generation of unconventional and even seemingly unrealistic ideas, recognizing that this was an opportunity to explore a wide range of possibilities without judgment. We recognized the value of this approach, as it allowed us to tap into our imaginations and consider innovative solutions that may have otherwise gone unexplored.

Persona

Once we had completed our ideation phase and generated a wealth of ideas, we turned our attention to researching the target audience we envisioned for the mobile app and creating the following persona of an HVAC Technician who performs Repair and Remodel jobs.

Why Repair & Remodel?

We validated the need for a mobile app for R&R customers by going to the branches and talking to the branch managers, outside salespeople, and customers directly. They told us:

Counter sales employees have a great relationship with customers so it's very convenient for customers to call and ask about orders and stock directly;
The mobile app would be particularly beneficial for R&R customers who mainly use mobile devices while on the go, as the browser e-commerce platform is not optimized for mobile use and can be challenging to navigate;
The company cannot readily address the user experience issues on the browser-based mobile e-commerce platform, the mobile app would offer the most significant advantages to R&R customers

The Reece Innovation team is introducing and working on Reece Vision, an AI tool that includes:

Ability to identify products from photos
Chatbot that helps users solve needs without having to talk to a live representative

R&R customers would find the AI features, such as warranty label scanning, compatible repair parts identification, and warranty replacement processing, to be especially advantageous.

“I want to find products and view stock information at my local branch on my phone.”

Journey Map

Following a series of user interviews conducted with both the branch team and customers, we developed a journey map that illustrates the steps involved in the R&R customer's journey from the start of their job to its completion.

Competitive Analysis

I initiated a study on the mobile apps of our rivals, including our proposed maX Mobile app. Through this analysis, I examined 11 mobile applications to evaluate their strengths and weaknesses. This approach assisted me in determining which features should be included or excluded in the maX Mobile MVP. By observing how frequently a feature is included in the 11 apps, I was also able to discern how maX Mobile could differentiate itself from our competitors.

mobile apps that I've researched have a camera AI tool.

This is a major takeaway since this is one of the major features that we are deciding to include for our R&R customers. This can help set us apart from competitors. In this industry, product search is tricky especially for people new to the trade because memorizing hundreds of SKUs is expected.

mobile apps that I've researched have an AI chat tool.

This is another major takeaway because we want to give our customers an answer to all of their questions in any circumstance. AI chat is going to help shift our branch employee's attention to customers inperson and also give our customers support in any time of the day.

"Sometimes, I can't find the parts I need for repairs, and finding a substitute that works isn't always easy."

UX Flows

After conducting a competitor analysis, we identified the features we wish to prioritize for this MVP iteration. To facilitate our decision-making process regarding their integration, we developed UX Flows.

Checkout Flow

Camera AI Flow

AI Chat Flow

UI Sketches

As a next step, we began to create UI sketches that would enable us to outline our ideas swiftly. This approach facilitates the visualization of our concepts from the UX flows without fixating on pixel perfection or adhering strictly to our design system. We then gathered feedback on the sketches by having stakeholders write out their thoughts on the sketches and add emotes on particular sections of the sketches that stood out to them.

Home - Feedback

For the home screen sketch, I got a lot of helpful comments and questions:

Will the app ask for location permissions;
How are users expected to view their order history;
Lists are a very important and commonly used feature;
Having the selected branch at the forefront is helpful;
Will there be a way for users to recognize quickly that they are logged in?

Quick Poll - Navigation Bar

One question that I came up with while working on the UI sketches was about the navigation bar icons. I knew I wanted 5 icons in the navigation bar; however, I wasn't sure which icons would be the most important and in what order.

I conducted a quick poll with some branch employees to get the feedback that I needed and thankfully, the poll was well-received with 69 total votes.

58/69 people liked the Home icon being first
11/69 people preferred that the Home icon is centered

Although this poll was conducted early on in the design process, this will be helpful in the wireframes in the next step.

Chat - Feedback

The AI chat flow was a little more confusing for the stakeholders. They had concerns with:

Who will be in charge of live chat in case the AI chat didn't answer the customer's concerns;
AI chat should have the look and feel of a normal messaging interface to help convince users that the system is reliable;

This feedback helped me form my next steps in finding out more information on the capabilities of AI chat and process.

Scan - Feedback

Feedback for the initial scan flow was something I anticipated a lot because it is considered the selling point of the app. I decided to sketch out an onboarding because I think it will be incredibly important for the user to get the most out of this feature.

I received a lot of positive feedback for my scan flow sketches, indicated by the empty sticky notes and emotes. Some of the feedback I received included:

Having informational tips as the user is interacting with the scan is good;
Allowing users to align their image within set boundaries could help users with ensuring that they are scanning and focusing on the correct thing;
Take the opportunity in the scan results to allow users to add products to their cart.

Wireframes

And thus came the wireframes. With the feedback from our UI sketches, we thought that instead of going back to the drawing board and sketching more, it would be good to get the perspective of the user experience through wireframes. Again, we did not want to fall into the pixel perfect trap so we built our wireframes in black and white.

Onboarding

With our research, we realized that many eCommerce apps have onboarding processes. This is something we considered for a long time and ultimately decided we needed because:

maX Mobile is for trade partners
Customers should be introduced to our key features
Registration and branch selection is essential in the shop and buy process

Registration

Registration is a process that gives our users access to the most important feature of the app: successful checkout.

One of our customers' biggest complaints about the desktop browser maX site is that the registration process is confusing and requires a Reece employee to approve.

Our vision with this registration process is for it to be automated and done within a single page.

Furthermore, we want to give an experience that mimics more standard eCommerce platforms so that the app feels more familiar. This starts with the simple feature of PUSH notifications. We want to keep our customers informed in all parts of the process from checkout to pickup or delivery.

Home

The home page is arguably one of the most important pages of any app because it is the first screen that users see coming into the app. One thing that we wanted was to lay out all key features on the home screen so the user can easily access whatever it is that they need.

That is also why we placed our AI Chat feature bubble on the home screen for the user to access. We envisioned a customer needing help with their order or account, if they are in a rush to get the help that they need, being able to locate the help resource quickly is essential. By placing the AI Chat feature on the home screen, even if users do not need help immediately, the home page is somewhere they look most often and are the most likely to remember.

With that being said, this is something that we will need to do additional testing to verify.

AI Scan

We then have our main feature of maX Mobile. It is our AI Scan that allows users to identify products and read labels to get product information, warranty information, related parts, and comparable alternatives.

We have scan which is for barcodes specifically;
If the barcode is not scanning, users can manually enter in the barcode;
And finally, we have the camera which could read labels or identify products as a whole.

Shop & Buy

With the results from our AI Scan feature, users can find products that they need including replacement parts, comparable alternatives, and things they may also need. They can then add the products to their shopping cart and proceed to checkout.

Wireframes Considerations

We completed our wireframes and decided it was time to get some feedback by talking to our stakeholders. I showed these designs in person to the branch employees at my local branch and got some more insight into areas to further develop. In addition to going in person to the branches, I talked to a few branch managers to get perspective from not only local branches but ones across the country.

Some of the immediate feedback we got included:

Getting rid of "lists" for maX Mobile phase 1 because it is not in scope;
Focus on creating a guest experience because that's something that the browser site is currently lacking;
Take a lot of time into looking at how the search suggestions and results could be improved;
Ensure that users are kept informed about their order status to help relieve branch employees from getting dozens of calls for information that should be easily accessible.

Mid-Fidelity

And with that, came the time to create mid-fidelity designs to incorporate the research we did following the discussions with stakeholders about the initial wireframes. Since these are mid-fidelity and our goal with these designs is to capture good user experience through user testing, instead of leaving the visuals up to the user's imagination as we did in the sketching and wireframe stages, we slowly began to integrate some of Reece's branding.

Home screen for a logged in customer

Continuation of home screen

Branch details

Home

First we have the home screens. We want the home screen to act like an access point to all of the app's main features including branch selection, search, account management, cart, AI Scan, and AI Chat.

Our goal is for the home page to not overwhelm the user because many eCommerce apps tend to push products (that may have nothing to do with specific user behavior on the app) and upsell. The home page quickly becomes an endless scroll making it difficult for users to find whatever it is that they need.

And as we know, time is money in trade.

Branch Selector

The branch selector is a very important aspect of any customer's experience. Depending on the branch selected, the product results vary based on stock availability.

We want to allow users to select branches based on their location (device location) or manually enter a ZIP code to get results for branches closer to a job site.

For our customers, the branch details that matter are: how to actually get to the branch, the phone number for that specific branch, and branch hours including any special hours for upcoming holidays.

Branch selector

Updating branch results based on location

Branch details

AI Chat

To ensure that branch employees are not overwhelmed with calls and to reduce wait times for customers calling branches, AI Chat serves to help customers with solving common issues. They can provide solutions for customers. Some of the problems that AI Chat could help customers with are: locating products, scanning labels and products, registering for an account, finding order updates, updating delivery addresses, and canceling orders.

In order to help encourage the use of this AI Chat, we want to use language that sounds personable and provide services that imitate that of a branch employee.

Example of AI Chat helping a customer out with changing their order's delivery address.

AI Scan

The main feature of maX Mobile is AI Scan. The goal of this feature is to help users quickly and easily identify all the most important information about a product. Upon scanning a label, we want to be able to display the product's serial number, model number, manufacture date, and warranty expiration date. This is all information that the user would look to get by calling the branch or bringing the product to the branch. We also want to digitize starting a warranty claim.

Scan barcode

Camera recognition for labels & products

Manual barcode entry

Product result from AI Scan

Related Products

From the AI Scan product results, the customer can easily look at related products such as: replacement parts, comparable alternatives, and things they may need to successfully complete a Repair & Remodel job.

Product Details Page

The user can get all important information about a product by looking at its product details page (PDP). On this page, we want to show the user any savings they would get relative to the competitive market price. We also want to allow users to pick from options for the product and warranty. If the user needs it, they should find all of the main important specifications in the product overview tab, which will always be open by default. Otherwise, they can find any additional documents, product codes, specific features and benefits, technical specifications, and package dimensions in the other tabs.

Below the detailed specifications, the user can revisit the replacement parts, comparable alternatives, and things they may also need in a carousel view.

Product detail page

Competitive market price, product options, & stock

Product specifications

Cart

Then we have the cart flow. Our goal is to help users review products that they are interested in purchasing and provide a quick summary of what the pricing will look like.

We want to give users the opportunity to make last-minute decisions and save things that they want to purchase but not with this specific order through a save for later tab. The save for later feature basically acts as a secondary cart allowing users to move products back and forth as they need.

Of course, we also want to give users the ability to change the branch location that they are shopping from so that users do not have to build their cart from scratch upon realizing that they need to select a different branch.

Checkout

Finally, we have the checkout flow. Our goal is to help users check out successfully. This means providing users with options to pick up, get products delivered, pay with their credit cards right away, or pay in-store. We also want to save user's information like shipping and billing addresses to make the checkout process as convenient as possible.

In the order confirmation screen, we want the user to review their order so that they can easily confirm the details of their order so that they realize sooner rather than later if they had made a mistake with their order. This helps ensure that the user can quickly cancel and reorder before the order is processed and ready for delivery or pick up.

Checkout via pickup

Checkout via delivery

Order placed & confirmed

Demo with Stakeholders

With our mid-fidelity designs done, we took this opportunity to share with our internal stakeholders the designs and get some of their feedback before we dive deep into user testing. The participants of this meeting consisted of the Project Owner, Business Analyst, Chief Marketing Officer, Scrum Master, and UX Designers.

Overall, there was a lot of excitement over the experience made for the users. A lot of questions concerning the technical feasibility of the key features.

We revisited topics on why different branch teams across the country have trouble getting customers to use the mobile responsive browser shopping site. This discussion was important in this demo to showcase how this app can break through the barriers that the existing site was navigating and whether or not the designs are showing going in the correct direction.

With that, the team began to talk about features the app with missing - things that we had considered already for future phases - which then means, we are ready for user testing!

Next Steps

Unfortunately, I was not able to begin planning for user testing. The designs are ready, the team was not. Because our team lacked resources in the existing shopping site, we had to shift gears and work on tickets and hereby put this project on indefinite hold. I created documentation on all of the work that another designer and I did so that this project is ready to be picked right back up whenever and by whichever designer in the future.