sbo studying.png
CLIENT

Socratic by Google

DESIGN BRIEF

Redesign the app's visual guide with Google - calibrated design principles

Create illustrations that explain content for different subjects

Design math icons for first party solver content

Build graphics for practice problem states

branding
old branding
old.png
Screen Shot 2020-08-23 at 2.21.39 AM.png
oldexplainer.png
New Branding
Socratic by Google (Grey) (1).png
built-for-learning (1).png
explorer_56kHA30.gif
COLOR
Primary App colors

Google Purple 600

System icons + text labels

Google Purple 800

Home screen gradient

Google Purple 800

Google Blue 500

Background gradient

Google Yellow 400

Tool tip, error background, crop marks

Google Green 600

Source attribution

Google Yellow 100

Text highlight upon search

Visual Style 

Soothing 

Calm 

Neutral

explainer COLOrs

Math

Science

Literature

G Pink 700
Algebra

G Pink 800
Geometry

G Pink 900
Trigonometry

G Cyan 500
Biology

G Yellow 700
Fiction

G Cyan 600
Chemistry

G Yellow 800
Non-fiction

G Cyan 700
Physics

G Yellow 900
Drama

G Orange 500
Poetry

Color Palette

Colors were drawn from the Google material colors. Each broad subject was assigned a color and courses within were assigned aligning hues. 

Primary color palette (Google flagship)

Screen Shot 2020-08-23 at 4.08.21 AM.png

Secondary color palette (Google flagship)

Illustration
style

Low fidelity

High fidelity

Screen Shot 2020-08-23 at 4.13.33 AM.png

Icons

Explainer cards

Subject illustrations

Casual

  • Interesting and informative graphics while aiming to be delightful, but not childish

Expressive

  • Encourages more curiosity and further learning

Consistent

  • Utilize limited material colors, simple graphical shapes, and characters with personality​

subject illustrations
Screen Shot 2020-08-23 at 1.45.07 PM.png
Poetry.png

​The subject illustrations found on the explorer page carry the most detail. Objects or figures should be accurately represented with extra details (eg shadows/textures/expressions).

  • Vector designs, distinct shapes

  • Gradients for shading details

  • Accurate representation of objects, figures, and expressions

  • Found in explorer page

explainer illustrations
explainer 2.png
explainer 1 .png
explainer 1 .png

Explainer illustrations are executed in medium fidelity. Objects should be accurately represented, but do not need to be extremely detailed. Shadows and textures are applied when necessary to get concept across. We have over a 1,000 illustrated explainers total.

  • Vector designs, distinct shapes

  • Stylized, but recognizable depictions

  • Flat color, no outline, no gradient

Illustration rules
Screen Shot 2020-08-26 at 1.36.24 PM.png
People
  • No facial expression for full body

  • Distinguishable traits for famous figures

  • Diverse (race, occupation, fashion)

  • Different outfits integrating Google colors

  • Adjustable limbs

Animals
  • Simple geometric shapes

  • Close to real life color as possible (with Google palette)

  • Situational poses

  • Variety

Items
  • 45 degree slash shadow

  • Omit shadow if content is complicated

  • Repetitive objects depicted in subject color

  • Recognizable detail

Math
  • Texture stroke for lines & arrows

  • .08 stroke for graph lines

  • .1 stroke for regular lines

  • 40% opacity for shading

Math icons
First party solver icons
  • Icons to represent the methodology of the 1P math stepper
  • Work with pedagogy for accuracy 

  • Suitable for both Socratic by Google and Lens by Google

Screen Shot 2020-08-26 at 2.56.08 PM.png
phone.png
CBOJIs
Screen Shot 2020-08-26 at 2.31.50 PM.png

CBO the Mascot

Our team adores our lovable mascot CBO. CBO, prior to its redesign, was often seen as a cat, bat, and owl. CBO is indeed an owl, but we felt as though its other false identities were so charming that we amalgamated the initials of each one to form its name. We use "CBOJIs" internally to celebrate and express our emotions or milestones.