'Extend Dev' site and Storybook Audit
The Extend site had grown haphazardly over time, resulting in poor navigation and design inconsistencies that failed to meet best practices. Initially tasked with auditing the Extend Dev site against various Storybook versions, I quickly encountered significant access delays due to security clearance requirements, sometimes taking days.
To streamline the process, I proposed a more practical strategy for the team to use my findings effectively. I conducted a thorough audit based on key Design System categories, comparing the latest best-practice versions of components with their Storybook variations.
I included screenshots from the Extend site to highlight inconsistencies, accessibility issues, and the lack of mobile-first design principles. All findings were organised logically with hyperlinks to relevant design or components, whether from the Extend site, Storybooks, or the Canvas Design System.
Creating a Sitemap
I also created an Extend sitemap, below, as part of my audit. This clearly surfaced how many levels had inadvertently been created over time and why navigating and finding content within the site was so difficult. Sections were repetitive and other hidden wrapped in sidebar 'accordions' or faceted nav, with many variants of each. All sections and pages of the sitemap are hyperlinked to their live screens.
Design templates - within a 'site-structured' layout
After identifying the inconsistencies, I then set about crafting design solutions. Some areas simply required unifying the choice of components, while others needed more extensive work beyond the project's scope.
I then developed new design templates in Figma, organised according to a sitemap hierarchy. This approach visually aligns site levels (home, hub pages, subpages) with their corresponding design templates, typographic hierarchy, and rules. One of the most notable issues I uncovered was the inconsistent use of typography - an essential design element for 'sign-posting' and guiding users to improve clarity of information beyond navigation structures.
New Design Templates and components - as shown within the 'design map' above
After auditing and analysing existing design assets, I identified gaps in the existing 'Workday Design System' and determined what was needed for the site redesign. I created or adapted key components and elements that would have the most impact and improve the efficiency of future site updates.
In parallel, I developed a much simplified, unified typographic hierarchy (pared-down from many existing styles) that aligned with my design templates and components. My aim with this was to ensure long-term consistency across the site.
Second level - Tutorials (before and after)
Designs below feature the simplified typographic rules created along with a site-wide consistent use of the grid with mobile-first principles. And again, consistent use of components and patterns were identified from my audit, or I designed new or adapted components or patterns following best practice principles within the 'Workday Design System' rules and styles.
New - Developer Tools (Before and after)
You can see below how simple rules created from the audit and a selective process of elimination helps to create simple, clean, organised, best practice templates to easily reuse.
Refined typographic hierarchy
My new Typographic rules below - aligned with all the newly created templates and 'Design Map'
Project Summary
Workday Extend Dev Site / Storybook Auditing / Research - through to delivering component and template Design Solutions . All linked via an interactive sitemap to help the team quickly view options and align their future designs for consistency.
• Interactive UX Site Map linked to an extensive site /multiple Storybook audit + live pages within Workday Extend
• Strategy around approach and project delivery
• Design Templates created on a 'Design Map' for consistency
• Complete simplification of typographic hierarchy related to site Design Templates and 'Design Map' for consistent page structure / hierarchy
• Best practice design solutions and recommendations for site architecture, navigation, new pages / components, devices and elements aligned with Workday’s Canvas Design System
