open minded? software engineer to a ux engineer. ask me how. by micael diaz de rivera

Software Engineer to UX Engineer.

Open minded?

Ask me how.

6

MicaDiaz de Rivera

@MicaelFb.com/Micael

linkedin.com/in/madiazderivera

JS Camp Asia (Singapore) 2012UX Hong Kong 2013, 2014, 2015, 2016UX Malaysia 2013UX Singapore 2013Service Design HK 2016Post graduate coursework with the University of the Philippines Statistical Center Research Foundation Tutor at UP Open University (Computer Science and Management Information Systems)

Co-Founder of UXPH

Has done 40+ talks and workshops on 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’s SoftCon.

(2010 – 2012) – Software Engineer(2012 – 2016) - UX Engineer

6 Years at Sulit.com.ph | OLX.ph6 Months at NuWorks Interactive Labs

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

14 Industry Awards including…

Agency of the Year Awards | Digital Excellence Award – Best in Production for two straight years

105 kick-ass employees

That thing about me working inside a playground? That was literal, my friends.

Spot.ph’s Coolest Offices in Manila – NuWorks Interactive Labs

You look familiar…

Are you that ex Pokémon Professor guy from DevCon Summit 2015?

Recap DevCon Summit 2015

Expectation Setting

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

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)

Field research, Face to face interviewing, Creation of usertests, Gathering andorganizing statistics, Creating personas, Product design, Feature writing, Requirement writing, Graphic arts, Interaction design, Informationarchitecture, Usability, Prototyping, Interfacelayout, Interface design, Visual design, Taxonomy creation, Terminology creation, Copywriting, Presenting and speaking, Workingtightly with programmers, Brainstormcoordination, Designculture evangelism

HOW UX IS TYPICALLY SEEN

HOW UX WANTS TO BE SEEN

• Field research,• Face to face interviewing,• Creation of user tests,• Gathering and organizing

statistics,• Creating personas,• Product design,• Feature writing,• Requirement writing,• Graphic arts,• Interaction design,• Information architecture,• Usability,

• Prototyping,• Interface layout,• Interface design,• Visual design,• Taxonomy creation, Terminology

creation, Copywriting,• Presenting and speaking,

Workingtightly with programmers,

• Brainstorm coordination,• Design culture evangelism

By Dan Saffer and Thomas Gläser

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

“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.

•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

• 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

Short Version of Talk:

You’re already halfway there.

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!?

“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.

Open minded ako! Bridging the gap from Software Engineer to UX Engineer

Lesson 1: Design Critique

Last Year

Today

Today

Open minded ako! Bridging the gap from Software Engineer to UX Engineer

Lesson 2: Understanding Patterns

Lesson 2.1: How to stand up

Lesson 2: Understanding Patterns

Find a partner

1-2

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

Lesson 2: Understanding Patterns

Stay with your partner

1-2-3

Open minded ako! Bridging the gap from Software Engineer to UX Engineer

Breaking patters (consistency, redundancy, and grouping) makes things difficult for human beings.

Lesson 2: Understanding Patterns

Stay with your partner

1-2-3-4

Lesson 2: Understanding Patterns

Stay with your partner

1-CLAP-3

Lesson 2: Understanding Patterns

Stay with your partner

JUMP-CLAP-3

Lesson 2: Understanding Patterns

Stay with your partner

JUMP-CLAP-RAISE THE ROOF

Open minded ako! Bridging the gap from Software Engineer to UX Engineer

Lesson Review 1: Design Critique

Open minded ako! Bridging the gap from Software Engineer to UX Engineer

Lesson 3: Understanding The Concept of Cognitive

Load

Review Lesson 2.1: How to stand up

Lesson 2: Understanding The Concept of Cognitive Load

Find a partner

Hold Hands

Lesson 2: Understanding The Concept of Cognitive Load

Find a partner

Hold Hands Thumb Wars Style Best of 3

Lesson 2: Understanding The Concept of Cognitive Load

Find a partner

Hold Hands Thumb Wars Style (with EVERYONE) Best of 1

Open minded ako! Bridging the gap from Software Engineer to UX Engineer

Lesson 4: Practicing Empathy in Design

Open minded ako! Bridging the gap from Software Engineer to UX Engineer

Lesson 5: Usability Testing

Open minded ako! Bridging the gap from Software Engineer to UX Engineer

Lesson 5: Develop a love for Measuring… anything

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

• 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

UX

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

We have a Strategy Team

We have a deve lopment and QA team

We have an Analytics Team

We have aUX Team

UX

“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.

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!?

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.

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/micaelTwitter: @micaelEmail: mica.diazderivera@nuworks.phLinkedIn: madiazderivera

Interested in joining our playground at NuWorks?

Email: mica.diazderivera@nuworks.ph