canary | Krupa Patel

Duration

10 weeks

Role

Junior Product Designer

Tools

Figma, Google Suite

Team

Marc DeBartolomeis, Director of Design

Jeremiah Selengia, Senior Product Designer

Kate Choi, Junior Product Designer

My Time at Smartfrog & Canary

For some months, I worked at Smartfrog & Canary as a Junior Product Designer. The company sells smart home security devices as well a software for users to control such devices. Working at Canary, there were several projects I was lucky to be apart of. This case study discusses some of my own contributions and research I collected for design decisions as well as future implementations.

Rebuilding Canary's Design System

Problem

Throughout my time at Canary, one of the biggest deliveries made were changes to the Canary Design System. Using research externally and internally, I informed some of the designs that were implemented in the future release of the mobile app.

Keeping icons and CTA buttons consistent regarding size, color, weight etc.

Syncing colors across both Marketing and App Design System

Addressing usability issues with navigational elements

Canary's Current Design System

For this product, the design system is split into two sectors, Marketing and the mobile app for Canary's security system. The goal of this project was to make the design system consistent all across for marketing materials, web and mobile.

Marketing Style Guide

Canary App Style Guide

Initial Research

Color Psychology and Research

To merge two independent style guides, we had to understand the background of their usages within the app and marketing strategies. More importantly, we had to understand their roles in real-world experiences and how Canary can best identify real-world practices in color usage versus brand harmonization.

How does color affect the usage of a CTA button?

What are best practices for icon size, weight, and color?

How can we use colors to influence informational hierarchy?

Research Findings

In my explorative research, here are some common findings that have helped shaped the argument of the design system implementations. These findings also helped various members of the team such as Product Managers, Engineers, and other designers understand the importance of key elements within the design system.

Read Detailed Debrief

Summary Findings

01. Iconography

Making Icons Actionable

Icons should make users recall the action behind the icon without any context clues or cues
Use common icons to help users perceive their environment and make an action
Address the importance of this icon, does it fall under primary, secondary, or tertiary actions

Accessibility

They should refer to icons as good targets, users should instantly know whether it is tappable or not, whether it is used to define something, etc.
5-second rule: Users have a clear indication of what the icon is doing under 5 seconds or less
Icons should be designed to reduce cognitive offload

02. Call-to-action button

Accessibility

The user should be able to predict what the button will do via colors, text, and aesthetic
CTAs’ colors should inform what environment the user is about to be in
There should be a contrast between the CTA and the surrounding space for maximum usage
Inform hierarchy through colors by having distinct primary color options for primary actions and secondary actions
CTA buttons need to replicate real-world experiences, users gravitate toward familiarity
Understanding most use cases, consider people of all types of color vision

Having Impact

Colors leave a trace, be specific in choosing what color your CTA should be
Decide whether it is important to follow brand guidelines or familiarity
End goal is to get the user to the next step as efficiently as possible
Understanding colors not only as solids but also as HSB (hues, saturation, brightness), etc.
- Warm Tones
  - Give energy, radiate, optimism
- Cool Tones
  - Calming, Safety, Secure

Product Research

In Product Research, I did a competitive analysis of similar platforms and how they used their colors, CTAs, and icons. I compared them to standard practices and Canary's current app designs for their dashboard.

To the Design System

Based on the research findings, I started to carve out some edits to some components of the Canary app design system such as the navigational elements, overall CTA color, font elements, etc. An important part of the research is creating a sense of rationale that was valid and consistent all around for PMs and Senior Executives to understand

Current Navigational Elements

Menu navigation maintains increased readability 

Menu Content chevron (opacity is changed from 40% to 20%) is readable and doesn't compete with header navigation

Takeaway: Visual hierarchy is clear... less cognitive load.

Redesigned Elements

Menu navigation maintains increased readability 

Menu Content chevron (opacity is changed from 40% to 20%) is readable and doesn't compete with header navigation

Takeaway: Visual hierarchy is clear which gives less cognitive load.

Current CTA Button

These are the current CTA Buttons throughout the mobile app experience and Marketing upsell buttons (to sell premium services). The green CTAs are used for main functional purposes in the Canary mobile app while the blue buttons are used for promotional services. The goal is to find a way to find a common color that is multi-purposeful for both Marketing and App design

Proposed New CTA Button

Due to the inconsistencies in the color usage, here is the following proposal for the main functionality of blue and green in Canary's mobile app:

Marketing Light Blue would be used as the first and secondary CTA button
- Font size and thickness will increase due to readability issues
Marketing Dark Green would be used purely for system status purposes

Brand Harmonization (Colors)

Canary's new App Design System is a step closer to becoming in sync with Marketing as the new colors follow:

#2DB872

#000070

Marketing Addition

#1598E5

#FF533F

#FFCE33

Marketing Addition

Conclusion

After showcasing my discovery research as well as competitive research and proposed design changes to the Senior Product Managers and executives, the changes to the Canary App Design System were made by updating the app map for the engineering team to start sifting through. It was a fruitful experience to work with all sectors within the product team to make these changes.

Although these changes are secondary or tertiary for most use cases, they alleviate visibility issues for users of Canary as well as bring a step closer to Marketing and Product having a seamless consistent brand identity.

My Takeaways

(Canary Pro Security Cam)

01. Thorough Research Opportunities

Throughout this project, I have been able to do a lot of cross functional research that directly impacted my design deliveries. I had the opportunity to apply concepts from school that I've learned which was particularly fruitful. Being able to understand the importance of small scale icons and buttons that have big impacts on the user's experience was also something that I was lucky to learn and drive throughout my designs.

02. Working with the Product Team

One of the most important experiences within working around design is being able to communicate and collaborate with the other sectors of the product team. I was lucky enough to work with product managers and engineers. It was quite a rewarding experience to present and showcase my work to the rest of the team and overall helped me grow as a designer.

03. Design!!!

The most exciting part of this project was seeing the changes I made and pitched being put to life! Updating the app map with all the changes that would soon be released in the next phase of the mobile application updates was extremely satisfying and encouraging. At the end of the day, these changes will affect a user's interaction and perception of the application!