System
Client
Fi — 2023
Overview
Fi’s feature-packed smart collars and activity monitors provide peace of mind to dog owners through data.
I worked with fi’s leadership to craft a design system that extended seamlessly into Web, app, marketing material, and all of their future endeavors.
Services
— Design System
— Mobile app Redesign
— Global site redesign
— Vision for transformation
Outcomes
80%
Subscriber retention
7K
New orders
1M
Active Users
$32M
ARR in 2022 (2x 2021)
67%
Pre-paid Subscribers
1
Building a strong foundation.
Fi is a company with big plans to change the field of pet ownership as we know it. starting in 2023, fi plans on expanding their offerings significantly. we knew early on that in order to build a system that felt unified amongst digital and physical products we needed to start with a strong foundation.
Foundation
Elements
Blocks
Layouts
Foundation
The foundation is the core of any design system and is made up of the most tangible components of your brand. any changes made to your foundation later will have ripple effects throughout everything you’ve built — leading to reworking layouts which could be financially costly in engineering time.
Color
Color palettes created with purpose over aesthetics in mind can help you create intuitive design patterns by adding meaning to your interface.
Considerations:
— Accessibility
— Functionality
— Dark Mode
Dark mode example from app redesign
Type
Fi at it’s core is a bold brand that unapologetically insist on standing out. we wanted to pair the company with a typeface that would stand out in the crowd but also had multiple weights and variations to accamodate different situations.
Messina consists of three styles. She is designed for large editorial projects, corporate identities, or advanced online applications. The Sans Version reflects the 20th century and its affinity for reduction.
H1 — H4 Example
Type Example from Marketing site redesign
Grids & Guides
Every layout should sit on a grid that brings order and hierarchy to the interface. We use a 23 column across different platforms with predefined margins on each side.
23 column grids allow for a wide range of content division.
23 col.
Motion
Our motion system helps convey a meaningful and enhanced experience. Elevating the brand by bringing elements to life not only encourages users to explore, but guides them through the experience with advanced interactive functionality.
Motion Example from app onboarding redesign and app vision
2
Pulling it all together
Understanding your foundation is key to building elements for your system. Any changes made later may result in rework and added engineering time.
When we built the elements for fi we made sure they could adapt to any number of situation.
Element example Toggle
Element example general settings template