UI Kit & design ops at Nurole

Outcomes & benefits

  • More consistency across our tools

    Having 4 different platforms for different purposes (Marketing website, Client portal, Member app, internal admin) requires a lot of structure and consistency as well as enough differentiation to understand which part of the journey you are in. Our UI Kit helped us a lot navigate these challenges.

  • Better efficiencies while building

    Being able to reuse existing code and have a well-defined design language made collaboration much easier and more streamlined. We were able to create design super fast and then iterate on them with the team (either PM or engineers).

  • Improved alignment with engineering

    Thanks to the devmode, there was less needs for design’s input on all states and screen sizes. It was already defined in the UI Kit and that was super helpful for the dev team. The interactive components also helped us explain our ideas through prototyping.

I joined Nurole as the founding designer therefore I had a blank canvas and put everything in place.

That means: creating a digital colour palette, a UI kit, a documentation system, Figma ops systems, etc.

You can learn more about my experience at Nurole here.

Digital colour palette & branding

When I joined there was only a small .pdf with 4 colours, 1 Google Font and Black and white photography. None of it was thought for digital content or for accessibility.

There was nothing more than this teal colour to create highlights and contrast so it was incredibly limiting and didn’t work on white backgrounds as it wasn’t passing accessibility scores.

A color palette chart showing primary and secondary colors with color swatches and specifications. The primary colors are Nuvole black and Nuvole blue, and the secondary colors are Nuvole dark grey and Nuvole light grey.
Two black and white photos, one of a leafless tree against a cloudy sky and the other of a chessboard with rice and pasta arranged on the tiles.

So after the rebranding in July 2021 I created a full digital colour palette as well as font scale and spacing rules to build the full UI kit from.

Color palette chart with various shades of dark green, black, beige, blue, red, purple, orange, and grey, featuring sections for marketing, app, and secondary color palettes with their hex codes and labels.
Measurement comparison chart for various devices: desktop, tablet, and mobile, displaying different container sizes.
A digital style guide with sections showing font sizes for desktop and mobile, including headings and body text, and instructions for input fields, labeling, nudging, and dividers for web and mobile interfaces.
Screenshot of a spreadsheet or form with multiple entries for a role titled 'Chair of the Board' at the Institute of Risk Management (IRM). The entries include details like tenure from 2018-2019, organization, and number of employees. Some rows display red labels indicating 'Missing dates' or 'Missing role title', and options for editing or deleting the entries.

Full Design UI Kit library

This is one of the many components I created, one of the most reused ones since it is part of different repositories and tools.

It has also evolved a lot since day 1 following-up from team iterations, product evolution and functionalites being added to it.

The addition of new Figma features since I created the first version also brought new changes in the component’s structure: variants, absolute position etc.

  • CTA component

    Atomic Design Principles

    I put atomic design principles in place since day 1 in order to be able to be as efficient as possible in creating the UI Kit. That is how I managed to be super fast in creating new designs for the development team to build quickly as well, reusing a lot of existing code that they had built previously.

  • Tokens for colours spacing and borders

    From styles to tokens

    Following the new updates from Figma in the summer 2023 I started to implement tokens to replace styles in our style guide. That motivated our developers to implement them in the code base and finally have tokens across all our tools. It helped us with consistency and efficiencies as well.

  • Figma analytics

    Optimisation and consistency

    Having a UI kit was super helpful for our team to be able to have consistency across all our tools and in our design language. It really helped us communicate with developers and iterate on our designs easily without having to go back to wireframes for every new project.

“We have so many different versions of the modal, we need to create a component!”
— Hugo, Lead Engineer

Our most recent and updated component

Hand-drawn wireframe sketches of mobile app screens in purple ink on black background, including layout details, labels, size dimensions, and notes about design features and workflow.

We soon started to identify the main use cases for all our modals, with different interactions and functionality for each type.

Comparison chart of four UI components with features and use cases: Autosave/close, Validation, Quick feedback/info, and Preview, each with different size labels.

After having identified the use cases I started to create the high fidelity design with different scenarios and screen sizes.

Screenshots of a user profile setup interface displayed on different devices: desktop, tablet, mobile, and mobile scrolled view. The interface includes a welcome message, information about profile discoverability by staff and clients, and a placeholder for internet discoverability. The design uses a green and white color scheme with icons and buttons for interaction.

Thanks to the devmode, we were able to communicate so much more easily between design and engineering. It was a huge improvement for our teams efficiencies and ways of working.

A computer screen showing a form to add work experience with fields for position, organization name, role information, start and end date, and options to save or delete the experience; various colorful markings indicating spacing and elements.

Overview of my main UI Kit library

Computer screen displaying various color palettes labeled as marketing, app, and secondary color palettes, with color codes and names.
A complex user interface design layout with multiple sections for a data system, including foundations, inputs, media, and feedback, containing various placeholder texts, icons, buttons, fields, dropdowns, checkboxes, and password inputs organized in
Screenshot of a design system or style guide related to desktop and mobile UI elements, including typography, icons, colors, controls, CTAs, and layout styles. The page features various sections with sample text, labels, and style descriptions.
Screenshot of a project management or content management interface, showing a navigation sidebar on the left, a list of items labeled 'Chair of the Board' with details such as dates, roles, and status tags in the center, and identical items grouped o
A digital design wireframe with sections labeled Feedback, Navigation, and App Capabilities. Contains various UI elements like color-coded status indicators, navigation links, modal windows, tooltips, placeholder messages, and action buttons, all org
Screenshot of a website interface with a navigation sidebar on the left containing sections such as 'APP CAPABILITIES' and 'LIBRARY OPS,' and mainly the section titled 'Academia experience within arts or humanities,' including instructions, selectabl
A digital design layout or wireframe with various sections, including a sidebar menu on the left with categories like Foundations, Inputs, Media, Feedback, and Navigation. The main area shows screen size and container configurations for different dev
Screenshot of a website or application user interface design workspace. The interface contains various menu options on the left sidebar and multiple preview panels of page layouts on the right, featuring menu items, profile sections, and buttons in d

Design ops

Design ops

Since Day one at Nurole I worked as if I had a team so that our function would be future proof and work efficiently.

As time went and when I grew my team, we worked on many iterations of the covers and design file documentation.

That allowed for more consistency and clarity for the team to know where to find information about the project as well as understand what state each project was in.

Screenshot of a project management or design software interface with multiple sections, color-coded sticky notes, a sidebar menu with options like context, explore, and archive, and a top notification bar indicating the project is in progress.

At Nurole I built a full Notion wiki for our team with the same purpose: futureproof our function within the business.

Our project tracker was super helpful for us to list all project steps, documentation, meetings, feedback, etc.

It also helped us during our weekly team meetings where we would make sure we were aligned on priorities and progress.

Screenshot of a digital project management board with sections for documents and meetings, displaying team member notes, project statuses, and progress bars. The background features colorful neon signs.

More about my role as Founding Lead designer at Nurole

Red rectangular box with pixelated white text that reads 'Candidate Assessment Tooling' over a light green and white abstract background.
A pixelated blue rectangle with white text that reads 'OpenProfiles' over a background of green and white abstract shapes.
The word "Nurole" written in pixelated font on a dark background, overlaid on an abstract green and white background.