While redesigning the existing application, our primary goal is to provide users a seamless, interactive, and engaging experience so that they can quickly and effortlessly convert their home décor/ improvement visualizations into an interactive experience with accurate plans, designs, and pricing estimations.

Before diving straight into the user research, design process and coming up with a solution, I have focused on identifying issues with the current application as well as I’ve framed a problem statement by identifying below 5 Ws:

1. What is the application?
   – a web browser based application for mobile, tablet, and desktop devices.
2. Who is it for?
   – for the Peak Group of Companies and the Home Depot’s end-users who are looking for build a home-improvement projects.
3. Why is it required to be redesigned?
   – to provide mobile device support and improve conversion rate so that as much as users can complete the designs and get accurate estimates for their home improvement projects.
4. What does it need to do?
   – make it interactive, user-friendly, easy-to-use, and engaging for the users to complete their railing design tasks.
5. Where/ When will it be used?
   – users can use this app on their mobile, desktop, or tablet devices while sitting at their homes to design their home improvement ideas and instantly get accurate estimates.

1. Very Lengthy Workflow and Confusing Interface
– The existing (V1.0) application relies upon a ‘Wizard’ that guides the customer through all of the required steps in order to complete the reasonably complex process of designing a railing project. Wizards are effective in making sure that all users go through all steps, but in the case of this application, ¾ of the users only require a small subset of the steps or processes but are forced to go through all of the steps. This was a bit clumsy and can be quite confusing for the end-user.

Based on Hotjar findings, I found that all users couldn’t seem to figure out how to get going from the very first screen. They started clicking randomly on the screen, trying to draw a shape. Quickly, after realizing that this wasn’t working, they looked around and found the controls. Therefore, based on this scenario, I figured out that there should be some animated hint or walkthrough screens in the application’s launching to clearly understand what to do and how to proceed with the interface.

– Annoying numerous popup windows also provides a worst experience for the user to complete the user journey. For every single action, a mandatory popup screen has been implemented in the system, which distracts a user to perform the actual design.

2. No Mobile Device Support
Between 55% to 65% of Home Depot’s website traffic in both Canada and the USA comes via mobile devices, but as the existing system doesn’t support in mobile device it redirects the customers to a separate landing page that speaks to the value props of the railing system, contains the video, testimonials as well as tentative pricing estimates. The page also lets the customer know that they need to use a full-size browser to do a custom design. As this wasn’t the ideal experience many customers were exiting from the application.

3. High Bounce Rate & Meager Conversion Rate
As the application wasn’t developed for mobile devices, many users coming through the Home Depot portal were not able to complete the railing design for their needs which resulted in a high bounce rate and poor conversation rate measured through the Google Analytics metrics.

4. Slow Performance
Many custom JavaScripts and 3rd party APIs have been used in the existing application which make it very slow.

5. Rigid User Flow
Due to the wizard based interface, the workflow of the system is very rigid. If a user wants to edit the railing design parameters (for example, railing color, railing dimensions, or components), he has to start over the entire process, which makes the system more rigid. There is no way in the current system to edit the parameter in between the flow.

6. Poor Usability Standards
There was no color theory, typography, iconography and accessibility standard defined across the pages. Therefore, based on Hotjar reading, I was easily able to spot the user’s frustration while accessing the application.

For instance, the screen below has equal weightage for ‘Let’s get started’ and ‘Cancel’ buttons. There were no primary and secondary buttons defined in the system. Along with that, there was no visual indication about the required fields (for example, ‘*’ next to the field) therefore if the user clicks directly on ‘Let’s get started’ system throws a notification to fill the details.

Based on the initial user research performed I have identified a persona of an interior designer as shown below.

After all the groundwork was done, I was then able to demonstrate the application’s complete functionality and its noise measuring capabilities by creating interactive prototypes.

Existing application has very confusing ‘Wizard’ based interface, which doesn’t give enough information to the user about how to proceed further with the application. While, in the new application, I have simplified the user flow by adding a walkthrough screens in the beginning of the application. Even considering the returning user scenario, I tried not to display the walkthrough screens as an autoplay mode. For the returning user, if user want to view the walkthrough screens again, he can go to settings and run the walkthrough again.

Here is the before and after interfaces of the application.

I then created entire prototype for desktop and mobile devices including all micro level scenarios.

As the company’s branding was already being defined in the visual design phase, I followed the logo colors as a base. Moreover, I have determined the form components and style guides for the developers to develop further.

Indeed, this was a fantastic project to work on as a UX/UI designer because it inspired me to design the best solutions within a new design system. I had worked on many web applications before. Still, this project allows me to understand the users’ frustrations in-depth with the previous application. On top of that, using qualitative and quantitative research outcomes, I had a clear picture in my mind about how to come up with a crystal clear solution for the users so that it can be a win-win situation for the end-users as well as my company who is investing a lot of efforts to develop such a seamless application.

Moreover, this product’s remarkable success measurements keep me motivated to provide better and better solutions for this application.