Christian Diaz

Christian Diaz

Door Visions

About the Project

A responsive web app that allows customers to build their own garage door, place it on a photo and request a quote from a dealer.

Client

C.H.I. Overhead Doors

Company

iTexico

Disclaimer

To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in this case study. The information in this case study is my own and does not necessarily reflect the views of iTexico


Business requirements and my role in the project

C.H.I. Overhead Doors is one of the biggest garage doors manufacturing companies in the USA,  and they were looking for a way to increase conversions from their website. The client had an internal app that allowed their dealers to build a virtual garage door, so he thought it could be a good idea to port it to a web app that was available to their potential customers.

My role in this project was as a UX Lead, conducting meetings and interviews with the client, their IT department and some of their dealers and customers. At the same time, I managed the design tasks, delivery quality and a team integrated by 3 designers.


 

Documentation

I conducted some interviews with the client, the IT department and some dealers which had a lot of experience with customers. There was no documentation for their internal app, so I decided to generate the following deliverables that would be useful for the design, development and QA phases:

  • User Stories
  • Information Architecture Map
  • Swimlane Flow
  • Wireframes
  • InVision Prototype for Desktop
  • InVision Prototype for Tablet
  • InVision Prototype for Mobile

This was very useful for mapping the scope of this product, some technical details and even for the client to show progress to the stakeholders.


Usability Challenge

Since this was a responsive project, we had to take into account that it was going to be used with both touch and pointer interfaces. So we had agile cycles between design and development to iterate our ideas and be sure that they were feasible.

We were able as a team to implement a feature that worked in all major browsers, across desktop, tablet and mobile devices, no matter how the user input was.  The user was able to build their door, and then to resize and/or distort their creation to place it in their own home picture.

This was not easy to achieve, but it generated a big wow factor with the client and his customers. But above all, it was a useful experience not only for their customers, but for their own dealers.


 

Added value and results

The original app in which this project was based on, had the ability to save the built door as a PDF so the dealer was able to generate a quote. In this case, and since this was going to be available to the public, we took advantage of the data provided by the client: the added value that we implemented was that, once the user built and placed the door in their picture, they were going to be able to send this information and request a quote from the nearest dealer according to his location. This way, the marketing team of the client was able to track the sales funnel from there, and be sure that all the technical aspects of building and installing a garage door were accomplished.

The client saw an undisclosed increase of sales once this tool went live, according to the marketing team. But beyond that, it turned out that the app increased the onsite sales because dealers were delighted to use it on their stores, and build the doors with the clients sitting next to them.