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

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

Upload: developers-connect-devcon-philippines

Post on 09-Jan-2017

283 views

Category:

Technology


1 download

TRANSCRIPT

Page 1: 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.

Page 2: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera

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

Page 3: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera

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

Page 4: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera

14 Industry Awards including…

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

105 kick-ass employees

Page 5: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera

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

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

Page 6: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera

You look familiar…

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

Page 7: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera

Recap DevCon Summit 2015

Page 8: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera

Expectation Setting

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

Page 9: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera

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)

Page 10: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera
Page 11: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera

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

Page 12: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera

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

Page 13: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera

By Dan Saffer and Thomas Gläser

Page 14: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera
Page 15: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera
Page 16: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera
Page 17: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera

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

Page 18: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera
Page 19: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera

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

Page 20: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera

•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

Page 21: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera

• 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

Page 22: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera

Short Version of Talk:

You’re already halfway there.

Page 23: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera

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

Page 24: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera

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

Page 25: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera

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

Lesson 1: Design Critique

Page 26: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera

Last Year

Page 27: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera

Today

Page 28: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera

Today

Page 29: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera

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

Lesson 2: Understanding Patterns

Page 30: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera

Lesson 2.1: How to stand up

Page 31: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera

Lesson 2: Understanding Patterns

Find a partner

1-2

Page 32: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera

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

Page 33: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera
Page 34: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera

Lesson 2: Understanding Patterns

Stay with your partner

1-2-3

Page 35: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera

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

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

Page 36: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera

Lesson 2: Understanding Patterns

Stay with your partner

1-2-3-4

Page 37: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera

Lesson 2: Understanding Patterns

Stay with your partner

1-CLAP-3

Page 38: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera

Lesson 2: Understanding Patterns

Stay with your partner

JUMP-CLAP-3

Page 39: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera
Page 40: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera

Lesson 2: Understanding Patterns

Stay with your partner

JUMP-CLAP-RAISE THE ROOF

Page 41: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera

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

Lesson Review 1: Design Critique

Page 42: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera
Page 43: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera

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

Lesson 3: Understanding The Concept of Cognitive

Load

Page 44: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera

Review Lesson 2.1: How to stand up

Page 45: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera

Lesson 2: Understanding The Concept of Cognitive Load

Find a partner

Hold Hands

Page 46: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera
Page 47: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera

Lesson 2: Understanding The Concept of Cognitive Load

Find a partner

Hold Hands Thumb Wars Style Best of 3

Page 48: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera

Lesson 2: Understanding The Concept of Cognitive Load

Find a partner

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

Page 49: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera
Page 50: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera
Page 51: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera
Page 52: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera

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

Lesson 4: Practicing Empathy in Design

Page 53: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera
Page 54: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera

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

Lesson 5: Usability Testing

Page 55: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera
Page 56: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera

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

Lesson 5: Develop a love for Measuring… anything

Page 57: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera
Page 58: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera
Page 59: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera

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

Page 60: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera

• 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

Page 61: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera

UX

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

Page 62: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera

We have a Strategy Team

Page 63: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera

We have a deve lopment and QA team

Page 64: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera

We have an Analytics Team

Page 65: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera

We have aUX Team

UX

Page 66: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera

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

Page 67: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera

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

Page 68: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera

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.

Page 69: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera
Page 70: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera
Page 71: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera

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: [email protected]: madiazderivera

Page 72: Open Minded? Software Engineer to a UX Engineer. Ask me how. by Micael Diaz de Rivera

Interested in joining our playground at NuWorks?

Email: [email protected]