Hello,
Nice to meet you!
Google/Android
2022
jihaelee@
Selected works
Proprietary & Confidential
This portfolio showcases my choice works in 2022 while I was a visual design lead at Safety team.
I led visuals of Personal Safety app, �a pre-installed app that helps people prepare and react in an emergency.
My main focus was to create visual solutions considering accessibility and aligning outdated Safety components with Android design system.
Contents
01
02
03
Safety New IA in landscape
Safety in foldable device
Login components
Safety new IA in landscape
01
02
Layout and margin
Card surface screens
Updates
Features
01
Goal of the project
The goal is to expand Safety’s new experience seamlessly to the landscape screens with better user experience.
Intro
Safety adopted navigation rail system for landscape ratio to have better user experience. We followed 16dp margin which is used by several Sys UI screens & essential apps.
Layout and margin
01
Navigation tab
Layout
Nav rail
Nav Bar
PRO:
Align with 1P apps’ current navigation tab treatment
CON:
Spacing issue; users can see less contents
PRO:
Can utilize screen space to see more content than nav bar.
Feels more elevated for landscape ratio.
CON:
None of apps are using nav rail yet except Clock
16dp Margin
Layout
Used 16dp margin to align with Settings & essential apps
Home
Features
Your Info
Home screen with level 1 notice card
Final
Level 1 notification
card
Fast action
buttons
1. Updates
2. Features
Card-surface screens
02
Updates
Card-surface screens
Updates is a page where users can get notifications with the level 3 notice card.
Challenges
Updates page
Chose C for better readability
Iterations
A
2 columns
B
2 columns in card
C
Fixed width (65%)
PRO:
Utilize space
CON:
Feels hectic when scrolling through
CON:
The position of the illustrations shuffle left and right.
PRO:
Better readability
Iterations / Full screen
A
B
C
Reference for option C
Updates
Google Photos is using reduced-width for Utilities page.
Updates final design
Updates
1. Updates
2. Features
Card-surface screens
03
Features
Card-surface screens
Feature is where users can discover and manage Safety’s features and they are on the card surface,
Iterations
Iterations / Pros and cons
A
Full width
B
Fixed width
C
2 columns
PRO:
Align to 16dp margin that is used in nav tab screens
CON:
Bad readability
PRO:
Better readability
CON:
Margin is not aligned to nav tab level screens
PRO:
Good readability, users can check more cards in a screen
CON:
Different card hight might cause bad visuals
Complex state exploration
& solution
Option C
With different card height & having odd numbers of card
Match the height to the longer card
Complex state
Solution
Features final design
Features
Safety in
Pixel Fold
01
02
03
04
Layout
Different state of Home screen
Card treatment in large screen & breakpoint
Feature screens
02
01
Layout
Chapter
What’s in Home?
Home screen
Users can access to key features of the Safety and get critical information.
Default state
Complex state
Emergency action button tile
Level 1 notice cards (crisis alerts, time-sensitive warnings, error notice)
Non-emergency features
Illustration to make the app feel friendlier
CRITICAL
NON-CRITICAL
Layout
Home screen
Folded portrait
Folded landscape
Unfolded portrait
Unfolded landscape
Challenge
Layout
Unfolded layout; treat the contents evenly vs set the center in the crease area
Home Default state
Unfolded landscape
Unfolded Landscape
Layout
What’s the issue?
Column width & gutter alignment
Options:
Decision:
Team decided to go with option B considering user experience of physical hinge area. Pros of going with this direction is that users can see all their features in one screen comparing to 2-3 cards in option B.
A
B
Home
Features
Home
Features
Option A
Layout
Pros: Have same width for each columns
Cons: CTA button is located in the middle crease area
Option B
Layout
Improved layout to not have CTAs in the crease area
02
Different state in Home screen
Chapter
Default state
Home screen
Folded portrait
Folded landscape
Unfolded portrait
Unfolded landscape
Complex state
Home screen
Folded portrait
Folded landscape
Unfolded portrait
Unfolded landscape
Challenge
Home screen
How to treat Illustration on different home state for 2 columns grid screen?
The role of the illustration is to make the app feel friendlier.
Home Default state
Unfolded landscape
Illustration comes after notification card
Opt A
PRO: Has same treatment with handheld.
Users can focus on critical action contents on the screen.
Default state
Complex state
Illustration is always visible
Opt B
Team preferred direction.
PRO: Illustration is always visible, eng feasibility
Default state
Complex state
Iterations
Home screen
No illustration for complex state
2. Home screen state
PRO: Users can focus on critical actions in the screen. Eng feasibility 👌
Default state
Complex state
03
Card treatment in larger
screen & Breakpoint
Chapter
Features tab
Card treatment
Cards are organized into 3 sections depending on the state.
The section header sticks as the user scrolls, so they always know what section they are in.
1. Take action
Features with errors
2. Your features
Features a user has set up
3. Discover
Features that a user has not set up
Current treatment
Card treatment
Challenges:
Cards are in two column grids in landscape screen so that users can have better readability for each card.
When there’re odd number of cards, shorter card’s height is matched to the taller one so that cards have same height as a pair.
POR
Handheld • Landscape
Opt A
Card treatment
Breakpoint: 600dp�PRO: Have same card treatment for larger width screens.
412 dp
666 dp
760 dp
776 dp
834 dp
Handheld landscape
Folded landscape
600dp
Opt B
Card treatment
Breakpoint: 700dp
PRO: Header has more space on felix landscape
412 dp
666 dp
760 dp
776 dp
834 dp
Handheld landscape
Folded landscape
700dp
Card treatment in Features tab
3. Features screen
What’s features tab?
Users can manage Safety features in this tab.
Challenge:
The width for cards should be same to make everything looks equally important.
Decision:
Team decided to go with option A considering user case that users set up all the features. Pros of going with this direction is that users can see all their features in one screen comparing to 2-3 cards in option B.
A
List
B
Carousel
Users set up all features
Users haven’t set up all features
Users set up all features
Users haven’t set up all features
04
Feature screens
Tooltips
Slider + countdown
Safety check ongoing view
Emergency info setting
Medical ID setting
Demo
Emergency call
Chapter
Safety check ongoing view
Feature screen 1
Current
Proposal (Updated)
Slider + Countdown
Feature screen 2
Folded portrait
Folded landscape
Unfolded portrait
Unfolded landscape
Tooltips
Feature screen 3
Tooltips align to the middle of the tab icons.
Folded portrait
Folded landscape
Unfolded portrait
Unfolded landscape
Emergency info setting
Feature screen 4
Folded portrait
Folded landscape
Unfolded portrait
Unfolded landscape
Medical ID info setting
Feature screen 5
Folded portrait
Folded landscape
Unfolded portrait
Unfolded landscape
Fast Emergency Dialer
Feature screen 6
Folded portrait
Folded landscape
Unfolded portrait
Unfolded landscape
Medical ID info setting
Feature screen 7I
Folded portrait
Folded landscape
Unfolded portrait
Unfolded landscape
Emergency Information
Feature screen 8
Folded portrait
Folded landscape
Unfolded portrait
Unfolded landscape
Sign-in component for Android system UI
01
02
03
04
Background
Challenges
Proposal
Adjustment
02
Overview
Safety is an OOBE app and has been aligning its visual to Android System UI. Android system UI doesn’t use GM3 but has its own UI system to differentiate visuals for handheld form factor.
VisD goal is to narrow down the UI gap between One Google component and Android U.
Intro
Android U is Android system UI for 23’
What’s Android U
GM3
Android System UI
Personal Safety app is an OOBE app that is aligned to Android Design System, �not GM3.
Personal Safety
Safety’s visual alignment with Android system UI
Sys UI
Safety
Safety
Sys UI
List items
Shade button tile
02
Challenge
Chapter
Current build
Express login
Safety has been using customized express login sheet for
specific UX needs.
With OG’s express login sheet
Challenge 1
Leadership comments: UI style conflicts with current visual of Safety
Folded portrait
Folded landscape
Unfolded portrait
Unfolded landscape
For example…
Challenge 1
Bottom sheet treatment is different.
Folded portrait
Folded landscape
Unfolded portrait
Unfolded landscape
Safety’s express login lives in Setup Wizard, too.
Challenge 2
Safety’s express login lives in two different space; In-app & Setup Wizard.
Setup Wizard is using Android System UI, not GM3.
Setup Wizard
03
Proposals
Chapter
Express login for Android • Safety
Proposal
PRO
+ Eng feasibility is ‘Good to go’ 👌
+ The new design doesn’t break the user experience since the screen behind is scrollable.
+ This component is reusable for the Recorder app.
Setup Wizard
Express login for Android • Safety
Proposal
Align UI components and visuals to Android U while having same UX structure with OG.
Legal disclaimer
Buttons
Account particle
Login page in Safety
Proposal
Folded portrait
Folded landscape
Unfolded portrait
Unfolded landscape
Login page in Setup Wizard
Proposal
Folded portrait
Folded landscape
Unfolded portrait
Unfolded landscape
04
Adjustment
Chapter
Express sign-in
Proposal 1. Handheld portrait
Handheld
One Google
Proposal
Express sign-in
Proposal
Handheld
Button/color
Spec
Everything was inherited from OG component except button
and its color.
Propose half-width bottom sheet for landscape
Proposal 2. Handheld landscape
UX decision behind express login of Safety is not covering the strings, so that users can scroll and check the information behind the login bottom sheet.
Currently OG is using full-width login bottom sheet for landscape,
so Safety team propose customized style for landscape.
◦ Confirmed OG’s current landscape mock with Sagi (arads@)
One Google
Proposal
Minimum change
Proposal A
For Safety in-app login
Folded portrait
Folded landscape
Unfolded portrait
Unfolded landscape
Minimum change
Proposal A
For Setup Wizard flow
Folded portrait
Folded landscape
Unfolded portrait
Unfolded landscape
Thank you :)