Sample of the UI pattern library
Overview
We were a team of 9 developers and 7 designers working to build and maintain the online presence of six brands – each of them having a separate site – which offer telephone service products in Germany and eight other European countries.
We were a team of 9 developers and 7 designers working to build and maintain the online presence of six brands – each of them having a separate site – which offer telephone service products in Germany and eight other European countries.
Background and strategic fit
From the design perspective, we wanted to create a seamless user experience across different brands and platforms. Additionally, we intended to cut down drastically the time spent on prototyping, so that we could get buy-in for testing small and often in all projects.
From the design perspective, we wanted to create a seamless user experience across different brands and platforms. Additionally, we intended to cut down drastically the time spent on prototyping, so that we could get buy-in for testing small and often in all projects.
Since we had no dedicated team for this project, we took the so-called slow drip approach, that accounts for lower effort at initial stages. Taking advantage of the relaunch of Secretaría.es happening in parallel, elements were added to the styleguide as new UI components were created and the library is planned to grow organically as needs arise.
All button instances collected during the interface audit of one single brand
Audience
The end users of the design systems are designers, front-end developers and testers working in a ditributed team across 2 locations.
The end users of the design systems are designers, front-end developers and testers working in a ditributed team across 2 locations.
Roles and responsibilities
Project Manager & Lead Designer
Project Manager & Lead Designer
Process
As a main contributor, my role in this project consisted in:
As a main contributor, my role in this project consisted in:
- Using an interface audit to create the blueprint for the library
- Developing a UI pattern library following atomic design principles
- Developing a UI pattern library following atomic design principles
Building a form using atomic components
Outcome & results
This project is still ongoing, although some observations can already be made:
This project is still ongoing, although some observations can already be made:
- After introducing a shared component library, up to 3 team members could be contributing to a website redesign. This is a big improvement compared to previous projects, on which only one designer was appointed and the occasional collaboration was cumbersome.
- The time spent on prototyping all page templates for Secretaría.es was 16 hours (reduction of approximately one-third compared to previous projects).
