JOHN GRAY: UX/UI/VISUAL DESIGN
Work > Hotwire
Hotwire was originally designed to sell unsold travel products at discounted rates by keeping the identity of the supplier a secret until purchase. This is called an opaque product, and presented interesting design challenges to assure customers they are getting a good value, while taking some level of risk.
My time at Hotwire was spent as a hybrid UI and Visual Designer. During my time I worked on dozens of site optimizations, as well as the end-to-end design of mobile web and native apps.
End to End Design of Native Apps and Mobile Web
Hotwire had not yet explored mobile offerings when I started there. My track record of prototyping quickly and exploring new ways of offering products led me to be picked to start developing the new front for the business. Eventually I would have other designers and mentor others on mobile practices/prototyping, but the first mobile web site and native apps were designed end-to-end with just myself, two product managers, and engineers. I was allowed to rethink the product and go through a design process that would allow us to deliver much more than a recreation of a web site into an app.
Responsibilities
-
Wireframes for web and mobile web
-
Visual design for web and mobile web in CSS
-
Wireframes for mobile apps
-
Visual design for mobile apps
-
Rapid Prototyping
-
User testing
-
Icon design
Optimizing Search with Analytics
One of the most important parts of the Hotwire user experience is the first engagement. This is where the user must search for their travel needs. We had a few goals to improve the user experience in the step of the process. The first goal was to reduce errors in completing the form, getting users more quickly into results, and therefore more likely to checkout. Another goal was to improve the visual front using CSS styles and improve usability for tablets, which were quickly gaining web traffic share. I worked as the UI and Visual designer along with a product manager to deliver an updated product that we could A/B test on live customers and make decisions based on results.
Design Tests for Opaque Product Education
After the users searches Hotwire for hotels they are presented with options to book the opaque product, as well as conventional "named" hotels. I was tasked with prototyping new designs that would help educate users and be more likely to get to the Details screen where the product can be purchased. New layouts and a tab based approach were tested with users in a lab setting to find what was working. I was responsible for designing the UI, visual design, and building the prototypes for the tests.
Design Responsibilities
Site Optimizations with Analytics
End-to-End Mobile Design
Rapid Prototyping for User Testing
At Hotwire, we were asked to do user testing and listening labs regularly. Over the years I built many prototypes quickly for both desktop web site and on-device mobile prototyping. Click the button to watch a video of a billing process prototype.
Homepage Redesign
After the success optimizing search boxes, I was asked to redesign the homepage for more testing. With even more tablet visitors to the site there was a business goal to make a design friendly for touch input and smaller screen size.
The existing home page had lots of links to cached travel deals, opaque education pieces, and lots of various messages and buttons. The process began by removing as much as possible and adding things back that would drive users to search and ultimately conversion.
The final A/B tests were only slightly positive, but we learned much about what we could remove from the page, as well as our first major CSS implementation.