VTech Icon Library

Project Overview

The MyVTech Baby Plus app is a mobile application that allows parents to stay connected with their little one at home or on the go. With this app, you can enjoy up to 18 hours of continuous recording in full HD, comfort your baby with your voice via two-way talk, and receive AI safeguard alerts for when your baby rolls over, cries, or when their face is covered. This app is the perfect companion for busy modern parents to help them worry less and do more throughout their day! The objective of this project is to redesign all icons within the MyVTech Baby Plus app to improve brand recognition, enhance user experience, and create a more consistent design. The project will include the redesign of all icons within the app, including the main app icon, menu icons, and any other icons used throughout the app. The new icon designs should incorporate a minimalist, clean, and friendly design aesthetic that aligns with the app’s brand identity. The rounded edges design can give a feeling of friendliness and playfulness, while the flat style emphasizes simplicity and clarity. The new icons should be easily recognizable and communicate the app’s purpose and functionality at a glance.

ROLE: Research icon design types, set the principle and rules when design icon for design system and design most of icons in app.

CLIENT: VTech

YEAR: 2020 (Year-long project)

KEYWORDS: Icon Design, Smart Baby Monitor App, Minimalist, Clean, Friendly

Design Process

01 Collect Collect all icons in the app and categorize them.

02 Understand Understand the “VTech” branding history, industry, competitors, and audience.

03 Ideate & Make Rules Think the styles that meet the “Minimalist”, “Clean” and “friendly” design aesthetic. And define all the principle when designing icons.

04 Design Design the icon with grid and follow the keyline.

05 Test & Adjust Create a mockup of the new icon on the related app screen, evaluate its effectiveness, and make adjustments if necessary.

06 Deliver Implement all new icons in the app.

Size & Grid

Icons are drawn on a grid of 24 x 24 px, 32 x 32 px, 48 x 48 px respectively and scaled down linearly to different sizes. 24 px grid is mainly for simple and navigation icons and 48 px grid is for complex and baby related icons.

24px*24px

32px*32px

48px*48px

Keyline

All Keylines

Square

Circle

Vertical Rectangle

Horizontal Rectangle

Design Principle

Style

All icons is flat style. NO perspective. Make icon face forward → Don’t tilt, rotate, or make icons appear dimensional.

a. Solid

All Icons should use solid style. Outline and Solid + Outline style for special case icon.

b. Outline

Only for Wi-Fi, Bluetooth, Arrow, Tick, Close, Add, Search, Share, Full-Screen, Reorder icons.

c. Solid + Outline

If the icon needs to emphasis the signal, speed, direction or highlight something. Those supporting elements can design as outline style for this special case.

Composition

a. Single Element

Only one element
Visually center an icon where the visual weight is heaviest. In some situations, mechanically centering doesn’t work.

b. Two Elements (For Overlap Icon)

Don’t overlap more than two elements to avoid overcomplicating the icon Type
Must design as diagonal composition
Follow the Counter Stroke size (Base on using which size icon grid) to make the subtract area between two elements
Must use the square keyline, cannot use other shape

1. Two Main Elements Two main elements are in same level

Ratio: Same size (80% : 80%) → 80% of square keyline
Alignment: The front element: Bottom left side The back element: Top right side

2. Main Element + Sub Element Emphasis main element

a. With Action (e.g. Add Camera icon)

Ratio: Main → Large (90% of square keyline) Sub → Small (40% of square keyline)
Alignment: The front element: Top right side → Sub The back element: Bottom left side → Main

b. Without action (e.g. Reminder, Mixed Diaper icon)

Ratio: Main → Large (90% of square keyline) Sub → Small (40% of square keyline)
Alignment: The front element: Bottom right side → Sub The back element: Top left side → Main

c. Three Elements

Triangle composition
One element at top, two elements at bottom

With Background

When design the icon with background steps:

Step 1

Use the circle / square keyline for the circle / square background

Step 2

The main icon size should be around 60% – 70% of the circle / square background size

Step 3

Still use the icon grid size for the icon frame. Finally, adjust the icon frame size to fulfill when icon put on the app screen Overall Icon Size

24px: 24 x 24px
32px: 32 x 32px
48px: 48 x 48px

Angles

Use 45° angles for icon design

a. Backslash 45°

b. Slash 45°

Arrow Style

Mainly use outline style for icon with arrow

Use outline style for arrow 2px strokes – for most of the 24px & 32px arrow icon 3px strokes – for simplest arrow icon
All stroke terminals need design as rounded