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.
01
Keeping icons and CTA buttons consistent regarding size, color, weight etc.
02
Syncing colors across both Marketing and App Design System
03
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.
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!