Best-practice foundations, design principles and consistency for usability and delivery
My initial task was to introduce best practices within the team, focusing on fundamentals like consistent grid usage, a simplified typographic hierarchy, colour palettes, mobile-first principles, and accessibility.
The screens below illustrate some of the work before and after an exercise I initiated to create a 'cheat sheet' or 'interim style guide.' This guide helped the team establish consistency in our UI output, streamlining the design process and ensuring smoother handoffs to the development team for efficient delivery.
The Design System
Audit / taxonomy
The quick-fix work above was completed over a few weeks. Prior to this, I conducted a comprehensive audit and taxonomy of all GfK’s existing and legacy applications, while also referencing other best-practice examples. A small sample of this work is shown below (each slide represents an A3 Artboard).
Sketch Library assets
Through my audit, I identified key elements and components that would be the priority to design, enabling us to achieve consistency quickly and efficiently across our product UI. Using Atomic design principles, I began creating these assets for the team to use via symbols in the first version of our Sketch library, which I rolled out incrementally.
The team also contributed to the library by adding any elements or components needed for designs before they were formally integrated into the library file. Each element had to meet a strict set of best-practice requirements to be included in the next library file release.
Sketch Library samples
Below are sample screens of the design work. All of these elements and components were implemented as symbols within the Sketch library, allowing the team to 'drag and drop' assets, ensuring complete consistency across the UI.
Designs below:
Buttons// Controllers, Sliders, Switches // Links // Forms //Tables // Data Vis
Project Summary
I was responsible for setting-up and executing the first GfK Design System / Sketch Library alongside overseeing the UI output from the UX&D team over 2 work streams. I also introduced the necessary 'first steps', again with a 'hands-on' approach, to integrate best-practice principles and the design fundamentals and production processes that were previously absent at GfK in regard to the UI output.
• Setting up consistent grids / breakpoints
• Creating a much simplified typographic hierarchy
• Designing for mobile-first principles / small screen first
• Making sure designs were created ‘responsively and understanding how screens ‘adapt’ across breakpoints
• Mentoring and teaching the principles of accessibility to the team, how to test, through to implementing this in the designs via fonts, colours, hit sizes for touch screen, etc
• Maintaining the essential consistency of output as necessary for delivery for development
• Helping set up efficient production process and methods from file naming conventions through to development hand-off and uploading final designs to Zeplin
• Setting up and rolling-out, maintaining and evolving the Design System
At the time I left the project, the team were working to new processes and using the Sketch library which was in it's 3rd release and the Design System was recognised across the business as the foundation for all GfK products moving forwards.
