UNDERSTAND

Research was conducted by a third party, revealing that customers were generally confused how to navigate the site to find what they were looking for, often defaulting to the search function. It was also unclear the breadth of product offerings and resources available on the existing website.

From an internal perspective, there were also complaints that historically, designs handed off in Figma weren’t fully represented once it was implemented in the CMS, rendering lower quality work than what was expected.

DEFINE STRATEGY

Now that we understand the challenges, we can formulate goals that address the pain points.

• Rearchitect site taxonomy and structure

• Define a templated approach to page designs and establish the component patterns within them

• Refresh visuals that can be executed in our framework

IDEATE

Now that we have goals, we can strategize tasks that support these goals.

• Rearchitect site taxonomy

• Focus on navigational component options.

• Define a templated approach to page designs and establish the component patterns within them

• Audit current pages and wireframe out new page structures and user flows

• Expose deeper level linking across the board, offering more browseable options

• Include new tagging component that is setup on the backend but can be represented and reused on the front end as a core component (can be used on other sites as well)

• Refresh visuals that can be executed in our framework

• Establish spaces and areas within the new wireframes where assets have the biggest impact. Direct other designers on image optimization best practices and nuances to our components

EXPERIMENT

Prototype, design, iterate

• Rearchitect site taxonomy

• Utilize mega nav and label functionality within it

• Define a templated approach to page designs and establish the component patterns within them

• Support deep linking with current components (secondary nav, chapters/anchor, dynamic cards)

• Include clickable tags on articles, search results and dynamic grid components

• Refresh visuals that can be executed in our framework

• Breakdown and categorize spaces in Figma, narrowing best practices for image size and ratio, thinking about scalability and mobile renditions

Working in parallel as the Figma grew, I would start doing actual page builds using our existing components and stress test our ideas in layout as well as rigorous image testing. From my findings, I would create asset documentation and share any funny technical findings to the team. This allowed for close relationships and design system enhancements with engineering.

For example, I discovered outdated colors and styles on mobile versions of certain navigational components, missing hover/focus states for core buttons, strange bugs or rendering issues on grid pages. My goal was to stress test but also discover any gaps that weren’t consistent with our intended designs and use these prototypes to share progress with stakeholders.

BUILD & TEST

The great thing about building in parallel with design is that finalizing the project can go much faster. You can spend much more time refining and focusing on quality assurance.

Very closely with our digital producer, engineering, internal partners, external agencies, program managers, brand design

I love to play. Build. Experiment. Design systems are great. But what I really care about is the final execution and design sensibility around a finished product. You can have the best system on the universe but if you can’t execute on it, build it, none of it matters.

I love building things. On and off the screen. And making incremental improvements over time to make things better.