The Problem
Inconsistent experience across all the brands
I was brought into the Hudson’s Bay Company to audit all of their site experiences (Hudson’s Bay, Saks 5th Ave, & Saks Off 5th) and bring consistency to their modules.
As the team planned for a migration to a Salesforce platform, it was the ideal time to reorganize the components as well as streamline the global branding and user experience.
Another gap that was presented was the internal design team did not have a universal style guide or library to work from
Discovery
The full design audit Inconsistencies, common elements and everything in between
There was plenty of information to go through between the 3 site experiences, identifying how the team worked and how the sketch files were built.
It was evident early on from the smallest components like buttons to full lead spaces along with carousels were seen on all the sites. There were some slight deviations such as semi bold vs bold fonts, height differences and treatment of links (which was due multiple designers not all communicating) along with some glaring padding issues.
These needed to be standardized to create reusable components for the designs to work efficiently but for the tech teams to have clear definitions.
Design
Universal Components: Keeping design & dev on the same page
Kicking off with an exercise in atomic design I started with the most common atoms and work the way up to the full on organisms ready to establish the new templates.
The new responsive components were reviewed by the tech teams to establish an easy transition to a global platform and to keep all the designers consistent with how the wireframes and visual design will be represented.
This was a shared Sketch library for the team and becoming part of the on-boarding of new employees.
Design
Brand Style Guides: A visual representation and guidelines for each brand
One of the final steps of the project was setting all the items into a visual guideline to share with the marketing partners and the development team.
The style-guide contained documentation on key pieces of the UX and UI. There were the standard style elements such as color palette, text styles (H1-H6) and iconography. As well as deep dives on the interactivity of forms, navigation, buttons and content blocks. Fully defined site structure with the responsive grid, module padding & search logic.
There was also a set of standards around accessibility to ensure the experience worked for all users.
