UI & Visual Design
Research and Usability Testing
A Product Centric Approach
The biggest change I pushed for in this redesign was making good use of the amazing library of product photography we had. Our customers discover and buy our product online. I felt strongly that we needed to present the fans in a way that showed of the brilliant industrial design as well as the premium finishes they featured.
Educating the Customer
The old buying experience didn’t seem fit the products premium offering. We set out to change that. We decided to break the buying process into a stepped approach that gave the user one simple task in each section and offered them help if needed.
Color and Finish
In the same vane as placing the product photography front and center we thought it would be valuable to allow the user to zoom in and out to inspect the detail of the designs. The idea was to default to the full view of the fan. As the user zooms in the fan rotates until it reaches the view shown in the top row of images below.
Dividing up the process of selecting your fan’s options was important step forward. It allows us to focus on asking the user to complete one simple task at a time. Some of the details we need to know can’t be avoided or the customer won’t receive the correct product. If they need help with that individual task we try to offer an additional page that informs them of best practices for that section.
Smart Home Features
Connecting to wifi, Alexa, Ecobee, Nest, or our iOS and Android apps is now promoted in a discovery friendly way. We wanted to emphasize all of the interaction methods offered through our smart capable fans.
The Order Summary had a lot of content to handle. We needed to provide a way for users to comfortably review their order. The initial summary reviews the details of the order. The 'In the Box’ page displays a visual representation of the summary. The ‘Specifications’ page displays cut sheets and warranty information that is exportable and shareable.
How We Got Here
To get to this point we ran design sprints, conducted user interviews, ran usability tests on our prototypes, and had endless group discussions about our findings. We usually began with white boarding sessions that I facilitated using a series of sketches based on our previous discussions. We frequently used usertesting.com as well as in-person interviews to validate our direction.
Below are a few of the various high fidelity mockups we created and tested in order to find the right look and feel that we though best represented the brand as well as gave the user the best experience.