The Ask
We have three distinct products, each with a different front end and a different goal. Leadership has been wanting to have a unified look across all products that make them feel like a single unified product experience. With a seamless experience, users won't know they're going through different apps.
Design
The employee portal and the main product have a similar branding experience, but both look very outdated. The employee portal was never redesigned, but the product was redesigned a number of years ago. The product team researched our competitors to see what current industry trends are, while the UX team looked at current UI trends.
I designed with a mobile first approach for all three experiences.
Product Before & After
The first step to unifying the three different experiences was creating a common navigation menu and user menu. The basic style would be used across all experiences and tweaked for each product. I started pushing for card designs and more common UI elements, like filters, badges, and icons. Other pages with more white space will also include vector illustrations.
Employee Portal Before & After
This experience was created by outside vendors and stands out from the rest of our branding experience. Leadership was really concerned with updating the experience and branding.
To start, I kept what was working with the old interface. Users liked the progress tracking the menu provided, but they were sometimes confused by the different colored circles. I kept the green check mark and removed the other colors, since they weren't actually tied to how far a user was to completing the step. Updating the menu color and top banner to match our new product standard also helped unify the experiences.
Once this first iteration is out, we're planning to add a progress bar that updates as the user completes each step and sub-steps. The main content of the site will also undergo a redesign as we update individual elements and styles within the main product, such as form fields, inputs, font size, etc.
Employee Portal Before & After
See more about this specific redesign here.
