UX designer in a dev team

What's the point?


Bartosz Mozyrko,
Product Owner
Zbyszek Tenerowicz,
Front-end Developer

Why listen to us?


  • Independent research & consulting agency
  • Over 50 projects for external clients


  • Toolkit for improving conversion and UX
  • Most of the clients: UX agencies

The company evolved from agency to a SaaS business.

At first we were like this

Last 12 months

The job

The scope

The scope

UX Elements? What for?

  • JJ Garrett`s diagram explains development process in terms of design, technology and business
  • The model has been commonly used (and modified) for over a decade!
  • Good UX Designers should know how to operate on every level (most people notice only the surface)
  • See for yourself: www.jjg.net/elements/pdf/elements.pdf

Know the difference

Good to have & like

Skills you should be looking for

1. Letter T

T-model implies that UX design is a practice overlapping areas of interest of multiple disciplines


2. Tools

3. Mindset

4. Iterations

It's not an Iteration if you Only do it Once!

Who UX Designer is not?

Thinking process

  • During divergence we are creating choices and during convergence we are making choices
  • Ability of analytical thinking (breaking problems apart) and synthesis (putting ideas together) are also essential

It`s all about the money

  • UX decreases developement costs and improves customer satisfaction
  • Minimum viable research - time is money too, you know


a rough answer to the right question


a detailed answer to the wrong question

The job

You are here:

UX bridges the gap between devs and users

How to communicate

  • Learn to understand both worlds
  • Remember what point of view you represent
    AKA why can't a dev be a UX too?
  • You are responsible for getting everyone to
    share the same vision

Understanding devs is tough at first

But totally worth it

Communicate the design

This slide is obviously about mockups

A picture is worth a thousand words
  • How many of them are true?
  • How many of them are intended?
  • How many of them are ambiguous
    or misleading?
  • Isn't a thousand a bit too much?

Communicate the design 2

  • Where do old mockups go to die?
  • Remove variants that were dropped
  • Update Replace mockups with printscreens when implemented
  • Print out current application state to draw on
  • Use printscreens as mockup basis when applicable

Mockup fidelity

  • Draw your ideas like you had all the paper in the world
  • If you can't show it on a pencil drawing, you don't know what you mean
  • Mockups are not graphics designs without color

High fidelity prototype

  • HiFi prototypes for whole-app designs
  • It's better to make changes earlier
  • Communicate actual interaction
  • Best at describing what dynamics you want
  • Reveals issues with too much text

Effort centered design ®

value/price ratio

Stop overdoing design

Appreciate when it's finished

Where is effort created?

  • Every problem has multiple solutions,
    why not choose the easiest?
  • Know the constraints - know the cost
  • Understand technology and the team
  • Gather opinions on feasibility,
    you'll get more than you expect
  • Developers' laziness is a virtue ;)

Art of ballancing user needs and business value the UX job is.
Master Yoda

Perfect designs are great

...until someone asks "how much?"

UX designer in a team

...is an investment in fixing misconceptions early

Keeping the effort steady
Keeping the spending steady

Coding designer

Learn to code - gain a new superpower!

  • Know the constraints and capabilities
  • Prototype in highest fidelity
  • Prototype responsive layouts
  • Work directly with the application

It's getting easier

Resources for learning HTML5 and CSS are really nice


  • Usability can be improved by just changing the labels
  • Ask your devs, it's easy to change labels yourself
  • Do it in the app, not on mockups
  • Test it right away!

Designing in the browser

Try ideas on the application itself
What you see is what can be implemented right away


  • FireFox has "developer tools" targeted at designers
  • Addons for responsive design testing
  • LESSCSS, live refreshers


  • Make decisions in code!
  • Start the project with styleguide
  • Devs can make it accessible to you
  • You don't need experience to start
    contributing to styleguide

.button { border: 1px solid #239ea8; background-color: #14a3e6; }
.button.active { border: 1px solid #000; background-color: yellow; } 

.icon-duck { background-image: url('icons/duck.png'); }

.notification { border: 1px solid #000; }
.notification.error { color: red; }
.notification.success { color: lightgreen; }


The end

You can now wake up.

This silly deck of slides was brought to you by:

Zbyszek "naugtur" Tenerowicz [naugtur.pl]

Bartosz "a na jakim poziomie modelu Garretta jesteŇõmy?" Mozyrko [mozyrko.pl]


UsabilityTools.com - the ultimate online usability toolkit