Great Wolf
Redesign Day passes Page
Great Wolf started redesigning their entire website a while ago and they wanted to redesign it not only visually but also to improve the entire user experience. The page to buy half-day passes and day passes was very complex for the user, difficult to understand and was very basic too.
The problems detected:
The interactions did not have an order that helps the user to buy according to the steps, there was no hierarchy in the information, the difference between buying a one-day pass and a half-day pass was not understood and the whole page was not very visually attractive.
The opportunity:
During several meetings with the product team, we realized that when the user purchased an overnight stay in the park, the passes were included. And it was roughly the same price, staying one night with passes included than buying just a day pass. So we had the great challenge of showing the user this best price and improving booking income.
My Role: In this project I was the Ux designer in charge of defining what the interactions of the page would be like and the final visual design. I worked with the Chicago Great Wolf design team.
Sketches
No matter what type of project you are in charge of, I have always thought that your initial ideas should start on paper. Drawing is not my talent hahaha, but it that doesn't matter, making sketches is a fundamental phase of the design process and is quite useful to let your creativity flow.
UX Goals:
· Improve usability when applying Promo Codes by new interactions.
· Easy comparison between Day passes and Stay.
·Improve booking revenue by showing book a suite with passes included costs almost the same as buying only a day pass.
UI Goals:
· Provide more info and excitement around day passes with what’s included information.
· Update UI from design system.
The Approach
After having an initial idea I started to translate it to Wireframes, I detected the different use cases, in this case we should have 2 main ones. The first:user flow without promotion code, in this case the user would not have any promotion code and would only want to buy one of the two passes. In this case, the important thing was to show the differences between the two passes in a very clear way for the user
And the second: user flow with promotion code, in this case the company uses 3 different promotion codes.The biggest challenge of these wireframes was detecting the requirements requested by each promo code, for example in the case of the Groupon promo code the user ID should be required, so having several purchase steps, I had to structure them very well so as not to confuse the user.
After having the Wireframes ready, I tested them with users and they gave me different valuable insights from steps that were not so intuitive for them, then I iterated on the wireframes until I got the expected result and they were ready to go to the visual phase.
The Result
The result was a more visually attractive page, which invites the user to buy and understand what the passes include. It was also to encourage the user to stay one night in the park's hotels and have passes included and thus save money. And finally a very fast and easy use of Promocodes.
Mobile Version
(Promo code flow interaction)
Tablet Version
(Buying a pass)
Desktop Version
(Final User interface)
