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/ !
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.
