My Role
Product Designer
Advocator of design patterns and rules
Collaborating with developers and stakeholders
Testing & refining design components, assets & tokens
Deliverables
When I joined Olio, the first project I was tasked with was to help build and establish a unified design system for the web volunteer platform.
It needed to:
• align with the Olio app branding
• be accessible and user friendly
• be manageable, adaptable and future proof
The current design & development process in the volunteer team was disjointed and misaligned between design and development.
This resulted in things like:
• out of date components
• inconsistent UX patterns
• lack of rules for states, interactions and transitions
• no library of fonts, colours, buttons or UI elements
• elements being developed or designed in isolation
There was an opportunity to improve collaboration and drive alignment between design and development.
After assessing the current design 'process' and speaking to the developers, I quickly identified the cause of the issue around the lack of alignment between design and development.
It was because there wasn't a clear source of truth to the design.
This was due to designs being in multiple places like Sketch, Figma, Zeplin and Miro in different states and contexts.
I conducted a mini case study about the inefficiencies this caused, and shared the evidence with the team and advocated the need to choose a single platform for design. We chose Figma as the platform.
I then collated all the existing design work into Figma, updating files, folders and projects.
During this process, I collaborated with the developers to establish the new design system. We identified what was live, was missing, didn't have design rules and what was needed for the design system.
Understanding and capturing the needs from the developers at the start of the project enabled me to build the design system in a more accessible and clear way.
We followed the Atomic Design Methodology when building our design components, using Atoms, Molecules etc to future proof development work by ensuring re-usability elements and components.
I included rules, states and context alongside elements and components of the design system, so that any developer could see and easily understand how they are meant to be used.
I spent a few weeks designing, collaborating and organising the established the new design system from the ground up.
I lead the developers in the team through a walkthrough of the new Design System, explaining how to navigate Figma, find components, rules and states. This new Design System was shared with the team.
Following this, the team was able to reach alignment quicker, review inconsistencies, speed up work and deliver a branded, consistent and user friendly experience to the platform.
While working on the Design System, and establishing the new design patterns, I took several opportunities to improve the UX of existing pages. I improved spacing, the hierarchy and layout of the pages and established a consistent UI layout pattern. This resulted in a more refined, clearer and user friendly experience. Below are a few before and after examples.
In 2022, Olio wanted to rebrand itself. There was a lot of design exploration I helped with to shape the digital direction of the rebrand. I chose the final shade of purple the company uses for the primary brand colour - seen on the app and website!
During this project, we needed to update all of the digital assets and design files. As I had already implemented a component based Design System, this was a relatively smooth and straightforward transition.
I was able to implement and update all of the rebranded components for the volunteer/web side of the business in two weeks, and help assist the other teams with the rebrand.
The rebrand project was a great opportunity for the design team to refine and improve the Design System process.
We reviewed what worked, areas for improvement and how we might outline a process to ensure a more collaborative approach to design and development.
By outlining the design process, and incorporating it alongside the planning and development, it helped key stakeholders across teams align on outcomes and deliverables, and made design more accessible to people across the business.
This improved efficiency between design and development and helped speed up the development cycle by an extra day.
This project was a great opportunity for me to showcase my skills as a product designer, working closely with different stakeholders across teams, like developers, tech leads, marketing and project managers.
I identified opportunities and cases for improving the user experience, and efficiency gains between design and development. It helped me get to know and work with many different people, show the value of design and advocate for a consistent Design System that values the user experience.
Below are some of the rebranded screens I designed making further enhancements to the layout, spacing, hierarchy of information and affordances.
