site navigation

role:
lead UX UI designer
company:
tarte cosmetics
2021

We found that tarte.com’s navigation user experience was lacking in several key areas. Tarte’s navigation required a streamlined taxonomy and updated UI styling. Our team’s redesign goal was to create an app-like experience (on mobile) with a minimalist modern design, highlighting product categories & key customer tools.

The Process

Competitive analysis: to determine strengths and weaknesses of other navigation experiences across best-in-class e-comm sites

Site Metrics

Site search logs to determine what users are searching for
Google Analytics key words to pin down tarte’s high traffic site pages and search terms used to find tarte.com

Define project parameters

Key content to include:

  • Sign up / login loyalty prompt
  • Search bar emphasis
  • Virtual try-on highlight
  • Ability to highlight a site service, best seller,
    etc within a content section
  • Clearly defined parent and children categories
  • Country selector
  • Track order

UI features to account for:

  • Clear visual hierarchy
  • Fullscreen nav experience on mobile
  • Feature rich product drop down or carousel with embedded product imagery
  • Sticky X out button on mobile
  • Icons to create visual prominence within the navigation
  • Streamlined, modern fonts
  • Minimalist design
  • Luxurious loading effects
low fidelity mobile mockups

High Fidelity Mocks

After the team aligned on the low-fidelity mocks, I proceeded with high-fidelity mocks. I implemented our updated site styles for typography, colors, and buttons. I was sure to utilize ADA compliant color ratios on graphical elements along with accessible tap target sizes.

view mobile Figma prototype here
view desktop figma prototype here

final solution

Side by side comparison of the old navigation system verses the updated redesign.

my role:
UX UI design from research
to visualization
Project Management:
Wendy Liao, Erin Falwell
site Analytics:
Erin Falwell, Gladys Rezabek
Engineer Development:
Nick Artymiak
Quality Assurance:
Nusrat Bintun + team

Credits