manuel lima, codecademy: design process at codecademy

Manuel Lima

OUR DESIGN TEAM

Andrés Iga Conor McGlauflin Ramy Majouji

USER SEGMENTATIONUnderstanding our user base

ORIGINAL RESEARCH ORGINAL SURVEY – MAY 2013

Apostolos Karen Vasil Sreeroopa Steven Colin

Micah Eyes Iago Joshua Jesse Ruslan

Gustavo Nantaprong Greg Omar Aditya Emre

Lisa Erik David Joshua Sharon

ORIGINAL RESEARCH 23 USERS INTERVIEWED

8 7

5 3

SEGMENTATION MATRIX

EXPERIENCE INTERMEDIATENOVICE

8 7

5 3

EN

GA

GE

ME

NT

AC

TIV

EP

AS

SIV

E

8 7

5 3

ACHIEVER EXPLORER

HOBBYIST REFRESHER

“I want to improvemy life”

“I want to build something”

“I heard coding is cool”

“I want to polishmy skills”

INTERMEDIATENOVICE

AC

TIV

EP

AS

SIV

E

“All the exercises are easy”Sharon

“Everything I learned has been through projects”

Aditya

“I want to create a simple game”

Erik

“I like to code 20 minutes a day”

Micah

“Coding makes solving problems easier”

Sreeroopa

“I’m not sure what to learn”

Steven

“Building somethingwill keep me going”

Lisa

“I couldn’t find the answer”

Eyes

“I’m doing this to make life better”

Jesse

“I’d be happier if I had a certificate to show”

Gustavo

“I’m learning, but can’t see how to apply it in my life”

Gustavo

“I solve most problems myself when I get stucked”

Ruslan

QUOTES QUOTESQUOTES QUOTES

“I’m interested in self-improvement”

Vasil

“Mostly just for fun and to become better”

Apostolos

“I want to practice what I don’t know”

Karen

“Focused topics would be better”

Apostolos

ACHIEVER EXPLORERHOBBYIST REFRESHER“I want to improve

my life”“I want to build something”“I heard coding

is cool”“I want to polish

my skills”

REIMAGINING CODECADEMYOur Brand

VISUAL COHERENCE?

Create a new digital brand and visual identity that reflects the company’s age, ambition, image and main attributes.

GOAL

REIMAGINING CODECADEMYBrand Elements

OLD NEW

REIMAGINING CODECADEMYUI Implementation

REIMAGINING CODECADEMYPrinciples

ONE COLUMN#1

ONE COLUMN

Focus on the core purpose of the page. One column gives you more control over your narrative. A multi-column dilutes a page’s main purpose.

#1

SOCIAL PROOF#2

SOCIAL PROOF #2

Let users describe and recognize your product. Don’t be pretentious and dull in talking about yourself.

“When starting with Codecademy, I was

amazed at how quickly I was able

to pick up the information.”

MORE CONTRAST#3

MORE CONTRAST #3

Make your calls to action prominent and distinguishable from other surrounding elements.

FEWER FORM FIELDS#4

FEWER FORM FIELDS #4

Minimize the number of unnecessary forms fields. This increases conversion rates and reduces users’ typing fatigue.

KEEPING FOCUS#5

KEEPING FOCUS #5

Reduce number of calls to action in a single page. Focus on what matters and single out the primary CTA.

DIRECT MANIPULATION

#6

DIRECT MANIPULATION #6

Directly act upon UI elements for further actions/controls. This minimizes amount of links and chrome on a page.

VISUAL HIERARCHY#7

VISUAL HIERARCHY #7

Clear content hierarchy that improves legibility and respects white space. Give the eye a place to stop.

VISUAL RECOGNITION#8

VISUAL RECOGNITION #8

Recognition is better than recall. Comfort users by introducing visual elements they are familiar with.

LARGER TARGETS#9

LARGER TARGETS #9

We have increased the size of form fields, calls to action, and links. This not only increases usability (Fit’s Law) but also usage in other touch-enabled platforms.

50px

50px

FIRST USE#10

DESIGN FOR EDGE CASES #10

Optimize for a great out of the box experience. A zero data world can be a cold place.

THANKS

WE’RE HIRING:http://www.codecademy.com/about/jobs

@mslima