In this session, the designer and coach - Zenan, has taught the basic UX design rule and student applied the principles to design the prototype of CodingGirls Member Portal - the final product of Ruby on Rails track.

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