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.
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.
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.
Existing home page design
Move to CSS styles
Can these be removed?
Keep search above the fold?
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.
Designing the Hotwire App End-to-End
Problem
Hotwire customers were demanding native apps for their devices. We knew from our analysts that more and more customers were using mobile to book their travel. Native apps could allow us to offer a superior experience, strengthening our brand and loyalty. The business decision was made to create a minimum viable product on iOS geared to our most loyal customers for booking hotel stays. The company formed a new mobile department to create a new native experience from scratch, using APIs to hook into our backend.
Involvement
I was the designer of the mobile web and native apps from their inception until leaving in 2013. I was responsible for user research, wireframing, prototyping, user testing, and final visual design. Eventually I would lead two other designers on the mobile products for maintenance and feature upgrades. In addition, I worked alongside a product manager, data analytics, and two engineers.
Process
To create the new app, an agile team and process was created. In the early stages I worked closely with the project manager to establish personas and understand the unique experiences available to us on a mobile product with more capabilities than a desktop browser.
With some interviews of customers, and review of analytics, we established some design principles and set business goals of what would be considered a successful product.
Final Results
After many months of user testing and collaborating with engineers to solve challenges the app launched with great fan fare to our frequent customers. Our goals of getting a 4-star app rating and delivering a 4 button booking process was successful. We saw dramatic shift of mobile web traffic move to our iOS app. The next step was to take the success on iOS and replicate the experience on Android platforms.
One of the most dramatic wins was our new innovative approach to results showing both map and list view together. This was so successful with users that the concept was later incorporated back into the desktop web site. This is still one of the primary features of the Hotwire app many years later.
Iterations
With the design principles established early wifreframes and visual styles were explored.
The business wanted to create a differentiated experience with a tactile feel, much like iOS had at that time. Design directions were explored using real world materials like leather.
With the freedom to create a tailored experience for the specific user needs discovered in interviews and analytics, we explored vastly changing the search process. This led to some quite radical changes to the home screen experience compared to our mobile web offering.
The new concepts were built and tested with users with on-device prototypes. This allowed us to observe and iterate quickly. I was responsible for creating the prototypes and iterating based on feedback. We discovered that some of our concepts reached our objectives while some did not work so well.
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