YETI - Preference Center
Overview
Designed the Preference Center which lives in the YETI Account Page that allows customers to take a fun engaging experience of selecting their interests and preference. After completing the quiz, users will get personalized recommendation, pursuits and YETI content for them to enjoy. This is now live on site to create more fun and engaging user experience by gamifying the experience.
As a UX/UI Designer at YETI, I have been working on variety of site wide projects that consumers experience for the brand. I was in charge of the ideation, design/development specification. Worked closely with developers throughout the build and QA sessions. Worked closely with the Senior Manager UIUX Designer for the advise.
Role: Lead UX/UI Designer
Team: UX/UI Design Team, Development Team
Year: 2023-2024
Project Type: UX/UI Design, Interaction Design, User Centric Design, Animation, Prototyping
The Design
The ultimate goal for this project was to create a fun and engaging user experience for selecting interests, preferences and making it personal. The concept we came up with is to “gamifying” selecting the interests by taking a fun and engaging quiz with exciting and dynamic interactions and animation. The benefit of this design is not only it shows what interests/preferences to select but also it provides fun emotion of interacting with the bubble buttons that have multiple states (default, hover and selected) with different effects. Customers can select what kind of activities they enjoy, what are their favorite colors, and who they usually go with. With the Preference Center, customers can truly personalize their YETI experience in a fun and engaging way. This was a long-term project which required lots of rounds of ideation, collaboration with various teams (Brand, Ecomm, Merch and more stakeholders), design, image assets, and prototyping. This has been live for more than a year now, and the engagement rate is high.
Sign up to enjoy this awesome experience at https://www.yeti.com/ !
Impact
With the newly added feature, Preference Center, it allowed us to better provide personalized product recommendations, content, and give the customers feeling of being able to find that they are interested in to a better shopping experience.
Also, this new button style component bacame the main parent component to many new components that are now in use on site, such as in new filter component, gift guide component, and many more.
The Experience
Preference Center Entry
Users can navigate to Preference Center from Account Overview page after signing into their account. It will be shown on the left nav and on the “Featured For You” carousel.
Preference Center Quiz
Once users click into the experience, it will launch the Preference Center Quiz. Here, users can select their preferences, such as what are their main interests on activities, who they travel with, what are their favorite colors are, and etc.
Summary Screen
Once users complete their quiz, it will show all the preferences at one place in this summary screen. Users can go back at edit by clicking “Start Over” button or go back to Account Overview by clicking “Looks Good” button. After completing the quiz, when users will see products recommendations according to their preferences while shopping.
The Interaction
Customers can select multiple bubbles, as many as they want to select. In Desktop, it has Default, Hover, and Selected states, and in Mobile, it has Default and Selected states. In Hover state, the bubble expands, and in Selected state, it gets highlighted.
Design working sessions …
Takeaways
It was one of my biggest project at YETI and I was able to learn more about collaboration (Brand, Ecomm, Merch, Devs, and more teams), user research, and prototyping. Also enhanced my user centric design skills by brainstorming the user flow, research, user testing and design from the scratch. It was super fun project that I really enjoyed because I love to design fun and engaging interaction design. There will be more questions for customers can select from in the future, and cannot imagine how far this feature grow and improve! I will keep move forward and use these knowledge I learned from this project in future projects.