This is a presentation I created for the web/mobile development bootcamp students of Lab12 (Spring 2017 Cohort). It is an introduction to the fundamentals of user experience and interface design (UX/UI) for developers. This presentation also covers how to collaborate effectively with designers, as well as tips for building their project with a user-centered design mindset. Special thanks to Roberta Voulon (Lab12), Ziad Saab (DecodeMTL) , Cassie L. Rheaume (Lighthouse Labs), Kevin Khoury (DecodeMTL), and David Rowley for your input.

1. AN INTRODUCTION FOR DEVELOPERS
ALICE PHIEU
LAB12 BOOTCAMP

2. Hi. I’m Alice.
www.alicephieu.com
@alicephieu
Mobile UI Designer
(Innovation)
at Sun Life Financial

3. 2003
Hi. I’m Alice.
www.alicephieu.com
@alicephieu
2014
TODAY
Graphic Designer
New Media Artist
Enrolled in a dev bootcamp
(DecodeMTL). Learned how to
code & transitioned into the
software/tech industry
User Interface and
Experience Designer
(UI/UX)

4. This presentation will be
available here:
slideshare.net/alicephieu

5. What we will
be covering
today…
1. What is UX?
2. What is UI?
3. Wireframes & Prototyping
4. Working with Designers
5. Practical Design Tips For Your
Bootcamp Projects
6. Workshop:
Design Critique Session

6. What is UX?
User Experience

7. What is UX?
Interface Design
Interaction Design
Field Research
Branding
Information Architecture
Prototyping
Human Factors
Prototyping
User Research and Interviews
Product Design
Requirement Writing
Taxonomy Creation
Innovation
Data Analytics
User Testing
Personas
Copywriting
Usability

11. Who is this person?

12. A few things to consider
Needs
Values
Physical Abilities
Cognitive Abilities
Physical Environment
Social/Cultural Environment
Tools and Devices
Financial State
Age
Who they interact with
etc…

13. THE LEAN STARTUP
FEEDBACK LOOP
METHODOLOGY

14. We often start here…
…when we should
start here

15. • Understanding of the user: their needs, their values, their
physical/mental abilities, their environments, etc.
• Aligning business goals with the user’s interactions of the product,
system and services.
• Understanding the foundation of the technologies being used:
feasibility, scalability, limitations, etc.
• ADVOCATING FOR THE USERS
User Experience focuses on…

16. Without
UX…

17. Learn more about UX
1. Guide To UXR www.guidetouxr.com
2. Shopify UX Blog www.ux.shopify.com
3. Subscribe to UX Weekly - www.uxdesignweekly.com
4. Mixed Method Podcast www.mixed-methods.org

18. What is UI? The means by which the user and a
computer system interact, in particular
the use of input devices and software.

19. There are many types of interfaces

24. Wireframes and
Prototyping

26. Prototyping Demo using

27. Working with
Designers
Here are some tools and advice to
improve your workflow with designers
in the future…

28. Working with Designers
1. Be patient. Educate each other.
2. Create a Style Guide / UI Component Library together.
3. Include the Designer in each step of your process.
4. Use tools such as zeplin.io for design/code handoffs.
5. Always have a user-centered design mindset.
6. Participate in Design Sprints.
7. Share data analytics with designers.

29. Design Tips For
Your Bootcamp
Project
BOOTCAMP TIMELINE
Week 1 Week 12TODAY
Oh noes! Only 6 sessions left!

30. Design Tips For
Your Bootcamp
Project
A. Pair up with a designer
B. Design patterns and UI components.
C. Look at competitors. Imitate.
D. Outsource the design tasks
F. Go to the meetup for feedback:
www.meetup.com/UX-Montreal
G. Peer Design Critique Sessions
(Workshop)
H. Insights from other bootcamp leaders

31. Insights from other bootcamp leaders
ZIAD SAAB
Decode MTL
Shutterstock
CASSIE L. RHÉAUME
Lighthouse Labs
Canada Learning Code
KEVIN KHOURY
Decode MTL

32. Insights from other bootcamp leaders
“Simplicity (less is more)”
“Student over design things. Too many
colours, too many fonts, too busy, etc. Just
teaching them to not do this would be good
:)
“Apply a basic strategy for creating a
breathing, consistent UI”
“Too many of the projects were good on the
tech, but lacked the polish of a real product.
UIs were often all over the place and little
thought was put into creating them.”
Given more time, I would have liked
someone to show the students a tool like
Sketch”

33. Insights from other bootcamp leaders
“Responsive design: bootstrap, different
grid systems, different libraries to facilitate
the task: why, when, how to use them in
which contexts.”
“Sensitizing designers to HTML&CSS
integration is important. For example: the box
model, floats/flexboxes”
“Things going more and more modular, getting a
sense of the vocabulary is always useful:
Atomic design, material, Sketch vs Photoshop,
design system language, etc”
“Designers who design interfaces can do it in
a much more similar way to a dev approach:
create components, modules, different
variations on the same theme, easier
consistency between items, similar
vocabulary (margin, padding, etc.)”

34. That was a lot of information.
Let’s take a break.

35. Design Critique
Session (Workshop)
A. Say your name.
B. In a few words: Say what type of feedback
you are seeking.
C. Briefly show your work (2 minutes). Don’t
interact with your peers. Your time is
limited.
D. Show a clickable prototype, a wireframe,
screenshots, or even a brief concept.
E. After you’re done presenting, don’t speak.
Just return to your seat.
PRESENTER

36. Design Critique
Session (Workshop)

37. Questions?