Cozi Design System – Bo Kristensen

Design system and process development

Cozi Family Planner

Brand

Cozi

My Role

Product Designer and Process Consultant

Year

2020

Cozi is an application, both native and web, that allows families to sync their daily plans, meals, and lists. They were in the process of unifying and renovating their application across all platforms their app appeared on. My director brought me on to help with their experience and design systems needs with the idea that the system would be the basis for the build of all Meredith (Allrecipes.com, Swearby.com, People.com, etc.) native applications going forward.

I got the ball rolling early, becoming a prominent voice in the product planning, listening to their story and what their future goals were with the tight timetable they had left. I offered my thoughts and guided the CEO, product, dev, and marketing teams on experience best practices which helped shape their vision and roadmap.

I audited the existing application and streamlined that into a base design system that unified the experience, styling, and components. I set guidelines for compliance and offered solutions to choose from as their current designs were out of spec in many major areas. Components and their usage were heavily documented with the understanding that the system guide would be referenced by the product team, designers, and developers.

The system’s source files were created with robust and reusable symbols. I built a full icon library, a wireframe library for design ideation, and a design guide library loaded with components that are updated as new Cozi app features are added. Couple these changes with time-tested design processes we also introduced and the speed and ease in which screens and features could get designed was drastically improved.

What about getting stakeholder buy-in and handing off the work to the dev team? We met weekly with both teams, introducing applications and software to the teams along the way that streamlined the tasks. Dev teams had all the information, documentation, extensive designs to reference, and assets they could pull when needed.

The changes were well received, headaches were cured, and a new path was paved without all the cracks that existed before. The system and it’s processes were a learning experience that have become our North Star for application builds.

The consulting and direction I did are difficult to illustrate, so below are some examples demonstrating the challenges faced, tools introduced, and resources that were created. Click on any image to view it in more detail.

Old vs. New designs — This is a great example of how inconsistent their application was across different platforms (top) and then updated (bottom) for consistency and using existing components to ensure they could meet their deadline.

Zeplin Details — We introduced software that designs could be synced to and devs could pull specs, CSS, and download assets from.

Template guide — I created a guide that houses detailed mocks of all Cozi screens by platform, breakpoint, and account type (free vs. paid).

Initial Cozi contrast options — To demonstrate compliant options to stakeholders, I researched specific requirements needed for each component's use and then compared the existing visuals (left) to options that had improved visual contrast. readability, and were finger friendly.

Follow up Cozi contrast options — Once I had buy-in from stakeholders on the usability changes, I was tasked with applying changes to additional screens. This is a small sample of those designs.

Cozi Grid System — As I took on more projects for Cozi (not covered here), it became clear that a consistent grid system needed to be decided and documented. I helped the product and dev teams choose a system that worked with existing and new screens across all the platforms.

Cozi Variant Colors — To make a quick reference to each family member, names in the Cozi app can be assigned colors in the form of a dot next to their name. I created options that met contrast. Meeting contrast made some colors too similar to others so I also added options that changed hue entirely while meeting contrast requirements.

Once final compliant colors were decided, I documented them in the design guide with specific details about which icon and font sizes and colors could be paired with each swatch. For grays, percentages of transparent blacks were used to aid in continuing contrast when used over background colors.

Time was tight for the app relaunch, so I put an emphasis on designing components that were robust, flexible, and reusable. This card design is one example.

Button inconsistency was a major issue before I joined the project. I streamlined the number of styles and then created and documented compliant button states for each style on various backgrounds. All clickable components got the same attention.

The initial relaunch of the Cozi app does not include dark mode. However, it is a desirable trend so I accounted for component variants for reference if the mode is added.

I needed to create a number of custom icons for the Cozi brand. To ensure consistency with future builds, I documented best practices for future designers.

UP NEXT

Audio Player for People.com