manuel lima, codecademy: design process at codecademy
TRANSCRIPT
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