Lead UX/UI Designer
YETI Coolers
12 Weeks
The Account Center is a home for all things related to a customer’s identity within the Yeti ecosystem, and a true destination within the digital experience, we will need to reimagine what features are included and how all the data is merchandised to give the user the best experience.
.png)
.gif)
.gif)
The account membership landing page is a new page we created for customers who may be on the fence about creating an account. This is YETI's opportunity to show the value we can offer with our account membership. The intent behind the design was to evoke excitement and a sense of community for the user in hopes that we would encourage them to create an account.
A lot of thought and focus went into rethinking the flow of the process for creating an account. I always design with the desire to make the experience as human as possible. For this instance, I broke the process into two easy steps - let's get to know who you are (first name, last name, phone number) and then let's create your login username and password.
One of the ways I designed this experience to feel more personalized was by adding the user's name, custom avatar, and subtext that says how long that person has been an accountholder (e.g. "Joined in 2010").
I simplified and reworked this account center by giving it the fixed navigation section on the side and created overview tiles for each page of the account.
The account drawer is what users on YETI's site see once they've clicked on the account icon in the global navigation. This is a vital piece of the site as it's where most site visitors login or create an account. We took this opportunity to give them a brief overview of the benefits in a concise fashion with easy-to-digest icons (a few of which I created in Illustrator). I also took this chance to modernize our input fields with rounded corners and condense them by placing the input labels over the border of the field for our mobile version in order to provide more space since mobile screens have less real estate.
.png){kind=small}