Workshop I conducted at Singapore National Design Centre on 24 March 2016. The topic is introduction to UX design.

1. Ask your friends
to download the
app to learn
online Now
www.rings.tv/share/event/ue24876

2. "I like coding
because instead
of us being
consumers, we
could be like
producers."

3. Ruby on Rails Web
App Track
7 Coaches & Tutors
Online help on FB & WeChat Group
Regular every other Sunday workshops
Offline and online coffee meet for Q&A
Registration Link http://peatix.com/event/155500

4. We WANT YOU to be part of
CodingGirls

5. Introduction to
UX Design
Zenan Liu | CodingGirls SG

6. Welcome!
About Me:
● Zenan Liu, UX Designer @ BitTitan
● Background in HCI & Computer Science
● 3 years experience in both design agency & product
company

7. What you will learn today
Main Topics:
● Introduction to UX, UI &
Interaction Design
● Fundamental UI Design
Principles
● How to use moqups.com to
quickly prototype & test your
design with users
Exercises:
● User Research
● Define Problem
● Ideate
● Prototype
● Test & Learn

8. What do you think
of when you hear
“good UX”?

14. UI = The Surface

15. The Elements of User Experience Design
by Jesse James Garrett
http://www.jjg.net/elements/

16. User
Experience
Design
User centered
What people see, do and feel
Design thinking process

17. User centered
Design for what people see, do & feel
The design thinking process
A UX designer needs to
be curious enough to ask
who, what, where, why &
how.

18. User centered
Design for what people see, do & feel
The design thinking process
User Research

19. User centered
Design for what people see, do & feel
The design thinking process
Usability Study

20. User centered
Design for what people see, do & feel
The design thinking process
User Journey Mapping

21. User centered
Design for what people see, do & feel
The design thinking process
Wireframing,
Prototyping &
Visual Design

22. User centered
Design for what people see, do & feel
The design thinking process
5 Steps to great
UX Design
Diverging Converging

23. Workshop: Design the
CodingGirls Member Portal
The Brief:
CodingGirls SG is planning to launch an online portal to help
their members track their learning progress, check
attendance and keep up with upcoming events.
You are hired to work in a team to design the UX for the
online portal.

24. Exercise #1: Understand the User
(15 min)
In groups, one person acts as the user
and others as interviewers.
Interviewers ask questions to
understand the user’s:
● Goals
● Needs
● Pain-points
Tip: ask open-ended questions
● E.g. Tell me about last time you
tried to learn a new skill.
Most importantly, do NOT ask users
what they want!

25. Exercise #2: Define the Design
Problem (10 min)
Discuss with your teammates what
you learned from the user interview.
Define ONE problem your team most
want to solve with your design.
Write down the design problem on a
piece of paper.
Format:
Our team wants to design ____________
that will be in the CodingGirls
member portal, so that users can
_____________________. We think this is a
good problem to solve because
__________________.

26. Exercise #3: Ideate (20 min)
Silent brainstorming (10 min):
● Sketching out your ideas quick
& dirty on paper.
● Don’t write in words, draw
pictures to illustrate your
concept!
● Don’t spend too much time
drawing details, focus on the
big picture.
Review & discuss ideas (10 min):
● Each team member presents
his/her ideas to others.
● Discuss & review concepts.
● Select and combine best ideas
to develop further.

27. Exercise #4: Prototype (1 hour)
Go to moqups.com
Use the free online tool to design
your prototype.
One person can create the project
and add others to the same project
for easy collaboration!
Tips:
● Use the Stencils to create page
elements fast.
● Create hotspots to link up
pages & create clickable
prototypes.
● Don’t spend too much time
with visual design details, stay
low fidelity.

28. Exercise #5: Test (20 min)
Show your design!
● Ask a person from another
team to test your prototype.
● Don’t guide the user, let the
user try out the prototype on
his/her own and talk about
what he/she thinks.
Tips:
● Take notes on issues or insights
you noticed during the testing
session.
● Think about how you can
improve the design in the next
iteration.

29. 3 Takeaways
1. UX design is not just designing the surface.
2. UX design is a user centered process.
3. Create quick and dirty prototypes and use it to test with
users early.

30. Further Readings

31. Thank you!
@zenan_liu