My role 👋
I was the lead designer for this client, in charge of client liaison, scoping, planning, research, UX/UI design and documentation. I was aided by a junior UX designer for some of the component library / animation work.
The challenge 🎯
Grifols is a leading international pharmaceuticals company, with an expansive multi-brand design system that feeds over 40 external teams.
Their initial main directive was to modernise their tooling, and rebuild the system from scratch in Figma, as their current Sketch-based library was leading to collaboration, scalability and fragmentation issues.
The road forward ⏩
Some internal research by the client revealed that most of the issues stemmed mostly from Sketch's rigid interface and limited functionality.
It was concluded that the transition to Figma, of which we had much expertise in, could achieve the desired goals:
Design work took place over a 6 month period 🗓️
Such a large scale project required rigorous planning, which included a vast research effort into the structure of existing top-tier design systems like Google Material, IBM's Carbon, Microsoft's fluent, and other smaller-scale systems.
The design work involved a simple proof of concept stage, followed by a full build of all tokens, elements, components, and templates across mobile, tablet and desktop contexts.
Weekly review meetings with the client ensured everyone was on the same page throughout, and constant updates meant there was opportunity to spot problems as they occurred.
Efficiency boosted, costs reduced 🚀
A single source of truth provided the team with always up-to-date files and boosted consistency across products.
The nuts and bolts 🔧
All component variants were carefully setup and organised so that users could see all customisation options in the side panel, and all tokens were setup so all pre-defined colours, typography and spacing were applied automatically when the correct brand mode was selected.
Interaction prototyping, testing and comprehensive documentation accompanied the system to ensure effective adoption across the organisation.
Collaboration and ease of use across contributors was reported as improved, and enabled owners much greater control over access permissions and general admin tasks.
Motion in the ocean 🌊
Some months after the launch of the Figma system, feedback was positive, but many users voiced an issue they'd been seeing for a while; the live sites felt a little… rigid.
Through conversation with the client, an exploration of motion and animation within the design system was prompted as a feasible solution to bring life to the company's sites at scale.
Research findings 📋
Work began with extensive research into animation in general, and how motion best-practice work in established design systems.
Here's a little snapshot of the key findings:
Motion should be functional first, and expressive where appropriate
It should aid the user in some way, and not be distracting. ‘Delighting’ the user is also important and should be included, but shouldn’t impede on accessibility.
You should give users control over motion
For animation that triggers automatically, users need the ability to stop / pause / hide that content. For motion that is user triggered, you need to give users global control in reducing motion.
Accessible motion, in short
In general, it's simply designing and developing motion so it enhances the experiences of some users but does not impede the experiences of others.
Prototype, test, repeat 🔁
Myself and a junior designer undertook lots of experimentation with duration, easing, direction, choreography and effects to find the right feeling for the brand.
Working from the smallest elements up to components and page interactions, a complete framework of motion was developed from the ground up.
Documentation and outcomes 📄
Everything, from process files to token definitions, were thoroughly documented in Figma.
All system rules, examples and working prototypes were included and handed over as part of the project.
The work resulted in a huge boost to the company's product quality, as well as providing an invaluable rule-book for future animation efforts company-wide.
🚨 It's difficult to fit all the work that went into this project in a portfolio page. If you'd like to know more about my work on this project, let's talk.
