case study

‘Create’ site redesign

Formerly media.twitter.com, a 200+ page external facing website serving as an educational platform for content creators using Twitter products. The project was to rethink this website by refreshing the visuals and apply foundational UX thinking to better serve their customers.

UNDERSTAND

The challenge

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.

MY ROLE

My primary role on this start to finish project was to fill the gap between design & technology. Serving as lead technical designer (system and component expert) and main builder of designs within our CMS platform (AEM). My intent was to work smarter not harder, leading efficient workflow processes and owning stress testing of all designs to ensure the highest quality within our technical framework. Essentially, how can we do the best with what we’ve got.

DEFINE

Strategize & prioritize

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

1. Rearchitect site taxonomy and structure

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

3. Refresh visuals that can be executed in our framework

IDEATE

Generate ideas

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

1. Rearchitect site taxonomy

   1. Focus on navigational component options.

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

   1. Audit current pages and wireframe out new page structures and user flows.

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

   3. 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).

3. Refresh visuals that can be executed in our framework

   1. 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

Finally, where the rubber meets the road, we can start designing and implementing our ideas to see what sticks.

1. Rearchitect site taxonomy

   1. Utilize mega nav and label functionality within it.

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

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

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

3. Refresh visuals that can be executed in our framework

   1. 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

Solidify

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.