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.
This part of the site was lacking a lot of hierarchy and organization in the layout so my first priority was to give each part of the account center their own tiles within the right main section of this page to give them proper grouping. For this section, I took our navy brand color and created a grayer lighter version.
As for hierarchy of the tiled sections, I chose to put "Featured for You" the highest so that we can highlight new Account features as well as promotions going on. This was best in the top position since most people are coming to the site to see current or past orders and will have to scroll through the Featured section first in order to get to the Orders section. In design reviews, I compared this strategy to the strategy most grocery stores follow – putting promotional items in the front sections of the store so that people have to engage with those first before getting to the essential items in the back like milk, bread, etc. I felt that it made sense to follow the Orders and Wishlist section with the "You Might Also Like" section below so we serve them personalized reccomendations based on their wishlist or items they recently ordered.
I created a navigation menu in the left section where users can easily click into any section of the account center or access secondary links such as Warranty Claims or Customer Support.
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").
On the mobile version of our site, the navigation links are styled to be a dropdown in order to save vertical space on this viewport. Another feature of this design with mobile real estate in mind is the top section with the user's name and avatar shrinks and moves to be left aligned as they scroll down the page.
In our personal info page of the account center, we used the same tiles from the overview page to create clear and concise organization for each section.
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}