Ecole Multimédia

Teaching a craft

About

Chris is a Senior UX Designer, Coder, Teacher, and Speaker with 10 years of experience, from Paris, France. Professor of UX Design and Cognitive Psychology in many prestigious colleges, he has taught from Associate to MBA Degree level. As a Program Director, and Faculty Advisor, he has played an important role at the Ecole Multimédia, including as Head of the 201 Innovative Lab. In 2013, he has been quoted in 'Project: Responsive', by Rudy Rigot, founder of Holberton School. He relocated to Brooklyn, New York, in 2014.

Nominated by Awwwards and quoted by Speckyboy for his outstanding work at Magsty, he was one of the first to code a HTML5 Audio Streaming Live Radio Player. He has spoken at the Paris Web Conference, among Denise Jacobs, Mike Monteiro, and Daniel Glazman. As a CEO, he has launched and led 2 LLCs, one of which was 4 years ahead on the market. More details on Chris' experience can be seen on his interactive resume.

Role

UX Design / HMI Culture / Responsive & UI/UX Development Professor

Program Director / Faculty Advisor / UX Head of the Lab 201 / Jury Member

For 20 years, Ecole Multimédia has been teaching Graphic, Web, and Motion Design, and Web Development to the new generation of French Web Designers, Art Directors, Project Managers, and Developers.

Always on the edge of new trends and technology, Ecole Multimédia wanted to add UX Design to the building blocks of their recognized training. After greeting me as a Jury member of the 2013 Associate Art Directors Diploma, they gave me the opportunity, and honor, to become a full time UX Design, HMI Culture, Responsive Web Design, and UI/UX Development Professor. The very same year, I became a Faculty Advisor, and Program Director, and took the head of UX at the 201 Innovative Lab.

We decided to try a conference approach to teaching, which had a huge success and a great impact, leading students to excellent grades. We used minimal yet colorful design to maximize interaction with the classroom.

Highlights

Sector / Type

Education / Teaching materials / From scratch
UX Focus

Entice students, Learning by mistakes, Bring the sciences into UX
Being exhaustive without being exhausting

How to make the most of a week class?
1^st private college in France

Leader in Web development, Graphic, Web, and Motion Design for 20 years
Local and national market

Paris, France

Research

Keeping students interested

In his 1984's 'Experiential Learning', Kolb demonstrated that learning is effective only if lesson is truncated to 15 minutes. He suggested to punctuate with varied activities that help the instructor gauge the students’ progress and require students to actively engage the content, each other and the instructor.

Proposed solution

We advocated for a conference style, with the right amount of information on the screen, examples and analyses of live and recent websites, and the most discussion possible with the students.

Pomodoro Technique

Screenshots of Pomodoro Keeper app.
Learning by mistakes

In 2011, Downar ,Bhatt, Montague, along with Moser, Schroder et al. investigated brain responses to mistakes, and learning outcomes associated. They discovered two typical brain responses: wake up call, and shutting down. They suggested ways to improve performance and learn from mistakes.

Proposed solution

We focused essentially on practical exercises, live analysis, and challenged students into problem solving, especially when it came to using the current trends. Moreover, homeworks were annotated with constructive comments and feedback to help students progress.

Even the best fails sometimes

Screenshot of FastCoDesign "Why the Apple Watch is flopping" article, by Mark Wilson.
Bringing Sciences back into UX

With the development of theme markets, the rise of flat design, and the buzz of UX Design, we are facing websites that are looking the same over and over...leading students to think current trends are the solution for every single project.

Proposed solution

We approached UX Design as a Applied Science to webdesign, using Cognitive Psychology, Neurosciences, and Usability to demonstrate how a same problem can be treated differently, accordingly to target, device, and usage.

Does UX design rhyme with same design everywhere?

Screenshots of mainstream websites' header.

Personae

Viollette Bonami, 22

Art Director

Continuing education

Comes every day, and attends 2 to 3 different disciplines a day, 3 to 4 hours each.

Tasks
Reviews materials from one class to another, use them to do her homework.
Wants
A deep understanding of the craft, and teaching materials she can refer to.
Asks
What is the Cognitive Load theory again?

Thierry Garreau, 26

Developer

Vocational education

Is an intern, comes every day for 4 months, and attends a multiple disciplines, including UX Design, for a full week, 7 hours a day.

Tasks
Learn the most usable knowledge possible in a week, and apply it to his every day workflow.
Wants
An understanding of UI/UX and Responsive Design, to become a better developer, and work better with the Design team.
Asks
Why this element in this design is so important?

Roland Leroux, 46

Project Manager

Block learning / Career change

Comes every day for 4 months, and attends a multiple disciplines, including UX Design, for a full week, 7 hours a day.

Tasks
Make sure he fully understands the nuts and bolts of his new job, and asks many questions about it.
Wants
A peer exchange with his teachers, and the necessary tools for his new career.
Asks
So this rule is about that, right?

Lesson Plans

UX Design Basics

Mastering UX Design basics is important to adress users' needs the right way. This first session is for future designers to create useful interfaces, for developers to understand user motivations, and for managers to better handle a project.
1. History and basics
2. Know your users
  
  Examples and case studies
3. Theories and process
  
  Practical Work: wireframe from a brief
4. Design on marketing target and needs
  
  Practical Work: design a UI/UX from a brief
5. Diving into real life briefs
6. Practical work on a single interface
Improving User Experience

Doing better while doing less, and decreasing cognitive load in interfaces, are the goals of this session. It teaches designers to understand extraneous cognitive load issues, developers to code accordingly, and for managers to understand importance of benchmarking.
1. How to benchmark?
  
  Examples and case studies
2. Make it intuitive, readable, and browsable
  
  Practical Work: unify and simplify a UI/UX
3. Smooth it up!
  
  Practical Work: improve UX of a page with CSS3
4. Adapting to the usages of a device
  
  Practical Work: responsive design your interface
5. Respecting content and typography
6. Loading times affects overall user experience
  
  Examples and case studies
Think forward

In this advanced course, we are emphasizing on designing multi-devices interfaces, adapted to reality of medium, usages, and users' expectations. It will teach designers to be user-centric, developers to be performance centric, and managers to be business-centric.
1. Development as an iterative process, not a one-shot
  
  Examples and case studies
2. Different viewport = different iA
  
  Examples and case studies
3. Paper is not backlighted!
4. Desktop-only interfaces are so 2012.
5. Only one content, only one development, many UXs.
6. Performance first.

Moodboard

Think again - Ted Global
Ted

- Dead Poets Society
- Poly.gon
Spelltower
- Mamika
- Cr4ck th3 cod3

Pantone Pairings
Andrei Gorokhov

Art Direction

Strong contrasts and Vivid colors

Far away from dull Powerpoints, and minimal design,strong contrasts and vivid colors captures and maintains attention through 3 to 4 hours of teaching. Every 2 topics, a complimentary color balances out the potential eye fatigue issue. Every slide displays essential information to engage students into a dialog.

The 5 Dimensions of Interaction Design, according to Bill Moggridge

Hexagon and Mantra

Trend of 2013, hexagon shape owes his revival to the coworking spirit, that gained recognition amongst the industry since Responsive Web Design. Used here to reach a milestone, it as also a reminder of mantra design that becomes more and more intricate with achievement.

Progress pattern

Patterns

A couple of patterns are in use across the slides to help instant recognition of a topic: violet and green + atom or Rorschach masks for UX methods, and Psychological theories, lime + axis and logs used for Maths, and ice blue + cog for tools and exercises, and so on...

Topic patterns

Humor

3 to 4 hours of instruction, even with breaks, and vivid colors on a screen, is pretty long. Humor and jokes are used to keep students' attention, break the formality, and create a more casual atmosphere.

Joke about the burger menu

Font pairing

In order to emphasize reaching milestones and making statements that will leave a mark on students' minds, we used Knockout, in its 28, 48, 68 weight. Knockout is a American sans serif that is great for headings. It is complimented by Sentinel the body text, and Verlag for annotations. All of them have been created by Hoeffler & Frere Jones, for Typography.com.

Role

Highlights

Research

Keeping students interested

Pomodoro Technique

Learning by mistakes

Even the best fails sometimes

Bringing Sciences back into UX

Does UX design rhyme with same design everywhere?

Personae

Viollette Bonami, 22

Art Director

Continuing education

Thierry Garreau, 26

Developer

Vocational education

Roland Leroux, 46

Project Manager

Block learning / Career change

Lesson Plans

UX Design Basics

Improving User Experience

Think forward

Moodboard

Think again - Ted Global

Ted

Dead Poets Society

Poly.gon

Spelltower

Mamika

Cr4ck th3 cod3

Pantone Pairings

Andrei Gorokhov

Art Direction

Strong contrasts and Vivid colors

The 5 Dimensions of Interaction Design, according to Bill Moggridge

Hexagon and Mantra

Progress pattern

Patterns

Topic patterns

Humor

Joke about the burger menu

Font pairing

Specimens

Renderings

Introduction slide

What UX is about?

5 dimensions of Interaction Design

Reading patterns example

Reading patterns example - annoted

A/B Testing introduction example

A/B Testing method slide

A/B Testing advanced example