Date: March 2019
Skills: User Research, Interaction Design, Testing
Skills: User Research, Interaction Design, Testing
Overview
As part of the improvement of the Fingertips platform, as part of the roadmap, we decided that we needed to create a Design Library. Create a Design Library page that will allow all the stakeholders and Fingertips team to design and develop, maintain, new web applications.
Research
Find here the site-inventory from Fingertips, this was one of the first exercises. At a glance you can see that there is a huge lack of consistency in patterns and visual language, so it was quite difficult to understand Fingertips - collection of tools as a whole.
Opportunity
We are aiming to create a visual language for the apps a parent visual language, where easily we can identify that any app belongs to a family like Fingertips, but also, ultimately Fingertips belongs to Vodafone ecosystem, so we want to reflect that too.
It should be easy to identify
Solution
Fingertips design system is opened for everyone (developers, designers, business analysts, etc)
• Platform agnostic: it works in any browser (except IE11) and device
• Guidance: empowers non-designers to confidently build brand-aligned, accessible user interfaces
• Reusability: encourages the DRY principle
• Homogeneity: makes UI's look similar, which brings familiarity and simplicity of use to the users
• Speed: helps designers and developers to build apps faster
• Innovation: it's a living document and should be kept updated by the team with new components, patterns and innovations
• Documentation: it's a reference of how to do things for designers and developers
Find above the final Designs, UI phase.
Process
UX perspective
Research
• Patterns and components inventory
for different screen sizes
Define
• Select the most used patterns and add new ones to align with Vodafone ecosystem
Test
• New proposals were tested before approval.
UI perspective
• Created new proposals and components
• Accesibility was taken into account
Outcome
An easy and user-friendly site which offers a easy way to learn about Fingertips brand, UX guidelines and a available library to download assets and use components.
Helps in many ways the team who is involved around the development of Fingertips suite.