Protected: VIU Design System
VIU is operated by HUB International, drawing on 25 years of industry knowledge to find you the right coverage at the best value — for smarter insurance, every time.
Transforming Insurance Through Design
VIU, an online insurance platform, presented a unique challenge. Navigating a landscape saturated with competing partner agencies and consultancies, combined with VIU’s position as an insurtech within a traditional, non-digital-native company, demanded a strategic and nuanced approach.
5+
Agencies
4
product teams
10
Designers
26
Developers
Embracing the Challenge
Recognizing the need for change, we embarked on a journey to reshape the client culture. By shifting the focus from a product-centric mindset to a strategic and systematic approach, we instilled a foundation for long-term success. This involved:
Understanding
Deeply immersing ourselves in the complexities of the insurance industry, VIU’s unique position, and the competitive landscape.
Collaboration
Fostering close collaboration with VIU stakeholders to collaboratively define goals and align expectations.
Education
Championing the value of design thinking and strategic design within the organization, breaking down silos and fostering a culture of innovation.
Rightpoint
Since 2019 Rightpoint has been the official partner of HUB international to deliver digital products. Although Rightpoint has done many research activities, the partial engagement has been for delivery phase.
My Commitment
As Design Lead for VIU, my commitment wasn’t solely confined to crafting beautiful pixels. It was about orchestrating a transformative journey from the initial strategic vision to a sustainable design system. I navigated the complex currents of a competitive landscape and a non-digital-native culture by spearheading strategic initiatives:
Delivering Value
1.Website and mobile app
VIU entrusted us with the complete design and ownership of their website and mobile app. This hands-on involvement allowed us to seamlessly translate strategic vision into tangible user experiences. We meticulously crafted interfaces that not only resonated with the brand identity but also prioritized user needs and business goals.
Tailored Touchpoints: Prioritizing Mobile and Quote Initiation
While crafting VIU’s website, we weren’t just aiming for a cohesive look and feel. We laser-focused on the experiences that mattered most: mobile interaction and the quote initiation journey. Recognizing that a significant portion of VIU’s customers accessed their services through mobile devices
2.Quoting funnel and customer accounts
We actively contributed to VIU’s advisory approach on the quoting funnel and customer accounts. Our strategic design thinking and deep understanding of user journeys informed key decisions across these critical touchpoints. This holistic approach ensured a consistent and user-centric experience throughout the entire customer lifecycle, from initial quote to account management.
3.Strategy
By owning the design and delivery of VIU’s digital presence, we fostered a deep understanding of their users and business objectives. This enabled us to not only deliver impactful design solutions but also contribute strategically to their overall success.
4.Design System
Beyond owning and designing VIU’s website and mobile app, We spearheaded the development of their comprehensive design system. By prioritizing creativity, collaboration, and adoption, we built a design system that wasn’t just a collection of components, but a living, breathing foundation for VIU’s digital experiences. This empowered efficiency, consistency, and most importantly, fostered a design culture that valued both creativity and strategic alignment.
Creative Canvas
We established a design system that offered flexible design tokens and guidelines, empowering designers to express their creative vision while maintaining brand consistency. This struck a balance between efficiency and freedom, allowing for unique experiences within the established VIU brand identity.
VIU’s target audience craved a modern and approachable fintech experience, unlike the often stoic and traditional image of the industry. To bridge this gap, we crafted a distinct visual design approach.
Illustrated Confidence
We strategically incorporated custom illustrations that conveyed technical expertise and financial security. This visual narrative,combined with the clarity of the design system, fostered trust and instilled confidence in users navigating the world of insurance.
Fresh Color Palette
We didn’t shy away from using a contemporary, vibrant color palette, injecting energy and approachability into the fintech space. This balance between playful visuals and a secure environment attracted younger demographics and set VIU apart from traditional, often stoic, financial institutions.
Playful Typography
Stepping away from formal fonts, we adopted the bubbly and approachable “Poppins” typography. This choice complemented the illustrations and further emphasized VIU’s friendly and modern brand identity.
Bridging the Gap: Tokenization and Industrialization for Inclusive Design
Elevating VIU’s design system wasn’t just about components; it was about bridging the gap between design and development through innovative tokenization and industrialization. We championed an inclusive approach, ensuring accessibility was woven into the very fabric of the system.
Tokenization Symphony
Leveraging Figma’s design tokens plugin and Style Dictionary, we meticulously crafted a robust token library. This wasn’t just a collection of values; it was a language designers and developers could speak fluently. By defining colors, typography, spacing, and more as reusable tokens, we ensured consistency across platforms while empowering designers to experiment within the established framework.
Industrialization Powerhouse
We streamlined the design-to-development handoff by exporting directly from Figma to Supenova, generating clean, production-ready code based on our defined tokens. This eliminated manual translation errors and accelerated development cycles, empowering developers to focus on building rather than rebuilding.
Democratized Design
We didn’t stop at creation. We implemented a distribution and adoption strategy to get the design system into the hands of everyone who needed it. This included comprehensive documentation, workshops, and training sessions for designers and developers alike. The result? A design system that was not just created, but actively used and championed by the entire VIU team.
Accessibility Maestro
Accessibility wasn’t an afterthought; it was integrated throughout the token creation process. We utilized multiple accessibility auditing tools to meticulously vet color contrast, keyboard navigation, and other critical accessibility criteria. This ensured the design system not only looked beautiful but was also usable by everyone, regardless of ability.
Scaling the Peak: Design with Investment & Delivery in Mind
VIU’s journey wasn’t just about pixels on a screen; it was about navigating the treacherous terrain of scalability. We designed with both delivery model and investment landscape in mind, ensuring our solutions could weather future storms.
Don’t just read about it, see it in action! Explore VIU’s innovative platform – click the link and see what modern insurance looks like:
