Embedded Files
Designed at Launch Interactive LLC.
Mitsubishi TRANE hired Launch to design and build an interactive scrolling page that immersed the user into the HEAT20 water heater product for users visiting the TRANE website or attending trade shows to view product details as well as Sales Executives to leverage during the sales process to help describe how the HEAT20 product works in a visual way.
Process
We started out the Discovery phase by completing some stakeholder interviews talking to Sales Executives and Sales leaders to understand their goals and objectives with this new experience. We pulled out some common themes across all of the interviews to take with us as we went into the Create phase. We also did a deep dive into some benchmarking across the market on existing immersive scrolling experiences that we could learn from focusing on 4 key design principles:
Intuitive
We want to let the user know what they are getting when they open the experience. Being clear about what the experience offers upfront, and delivering on it, will make this effective.
Control
The user should feel in control of the experience, allowing them to spend as little or as much time on content that is relevant and important to them.
Intentional
The experience should be focused and each movement must be purposeful.
Light
Experience moves smoothly, and feels effortless to the user. It feels lightweight regardless of backend load.
An example theme from stakeholder findings.
Once we had a better understanding of the user goals and objectives and created a design direction we put together some opportunity areas for this experience to go above and beyond what existed from our benchmarking research as well as some use cases to make sure we were covering our bases from the user needs to the business needs.
From there we went into sketching and wireframing as a collaborative team with members from UX (myself), creative and development to make sure all of our ideas were feasible as we moved forward and created the technical approach. Being an immersive scrolling experience the wireframes were light as we wanted to keep the focus clear and create compelling scrolling animations to guide the users’ attention down the page.
Desktop wireframes
Results
We created an experience that not only helped explain the new product, but gave Sales Executives a reliable resource that they could leverage to demonstrate the ins and outs of the product as well.
A section from the final interactive experience.
Google Sites
Report abuse