Redesigning Mobile Everlane.com

Snippet of the new design

Please note: Without the people named in the roster below, I wouldn’t have the opportunity to represent our team and write about this project that required such close collaboration and teamwork.

Team Roster: Anelese Webster, Nadia Sko, Michelle Fox, Michael Winters, Chloe Chou, Taylor Sullivan, Nawaz Khan, Sam Matthews, John Shen, and Andrew Ngo.

At Everlane we put our customers at the forefront of everything we do. Taking that sentiment even one step further, on EPD (Engineering, Product, and Design) we feel it is our responsibility to cultivate digital spaces that are inspiring, educational, and always evolving to meet our customers’ needs. Internally, one of our core company values is the belief that great design changes people’s lives. However, we have a confession to make and that is we have fallen very short of meeting this expectation when it comes to our mobile website. Gasp! But wait, let me explain myself — I promise there is a happy ending.

Taking a look into the code archives we found the last time the mobile site went through a full redesign was back in the year 2013. Since then, Everlane as a whole has experienced tremendous growth as a business. Our site, everlane.com has scaled in many ways to support this.

Fast-forward to today and our customers’ shopping behaviours and habits have also tremendously evolved. Today just over 60% of our site traffic comes solely from mobile users. This percentage and the evolution of industry standards was enough data for us to start 2020 with a primary focus of building a new simple, beautiful mobile browsing experience.

For the sake of transparency (yes, I know very Everlane) the following article is a short synopsis of some of the new changes you will now see and experience on our mobile site.

Determining the Problem

During the initial planning phase we found that our first challenge was to outline key user pain points and then determine how a redesign could solve these. To tackle this we first mapped out the current user journey from site land to checkout. We then gathered both recent and historical qualitative and quantitative data to see where in the funnel customers were facing these pain points the most. We were specifically looking at how they would be blocking the user from continuing to the checkout phase and completing their purchase. Some questions we had to ask ourselves were:

  • Are we meeting their expectations and needs?

After completing the discovery phase we mapped which site features would not only be requirements, but held the greatest amount of design and engineering potential.

Process, process, process

Areas of Design Focus

Designing within a systems mindset allowed us to build consistent themes throughout the design process and leads to larger, more impactful decision making. Our primary goals included: Accessibility and Inclusion, Discovery and Browsing, and Updated User Interface. Below, each area is discussed separately, exploring why it was a problem, and what we did to improve it.

Accessibility and Inclusion

Our current design system was falling short of meeting accessibility standards. This was no longer about just complying to these standards but creating a digital environment that was inclusive and tailored to everybody’s needs.

We solved this by creating a new design system that included typography, color, buttons, components, iconography, interactions, and links to name a few.

Overview of the new design system

Discovery and Browsing

Through previous site experimentation and qualitative data findings we discovered that customers could not easily navigate and struggled browsing within and in-between pages. Emotionally, customers felt defeated, dissatisfied and often lacked confidence with their overall shopping experience.

Before & After: Global Navigation

Hearing this we prioritized redesigning three large site features of the customer journey. These components included: site navigation, product collection page, and product display page. We did this while keeping in-mind the importance of providing a fluid browsing experience and designing for simple decisioning.

Before & After: Product Collection Page

Outdated Interface

Content overload, too much type, and a variety of bells and whistles were just some of the stressors we pinpointed as things to do away with. Many of these elements also no longer felt up to brand standards and visually conflicted with our photography and general art direction.

We focused on designing a new user interface that felt compelling, clean, accessible, yet remained onbrand and truly Everlane. Highlighting our brand’s mission and values also remained a top priority, providing the space for these product, brand, and marketing stories to live.

Before & After: Product Display Page

Designing for Scale

It’s important to note that every decision was made with the intention that this redesign would be fit for scale and eventually adapted by additional areas of the site and eventually to desktop and tablet. Our hope is that we’ve provided the first step towards change and that our customers will be excited, inspired, and fulfilled with their experience.

At our core, Everlane continues to be a brand that strives for honesty and transparency with our customers. Our site will continue to be the gateway to providing beautiful, sustainable products that are accessible to everybody. The redesign has taught us that small changes can lead to larger, more impactful decisions. This process has been a reminder that as a brand we have a responsibility to not only meet, but exceed our customers’ expectations.

Freelance Product Designer currently @Everlane. Self-proclaimed bookworm and outdoors enthusiast. Always learning, always asking questions.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store