Global pharmaceutical manufacturer Hikma came to our agency for a site-wide redesign of its corporate website.
The challenge
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.
The project started with a comprehensive audit of the current Hikma website. This audit became a roadmap for the redesign.
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.
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.
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.
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.