Google Password

Delivering HI-FI prototypes & creating an animated short film.
Delivering HI-FI prototypes & creating an animated short film.
Delivering HI-FI prototypes & creating an animated short film.

What started off as a passion project seeking justice for my grandpa, became a fun and learning-filled exploration of an otherwise small aspect of a large digital ecosystem.


The goal was to improve the visual indicators of Google's password creation and reset page so that there is constant feedback for users that need guidance.

Role

All aspects

All aspects

Timeline

Spring 2024

Spring 2024

Tools

Figma

After Effects

Figma

After Effects

How can we…
How can we…
How can we…

improve Google's password creation system for those who are unsure how complicated their password should be

overview

A visually clearer password creation system.

With the addition of segmented progress bars, and a matching illustration to complement it, my proposed password screen creates visual clarity and live feedback to reduce frustration when changing or creating your password.

CONCEPT

This all started when my 95 year-old grandpa forgot his Google password

(He also lost the sticky-note with the password written out)

CONCEPT

We wanted no password on his Chromebook, but we had to have one.

And so we attempted to make simple ones that way he could remember better, but we kept getting errors.

The worst part was there was no precise feedback.

Heuristic analysis & observations

There 4 main insights I wanted to focus the project on

There 4 main insights I wanted to focus the project on

There 4 main insights I wanted to focus the project on

ideation and concepting

Importance of Visual Signifiers

As I was ideating, I asked myself:

Would strength level keywords need to be replaced? Or could other signifiers be used to support them?
How can I make illustrations 

un-intrusive, fitting, useful?

Process

Creating an evolving "metaphoric" lock illustration

Leveraging Google’s illustration style, I created representative status animations of different types of locks to assist user awareness to help them know how strong their password is.

Weak

Fair/Medium

Strong

process

Deciding between two versions

A single progress bar could be used to indicate your password strength status alongside the keyword now highlighted by colour. I chose the status bar segmented based on the 4 levels of password strength, because it allows users to more accurately know where their password strength lies relative to Google’s set baselines.

project reflection

Retrospective

A small project can have big impacts

What started off as a passion project seeking justice for my grandpa, became a fun and learning-filled exploration of an otherwise small aspect of a large digital ecosystem. The time constraints along with the actual feature constraints pushed me to make something grounded and less speculative unlike my design classes at school.

Don't reinvent the wheel

Don't reinvent the wheel

Don't reinvent the wheel

Reference examples of other software SSOs, I was able create a slightly modified version of the existing password change menu without straying away from Google’s brand values and visual guidelines.

© 2024 · Made with Magic (& duct tape) · Jaden Lee :)

© 2024 · Made with Magic (& duct tape) · Jaden Lee :)

© 2024 · Made with Magic (& duct tape) · Jaden Lee :)