Introduction
Pikl, an insurtech startup catering to Airbnb hosts, operates with agility due to its young startup status. While this approach fosters flexibility, the absence of a design system results in inconsistent design and development end-to-end.
Introduction /
The problem
Inconsistencies in design and development are hindering the company's ability to streamline processes and deliver new products and ideas effectively.
Goals & approach
Consistent experience across all devices
"The customer may drop off for a myriad of personal reasons and pick up on several devices at different times."¹ To ensure a predictable user experience, components should be highly consistent.
Modernise existing and upcoming design elements
Adhering to user expectations is crucial because design best practices evolve. Extensive research on typical components is essential to avoid alienating users. Sources used > ²³⁴⁵
Clarify component pages with usage examples and edge cases
Designing component states without them being placed in context may lead to inconsistencies. Capture as many edge cases as possible to avoid user experience issues.
Goals & approach /
Slot components
Increase consistency amid project variations with slot components. In Pikl's agile approach, think of slot components like picture frames—potentially different styles outside, versatile content inside.
Coherent flexibility
Based on the approach and research, every component was designed for consistent flexibility. Users could anticipate a uniform experience across various device sizes.
Coherent flexibility /
White label styling
As an insurtech startup, securing insurance partners is crucial. Fonts and colours can be easily adjusted to accommodate potential collaborations, making restyling projects for new partners a straightforward process.
Design handoff
Given the design system's breadth and complexity, it was crucial to simplify the handoff process for developers. This involved utilising Zeplin and Storybooks for straightforward handoff, version control, documentation and implementation.
Design handoff /
Component states
Here's a glimpse of some components and their interaction states. This is why prior planning was essential.
Micro-interaction
It felt appropriate to animate components in a way that enhances visual communication without detracting from the brand or any user's product experience.
Results
Developers positively adopted the new process
"I no longer have to navigate slowly through a Figma art board to find what I need; it's now easily accessible"
Handoff is less chaotic
Extra design cleanup is skipped and everything is pushed directly to Zeplin and Storybooks for organisation and documentation.
Developers always know which design is the latest
Figma allows some version control, but it has its issues. Zeplin's ability to view and overlay previous versions is a real advantage.
Updating designs takes around a 10th of the time
Components were used before but not to the same scale. However, now, with the new system, updating is effortless.
Entire company has a centre of truth for styling and components
It was common for marketing to ask where to find X. Now, with a centralised design hub, colleagues don't need to make these requests.
Sources
https://www.postonline.co.uk/market-access/technology/7889591/roundtable-improving-quote-conversion-retention-and-profitability-in-the-personal-lines-market
https://www.nngroup.com/articles/design-pattern-guidelines/
https://uxdesign.cc/text-fields-forms-design-ui-components-series-2b32b2beebd0
https://uxmovement.com/mobile/how-to-display-steppers-on-mobile-forms/
https://medium.com/@kollinz/dropdown-alternatives-for-better-mobile-forms-53e40d641b53
