When Cambridge University Press and Cambridge Assessments announced a company merger, my team at Make it Clear was tasked with designing a joint website for the new organisation. Working to a tight deadline, we created an extensive component library, providing the client with the necessary building blocks to create a new site ecosystem with a shared identity.

Both organisations have multiple business areas with unique websites and individual needs. The joint component library had to satisfy content and functionality requirements for each business stream without confusing or overwhelming the users.

Despite their semi-independent status and unique offerings, navigating between different business areas of the new organisation had to be seamless. The new interface design required a unified structure and appearance, combined with enough flexibility to allow each business area to convey their brand identity.

I was the lead designer working on the wireframes and UI design for the component library and relevant templates. I worked on functionality specifications, conducted usability testing and managed the development handover.

I ran a workshop with key stakeholders to gather requirements which identified twelve priority templates that informed the content of the new component library. Since each template had multiple variations for each business area, we gathered and reviewed up to thirty examples of each page.

Following the initial research, I created a detailed functionality specification, listing all the components and their content and functionality requirements in a single spreadsheet for the client to review.

Once the functionality specifications have been approved, I created wireframes for the priority templates. While the main project delivery was the component library, seeing the component in context of specific page templates helped us and the client ensure they were fit for purpose.

Designing for the worst case scenario, I included all component types for any given template, even if none of the pages would have all of this content at once. This approach helped ensure we are covering all component variations, which were then gathered to form the foundation of the component library.

I worked on one of the two conceptual directions for the new interface design that were presented to the client. I created UI prototypes for the new organisation’s homepage and three business area landing pages to demonstrate how the unified look and feel could be adopted for each brand.

Early homepage designs for two business areas - English Language Learning and Cambridge Academic - demonstrating how shared components can be adapted for each brand identity. These are also first explorations of some interactivity principles, showing how various cards can display alternative content on hover.

I conducted a total of eighteen usability testing sessions with internal and external users and reported on the findings.

Once the conceptual direction for the UI had been chosen and refined, I applied it to all the items in the component library. Based on Atomic Design principles, I split the library into atoms, molecules and organisms, which were then used as the building blocks for the site templates.

To explain the principles underpinning the component library, I created a document with detailed instructions for the use of colour and typography, as well explanations of functionality, interactive and responsive behavior of each component type.