Manuel Lima, Codecademy: Design Process at Codecademy
Transcript of Manuel Lima, Codecademy: Design Process at Codecademy
![Page 1: Manuel Lima, Codecademy: Design Process at Codecademy](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4dfb61a28ab9b0e8b4677/html5/thumbnails/1.jpg)
![Page 2: Manuel Lima, Codecademy: Design Process at Codecademy](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4dfb61a28ab9b0e8b4677/html5/thumbnails/2.jpg)
![Page 3: Manuel Lima, Codecademy: Design Process at Codecademy](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4dfb61a28ab9b0e8b4677/html5/thumbnails/3.jpg)
![Page 4: Manuel Lima, Codecademy: Design Process at Codecademy](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4dfb61a28ab9b0e8b4677/html5/thumbnails/4.jpg)
Manuel Lima
OUR DESIGN TEAM
Andrés Iga Conor McGlauflin Ramy Majouji
![Page 5: Manuel Lima, Codecademy: Design Process at Codecademy](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4dfb61a28ab9b0e8b4677/html5/thumbnails/5.jpg)
USER SEGMENTATIONUnderstanding our user base
![Page 6: Manuel Lima, Codecademy: Design Process at Codecademy](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4dfb61a28ab9b0e8b4677/html5/thumbnails/6.jpg)
ORIGINAL RESEARCH ORGINAL SURVEY – MAY 2013
![Page 7: Manuel Lima, Codecademy: Design Process at Codecademy](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4dfb61a28ab9b0e8b4677/html5/thumbnails/7.jpg)
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
![Page 8: Manuel Lima, Codecademy: Design Process at Codecademy](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4dfb61a28ab9b0e8b4677/html5/thumbnails/8.jpg)
8 7
5 3
SEGMENTATION MATRIX
![Page 9: Manuel Lima, Codecademy: Design Process at Codecademy](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4dfb61a28ab9b0e8b4677/html5/thumbnails/9.jpg)
EXPERIENCE INTERMEDIATENOVICE
8 7
5 3
![Page 10: Manuel Lima, Codecademy: Design Process at Codecademy](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4dfb61a28ab9b0e8b4677/html5/thumbnails/10.jpg)
EN
GA
GE
ME
NT
AC
TIV
EP
AS
SIV
E
8 7
5 3
![Page 11: Manuel Lima, Codecademy: Design Process at Codecademy](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4dfb61a28ab9b0e8b4677/html5/thumbnails/11.jpg)
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
![Page 12: Manuel Lima, Codecademy: Design Process at Codecademy](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4dfb61a28ab9b0e8b4677/html5/thumbnails/12.jpg)
“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”
![Page 13: Manuel Lima, Codecademy: Design Process at Codecademy](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4dfb61a28ab9b0e8b4677/html5/thumbnails/13.jpg)
REIMAGINING CODECADEMYOur Brand
![Page 14: Manuel Lima, Codecademy: Design Process at Codecademy](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4dfb61a28ab9b0e8b4677/html5/thumbnails/14.jpg)
![Page 15: Manuel Lima, Codecademy: Design Process at Codecademy](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4dfb61a28ab9b0e8b4677/html5/thumbnails/15.jpg)
VISUAL COHERENCE?
![Page 16: Manuel Lima, Codecademy: Design Process at Codecademy](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4dfb61a28ab9b0e8b4677/html5/thumbnails/16.jpg)
Create a new digital brand and visual identity that reflects the company’s age, ambition, image and main attributes.
GOAL
![Page 17: Manuel Lima, Codecademy: Design Process at Codecademy](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4dfb61a28ab9b0e8b4677/html5/thumbnails/17.jpg)
![Page 18: Manuel Lima, Codecademy: Design Process at Codecademy](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4dfb61a28ab9b0e8b4677/html5/thumbnails/18.jpg)
![Page 19: Manuel Lima, Codecademy: Design Process at Codecademy](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4dfb61a28ab9b0e8b4677/html5/thumbnails/19.jpg)
![Page 20: Manuel Lima, Codecademy: Design Process at Codecademy](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4dfb61a28ab9b0e8b4677/html5/thumbnails/20.jpg)
REIMAGINING CODECADEMYBrand Elements
![Page 21: Manuel Lima, Codecademy: Design Process at Codecademy](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4dfb61a28ab9b0e8b4677/html5/thumbnails/21.jpg)
![Page 22: Manuel Lima, Codecademy: Design Process at Codecademy](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4dfb61a28ab9b0e8b4677/html5/thumbnails/22.jpg)
OLD NEW
![Page 23: Manuel Lima, Codecademy: Design Process at Codecademy](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4dfb61a28ab9b0e8b4677/html5/thumbnails/23.jpg)
![Page 24: Manuel Lima, Codecademy: Design Process at Codecademy](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4dfb61a28ab9b0e8b4677/html5/thumbnails/24.jpg)
![Page 25: Manuel Lima, Codecademy: Design Process at Codecademy](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4dfb61a28ab9b0e8b4677/html5/thumbnails/25.jpg)
![Page 26: Manuel Lima, Codecademy: Design Process at Codecademy](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4dfb61a28ab9b0e8b4677/html5/thumbnails/26.jpg)
![Page 27: Manuel Lima, Codecademy: Design Process at Codecademy](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4dfb61a28ab9b0e8b4677/html5/thumbnails/27.jpg)
REIMAGINING CODECADEMYUI Implementation
![Page 28: Manuel Lima, Codecademy: Design Process at Codecademy](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4dfb61a28ab9b0e8b4677/html5/thumbnails/28.jpg)
![Page 29: Manuel Lima, Codecademy: Design Process at Codecademy](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4dfb61a28ab9b0e8b4677/html5/thumbnails/29.jpg)
![Page 30: Manuel Lima, Codecademy: Design Process at Codecademy](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4dfb61a28ab9b0e8b4677/html5/thumbnails/30.jpg)
![Page 31: Manuel Lima, Codecademy: Design Process at Codecademy](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4dfb61a28ab9b0e8b4677/html5/thumbnails/31.jpg)
![Page 32: Manuel Lima, Codecademy: Design Process at Codecademy](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4dfb61a28ab9b0e8b4677/html5/thumbnails/32.jpg)
![Page 33: Manuel Lima, Codecademy: Design Process at Codecademy](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4dfb61a28ab9b0e8b4677/html5/thumbnails/33.jpg)
![Page 34: Manuel Lima, Codecademy: Design Process at Codecademy](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4dfb61a28ab9b0e8b4677/html5/thumbnails/34.jpg)
REIMAGINING CODECADEMYPrinciples
![Page 35: Manuel Lima, Codecademy: Design Process at Codecademy](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4dfb61a28ab9b0e8b4677/html5/thumbnails/35.jpg)
ONE COLUMN#1
![Page 36: Manuel Lima, Codecademy: Design Process at Codecademy](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4dfb61a28ab9b0e8b4677/html5/thumbnails/36.jpg)
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
![Page 37: Manuel Lima, Codecademy: Design Process at Codecademy](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4dfb61a28ab9b0e8b4677/html5/thumbnails/37.jpg)
SOCIAL PROOF#2
![Page 38: Manuel Lima, Codecademy: Design Process at Codecademy](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4dfb61a28ab9b0e8b4677/html5/thumbnails/38.jpg)
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.”
![Page 39: Manuel Lima, Codecademy: Design Process at Codecademy](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4dfb61a28ab9b0e8b4677/html5/thumbnails/39.jpg)
MORE CONTRAST#3
![Page 40: Manuel Lima, Codecademy: Design Process at Codecademy](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4dfb61a28ab9b0e8b4677/html5/thumbnails/40.jpg)
MORE CONTRAST #3
Make your calls to action prominent and distinguishable from other surrounding elements.
![Page 41: Manuel Lima, Codecademy: Design Process at Codecademy](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4dfb61a28ab9b0e8b4677/html5/thumbnails/41.jpg)
FEWER FORM FIELDS#4
![Page 42: Manuel Lima, Codecademy: Design Process at Codecademy](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4dfb61a28ab9b0e8b4677/html5/thumbnails/42.jpg)
FEWER FORM FIELDS #4
Minimize the number of unnecessary forms fields. This increases conversion rates and reduces users’ typing fatigue.
![Page 43: Manuel Lima, Codecademy: Design Process at Codecademy](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4dfb61a28ab9b0e8b4677/html5/thumbnails/43.jpg)
KEEPING FOCUS#5
![Page 44: Manuel Lima, Codecademy: Design Process at Codecademy](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4dfb61a28ab9b0e8b4677/html5/thumbnails/44.jpg)
KEEPING FOCUS #5
Reduce number of calls to action in a single page. Focus on what matters and single out the primary CTA.
![Page 45: Manuel Lima, Codecademy: Design Process at Codecademy](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4dfb61a28ab9b0e8b4677/html5/thumbnails/45.jpg)
DIRECT MANIPULATION
#6
![Page 46: Manuel Lima, Codecademy: Design Process at Codecademy](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4dfb61a28ab9b0e8b4677/html5/thumbnails/46.jpg)
DIRECT MANIPULATION #6
Directly act upon UI elements for further actions/controls. This minimizes amount of links and chrome on a page.
![Page 47: Manuel Lima, Codecademy: Design Process at Codecademy](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4dfb61a28ab9b0e8b4677/html5/thumbnails/47.jpg)
VISUAL HIERARCHY#7
![Page 48: Manuel Lima, Codecademy: Design Process at Codecademy](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4dfb61a28ab9b0e8b4677/html5/thumbnails/48.jpg)
VISUAL HIERARCHY #7
Clear content hierarchy that improves legibility and respects white space. Give the eye a place to stop.
![Page 49: Manuel Lima, Codecademy: Design Process at Codecademy](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4dfb61a28ab9b0e8b4677/html5/thumbnails/49.jpg)
VISUAL RECOGNITION#8
![Page 50: Manuel Lima, Codecademy: Design Process at Codecademy](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4dfb61a28ab9b0e8b4677/html5/thumbnails/50.jpg)
VISUAL RECOGNITION #8
Recognition is better than recall. Comfort users by introducing visual elements they are familiar with.
![Page 51: Manuel Lima, Codecademy: Design Process at Codecademy](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4dfb61a28ab9b0e8b4677/html5/thumbnails/51.jpg)
LARGER TARGETS#9
![Page 52: Manuel Lima, Codecademy: Design Process at Codecademy](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4dfb61a28ab9b0e8b4677/html5/thumbnails/52.jpg)
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
![Page 53: Manuel Lima, Codecademy: Design Process at Codecademy](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4dfb61a28ab9b0e8b4677/html5/thumbnails/53.jpg)
FIRST USE#10
![Page 54: Manuel Lima, Codecademy: Design Process at Codecademy](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4dfb61a28ab9b0e8b4677/html5/thumbnails/54.jpg)
DESIGN FOR EDGE CASES #10
Optimize for a great out of the box experience. A zero data world can be a cold place.
![Page 55: Manuel Lima, Codecademy: Design Process at Codecademy](https://reader034.fdocuments.net/reader034/viewer/2022051516/55a4dfb61a28ab9b0e8b4677/html5/thumbnails/55.jpg)
THANKS
WE’RE HIRING:http://www.codecademy.com/about/jobs
@mslima