Bringing clarity to chaos: Rearchitecting a legacy platform
How mixed-methods research guided a complex website transformation, leading to improved user success rates and a scalable design system.
Organization
AJE, aje.com
Role
Mixed-methods information architecture research: Behavioral analytic data analysis, semi-structured user interviews, competitor analysis, card sorting, tree testing
Architecture and navigational design: preparing a research-validated information architecture and navigational elements
Design system and stylistic contributions: defining components and tokens
Handoff facilitation: Communication and coordination between UX, engineering, marketing, and product to shift to Chakra and Prismic.
Key deliverables
Content inventory: Prioritized and consolidated pages and sections to eliminate duplication and confusion in the website's content.
Stakeholder Interviews and Requirements Analysis: Conducted interviews with stakeholders from various departments (marketing, UX, product, engineering) to gather requirements for re-architecture and navigation.
Behavioral Analytics Evaluation: Utilized behavioral analytics against key indicators and goals to evaluate the performance of the current website.
Usability Testing: Conducted usability tests with participants using the current production site to observe their ability to accomplish key objectives.
Card Sorting Test: Conducted an open card sort test to understand user mental models in grouping key pages on the website.
Tree Testing: Ran a pair of tree tests, one on the original architecture and another on the revised architecture, to evaluate improvements in task completion.
Design System: Planned and executed a shift to a customized Chakra UI, a responsive, accessible, and reliable component library for UX and engineering.
Legacy challenges
AJE’s website needed a redesign. Like an airplane assembled mid-flight, the site was built in the late 2000s ad-hoc. While it was what was necessary at the time of the site’s inception, this decision also came with sacrifices to standardization, accessibility, predictability, and maintainability. Users expressed frustration with the site and the organization itself chafed at using it: Marketing struggled to prepare new material in the environment, Product could not make confident product changes, and Engineering had to spend weeks getting to know the chaotic codebase before they could affect a single change. It was not serving the needs of the users or the business.
What’s more, the site was not responsive. It predated both the contemporary approach of progressive enhancement and old-school graceful degradation. While it functioned well for larger breakpoints, anything narrower than a tablet was an adversarial experience.
The architecture itself was similarly complicated. Between the architecture and its representative navigational elements, key user journeys were shown to be difficult to complete across key indicators. Looking into task success rates, time on task, and error rates, it was clear that each suffered from the current state of the site. This indicated to us that the site did not match the mental models of our users. They weren’t finding what they needed where they expected it. The only thing we had in our favor was a longstanding customer base that had grown accustomed to the site as it exists now. Among new users, we saw stark negative differences in those indicators.
We also knew we would need to create new brands within the website for brownfield product launches in the future. This required a base set of components and interactions that could be quickly deployed and stylistically adapted for the newer brands.
Architectural research
To establish a baseline understanding of the current architecture for this project, I performed a content inventory of the website. We then prioritized and consolidated pages and sections that duplicated content or introduced confusion. I also looked at behavioral analytics against key indicators and goals to evaluate the performance of the current website.
Because architecture and navigation can generate strong competing opinions among stakeholders, I interviewed stakeholders from each department—marketing, UX, product, and engineering—to learn about their requirements for re-architecture and navigation. In addition, I performed usability tests where participants used the current production site to observe how well it helped participants accomplish a narrow set of key objectives.
To analyze the architecture itself, I conducted an open card sort test of the labels in the site to learn more about user mental models from the way they group together key pages on our site. Participants created and named groupings of page labels, which helped inform our decision making while preparing a new architecture. After revising the architecture, I then ran a pair of tree tests, one on the original architecture and another on the new one. The tasks for each were identical. We saw improvement on each task and moved forward with our revised architecture.
Introducing a design system
We planned out a shift to Chakra UI, a component library that we could use to establish a comprehensive starting point for the design system across UX tools and engineering code. This solution saved us from reinventing the wheel and addressed three of the key challenges this project: Chakra UI is responsive, accessible, and reliable for UX and engineering alike. To make Chakra UI our own, we then created style tiles to explore treatments. After collaboration with marketing, we converged on key stylistic elements of typography, spacing, color, and imagery.
The UX team worked together to modify a base Chakra UI design system library to our tokens. After that, we created any key missing components (such as chips) and any absent interaction states for existing and novel components. With all of the building blocks in place, we then prepared template layouts that could be replicated in Prismic.
Outcomes
We delivered to marketing Prismic slices derived from our design system templates, allowing them to rapidly create content and pages. We delivered to engineering a detailed design system encompassing everything from tokens to components and templates. Within a year, we demonstrated the operational benefits by launching a brownfield product within this website quickly and beautifully—something that would not have previously been possible.
In terms of end-user impact, we saw notable improvements along key behavioral indicators for both new and returning users. People were accomplishing their goals in fewer clicks, less time, and with fewer errors.