View prototype

Hikma Pharmaceuticals PLC

Design systems

Global pharmaceutical manufacturer Hikma came to our agency for a site-wide redesign of its corporate website.

The challenge

  • Design an intuitive website that is a better reflection of the brand.
  • Create the entire site from one base template.
  • Design to AA WCAG 2.1 accessibility criteria with core brand colours that don't meet minimum contrast requirements.

The approach

Balancing aesthetics and accessibility, I adopted a modular design approach and fostered client collaboration to create a bold, Swiss Design Style-inspired website.

UX/UI audit of existing website

The project started with a comprehensive audit of the current Hikma website. This audit became a roadmap for the redesign.

Key audit insights

  • Navigation is confusing and overly simple, only providing access to two levels of the site's structure, third and fourth-level content is only accessible via in-page links.
  • Interaction elements are not obviously clickable or consistent.
  • Poor way-finding experience with no breadcrumbs or signposts.
  • Basic UI conventions not adhered to, such as logo not in the top left of the navbar.

Creating wireframes

The project was a modular build; one core template with a large allocation of modules. Due to this, each module needed to be flexible with multiple variants and customisation options, to give CMS editors maximum flexibility.

Once this was scoped out by the strategy team, I got to work wireframing, which delivered two core outcomes.

First, I was able to explore in detail all the possible variants for each component. For example, zig zags needed left and right alignments states with options for one, two or no CTAs, different media types, and so on.

Second, I designed and tested navigation and search journeys that tackled the UX problems identified during the initial audit.

Creative exploration and client workshop

As an alternative approach to mood-boarding, I ran a creative kick-off workshop with the client exploring different digital implementations of their brand to get a view of their likes and dislikes.

Prior to the session I created a series of indicative designs focusing on specific UX and UI pillars (typography, colour, interactivity, and structure, etc.). For each pillar I created two contrasting design routes on a scale, so that the client could plot where they felt most comfortable.

Gathering this insight early on was crucial. It enabled me to go into the design phase expanding on these themes with the confidence it would be well received.

Designing for AA accessibility

The website had a legal requirement to be AA WCAG 2.1 compliant.

The two primary colours (white and red) only met the required 3:1 contrast ratio when text and colour were used at larger sizes. This influenced the entire design of the site.

I created a big and bold aesthetic with lots of white space to help it breathe. Their brand had attributes often found in Swiss Design Style, so I used that design movement for inspiration.

Aside from colour, other considerations played a role in crafting the end product. I added multiple cues to clickable elements to suggest interactivity. I also added play/pause controls to stop moving content, and introduced alternatives for hearing impaired users i.e. video subtitles and transcript download options.

Creating the design system

I followed the ATOMIC philosophy during the design project. All modules were made up of smaller components. This meant changes to button styles or labels, for example, could be done once at source and everything across the file would update.

As part of that process I developed a comprehensive design system that included all design assets. This included colours, typography, icons, animation guidelines, responsiveness guidelines, interactive elements behaviour, and module variants.

In addition, I set up layer properties on each module to demonstrate customisation options.


This project, whilst still in development, reflects a holistic approach to UX/UI and accessibility, promising a transformative digital experience aligned with the client's brand.

View prototype