Presented during DevCon Summit 2016 #DevFutureForward on November 5-6, 2016 at SMX Convention Center Manila, Mall of Asia Complex, Pasay City.

1. Software Engineer
to UX Engineer.
Open minded?
Ask me how.

2. 6
Mica
Diaz de Rivera
@Micael
Fb.com/Micael
linkedin.com/in/madiazderivera
JS Camp Asia(Singapore) 2012
UX Hong Kong 2013, 2014, 2015, 2016
UX Malaysia2013
UX Singapore 2013
Service Design HK 2016
Post graduate coursework with the University of the
Philippines Statistical Center Research Foundation
Tutor at UPOpen University (Computer Science and
Management Information Systems)
Co-Founderof UXPH
Has done 40+ talks and workshopson development and
UX across the country and abroad including DevCon
Summits (2), Philippine Web Designer Organization’s
Form Function and Class, and the Philippine Software
Industry Association’sSoftCon.
(2010 – 2012)– Software Engineer
(2012 – 2016) - UX Engineer
6 Years at Sulit.com.ph | OLX.ph
6 Months at NuWorks Interactive Labs

3. is a full service interactive business
solutions agency that builds innovative
digital technologies, properties,
solutions and platforms for online and
mobile advertising.

4. 14 Industry Awards including…
Agency of the Year Awards | Digital
Excellence Award – Best in Production
for two straight years
105 kick-ass employees

5. That thing about me working inside a playground? That was literal, my friends.
Spot.ph’s Coolest Offices in Manila – NuWorks Interactive Labs

6. You look familiar…
Are you that ex Pokémon
Professor guy from DevCon
Summit 2015?

7. Recap DevCon Summit 2015

8. Expectation Setting
This is a soft topic talk.
Unfortunately no nosebleeds to be expected this afternoon

9. Agenda
Quick Definition and Review of this
thing called UX (2 Minutes)
Job Description of a UX Engineer
(6 Minutes)
Open minded ako! Bridging the
gap from Software Engineer to UX
Engineer (20 Minutes)

11. Field research, Face to faceinterviewing, Creation of usertests, Gathering and
organizing statistics, Creating personas, Product design, Feature writing,
Requirement writing, Graphic arts, Interaction design, Informationarchitecture,
Usability, Prototyping, Interfacelayout, Interface design, Visual design, Taxonomy
creation, Terminologycreation, Copywriting, Presenting andspeaking, Working
tightly with programmers,Brainstormcoordination, Designculture evangelism
HOW UX IS TYPICALLYSEEN

12. HOW UX WANTS TO BE SEEN
• Fieldresearch,
• Face to face interviewing,
• Creationof usertests,
• Gathering andorganizing statistics,
• Creatingpersonas,
• Product design,
• Featurewriting,
• Requirement writing,
• Graphicarts,
• Interactiondesign,
• Information architecture,
• Usability,
• Prototyping,
• Interface layout,
• Interfacedesign,
• Visualdesign,
• Taxonomycreation,Terminology
creation, Copywriting,
• Presentingandspeaking, Working
tightly with programmers,
• Brainstormcoordination,
• Design culture evangelism

13. By Dan Saffer and Thomas Gläser

17. Most of us in this room are
probably some kind of software
engineer. (DevCon Summit eh…)

19. “User Experience (UX) Engineers are the
synthesis of design and development.”
“You’ll need both design aesthetic and technical know-how
to develop the next generation of products.”
You'll partner with Researchers and Designers to define and deliver new features, test
new concepts and assist with final implementation.

20. •BS degree in Computer Science or related technical field
or equivalent practical experience.
•4 years of developing websites and applications.
•HTML5, CSS3, and JavaScript development experience.
•Experience with development on mobile platforms.
Google’s Minimum Requirements for a UX Engineer

21. • 7 years of developing clean, valid, and compatible websites and
applications.
• Experience with Object Oriented JavaScript and modern JavaScript
libraries (e.g., Closure, jQuery, Node.)
• Experience with vector and motion graphics, including SVG, HTML5
Canvas, and Animation via JavaScript and CSS.
• Fluency in one or more of: Python/PHP/Ruby, Flash/ActionScript,
Objective-C or Java.
• Excellent leadership, communication, project management, and
organizational skills.
Google’s Preferred Requirements for a UX Engineer

22. Short Version of Talk:
You’re already halfway there.

23. Short Version of Talk:
You’re already halfway there.
Software Engineer – 2 Combined Words
UX Engineer – 1 out of 2 from Software Engineer = HALFWAY THERE!?

24. “User Experience (UX) Engineers are the
synthesis of design and development.”
“You’ll need both design aesthetic and technical know-how
to develop the next generation of products.”
Let’s explore how we could fill these gaps in
the next 20 minutes.

25. Open minded ako! Bridging the gap from Software
Engineer to UX Engineer
Lesson 1: Design Critique

26. Last Year

27. Today

28. Today

29. Open minded ako! Bridging the gap from Software
Engineer to UX Engineer
Lesson 2: Understanding
Patterns

30. Lesson 2.1: How to stand up

31. Lesson 2: Understanding Patterns
Find a partner
1-2

32. Open minded ako! Bridging the gap from Software
Engineer to UX Engineer
• Consistency is a pattern
• Redundancy is a pattern
• Grouping related things
together is a pattern

34. Lesson 2: Understanding Patterns
Stay with your partner
1-2-3

35. Open minded ako! Bridging the gap from Software
Engineer to UX Engineer
Breaking patters (consistency,
redundancy, and grouping) makes
things difficult for human beings.

36. Lesson 2: Understanding Patterns
Stay with your partner
1-2-3-4

37. Lesson 2: Understanding Patterns
Stay with your partner
1-CLAP-3

38. Lesson 2: Understanding Patterns
Stay with your partner
JUMP-CLAP-3

40. Lesson 2: Understanding Patterns
Stay with your partner
JUMP-CLAP-RAISE THE ROOF

41. Open minded ako! Bridging the gap from Software
Engineer to UX Engineer
Lesson Review 1:
Design Critique

43. Open minded ako! Bridging the gap from Software
Engineer to UX Engineer
Lesson 3: Understanding
The Concept of Cognitive
Load

44. Review Lesson 2.1: How to stand up

45. Lesson 2: Understanding The Concept of Cognitive
Load
Find a partner
Hold Hands

47. Lesson 2: Understanding The Concept of Cognitive
Load
Find a partner
Hold Hands Thumb Wars Style
Best of 3

48. Lesson 2: Understanding The Concept of Cognitive
Load
Find a partner
Hold Hands Thumb Wars Style (with EVERYONE)
Best of 1

52. Open minded ako! Bridging the gap from Software
Engineer to UX Engineer
Lesson 4: Practicing
Empathy in Design

54. Open minded ako! Bridging the gap from Software
Engineer to UX Engineer
Lesson 5: Usability Testing

56. Open minded ako! Bridging the gap from Software
Engineer to UX Engineer
Lesson 5: Develop a love for
Measuring… anything

59. Open minded ako! Bridging the gap from Software
Engineer to UX Engineer
- Design Critique
- Understanding Patterns
- Dive into some Cognitive
Psychology
- Practice Empathy
- Learn Usability Testing
- Analytics

60. • 7 years of developing clean, valid, and compatible websites and
applications.
• Experience with Object Oriented JavaScript and modern JavaScript
libraries (e.g., Closure, jQuery, Node.)
• Experience with vector and motion graphics, including SVG, HTML5
Canvas, and Animation via JavaScript and CSS.
• Fluency in one or more of: Python/PHP/Ruby, Flash/ActionScript,
Objective-C or Java.
• Excellent leadership, communication, project management, and
organizational skills.
Google’s Preferred Requirements for a UX Engineer

61. UX
UX is a process wherein we continuously break thinga and make them better

62. We havea
Strategy
Team

63. We have a
development
and QA team

64. We havean
Analytics
Team

65. We havea
UX Team
UX

66. “User Experience (UX) Engineers are the
synthesis of design and development.”
“You’ll need both design aesthetic and technical know-how
to develop the next generation of products.”
You'll partner with Researchers and Designers to define and deliver new features, test
new concepts and assist with final implementation.

67. Short Version of Talk:
You’re already halfway there.
Software Engineer – 2 Combined Words
UX Engineer – 1 out of 2 from Software Engineer = HALFWAY THERE!?

68. Open minded ako! Bridging the gap from Software
Engineer to UX Engineer
- There are so many free tools to make you
look awesome.
- Adobe XD is still for free
- POP Prototyping on Paper is for free
- Google Analytics is for free etc.

71. 152 Awesome UX Talks:
https://vimeo.com/channels/uxweek
40 Cool Service Design Talks:
https://vimeo.com/channels/sxconference
102 Managing Experience Design Talks:
https://vimeo.com/channels/mxconf
Facebook: fb.com/micael
Twitter: @micael
Email: mica.diazderivera@nuworks.ph
LinkedIn: madiazderivera

72. Interested in joining our playground at
NuWorks?
Email: mica.diazderivera@nuworks.ph