frontend united: etching wireframes & agile ux
TRANSCRIPT
Etching wireframes& Agile UX
@royscholten, 2013
Monday, April 15, 13
Design process
Monday, April 15, 13
Many sessions have been about with how to build something.
Today, I'd like to talk a bit about what you can do to find out *what* to build in the first place.
Because it doesn't matter how lean and agile your continuous delivery is if you don't start from an understanding of the problem you are trying to solve
How do you get to that understanding?
That's where the design process comes in. Because design is how it works.
User needs
Business goals
Technology
Monday, April 15, 13
Before we dive into the process part, lets establish the domain we're working in.
The interaction or user experience designer looks for the overlap between
- business goals- user needs- technological constraints
User needs
Business goals
Technology
Monday, April 15, 13
Only where those three meet there is a chance for a viable product or service
So that’s the playing field established.
Now for the process bit…
P.I.S.A.
Monday, April 15, 13
I studied illustration at the art academy.One course was called concept development.
It thought a method for generating creative work and drawing it to a conclusion of some sorts.
It was very abstract…
P.I.S.A.ProblemInventorySelectionArbitration
Monday, April 15, 13
This is what it stood for.
We basically got two weeks to work on each stage.
- find an interesting problem- generate multiple ways to solve it- choose the best option- improve that and ‘ship’ it, make it presentable.
I’d like to show how I apply this pattern to 3 different but related kinds of creative work
ART
Monday, April 15, 13
Hi, my name is Roy. I’m an artist.
Monday, April 15, 13
I make prints. Mostly abstract etchings and monoprints
Monday, April 15, 13
This is the working environment
User needs
Business goals
Technology
Monday, April 15, 13
This is the domain.
Let’s go over PISA
Problem?Me.
Monday, April 15, 13
This makes it simple. I’m always around meThis makes it hard. Using your own ideas and perspectives to create something.
InventoryFree experimentation. Generate lots of material
Monday, April 15, 13
So finding an interesting problem in itself requires that I generate stuff.
It’s mandatory to create a lot of waste here.
Monday, April 15, 13
Etching is where you etch an image into a zinc or copper plate. This allows for multiple prints from one original
Monoprint comes down to applying ink to anything that will go through the press. Most of the times this material is brittle and so you can only create only one unique image
Monday, April 15, 13
Inventory! produce a lot of material
SelectionWhat’s looking interesting, surprising, promising?
Monday, April 15, 13
Review a body of work to discover trends, relations and identify an area to hone in on
Monday, April 15, 13
- This is why painters walk back and squint- This is what happens when you say "lets take a step back"- Pick a direction and create another inventory of options but this time focussed around the chosen direction
you look at all the stuff together
Monday, April 15, 13
Isolate some pieces to see if they can live up to being presented as is
Monday, April 15, 13
For this particular round of work. I selected these two pieces.
Not because the overall images were the strongest
Monday, April 15, 13
But there was a certain quality in the detail that I wanted to pursue further, get a grip on this particular kind of visual language
ArbitrationReproduce the happy accidents in a more controlled way
Monday, April 15, 13
So where these were mostly monoprints, the non-reproducible technique.
I wanted to find a way to capture this on zinc, and apply this to the zinc plate
Monday, April 15, 13
You cover a polished plate in groundRemove and apply it again.
It’s very similar to using layer masks in photoshop.
Monday, April 15, 13
So, applying this to multiple plates, a body of work is generated that once again has to be reviewed, selected, reordered.
It’s iterative!
And then there comes the moment where it’s time to draw your conclusions and pick the works that you want to show.
Monday, April 15, 13
So where this was the starting point for this particular series of sprints.
Monday, April 15, 13
It resulted in these works.
This is the etched wireframe one
Monday, April 15, 13
Monday, April 15, 13
Monday, April 15, 13
It’s really fun and interesting to have this
Drupal UX
Monday, April 15, 13
Hi, my name is yoroy. I’m a Drupal core contributor, working on a more usable Drupal
User needs
Business goals
Technology
Monday, April 15, 13
You could say that in core UX, this is where we work on things
Problems?No shortage of Drupal usability problems…
Monday, April 15, 13
Drupal UX problems?
- Just how serious the issues were became clear in 2008, when two proper usability lab tests were done on Drupal 6.- Dries wrote a blog post about not releasing Drupal 7 before 90% of the most serious issues were fixed.- I helped organize a usability sprint at Drupalcon Szeged and you could say that that's where we bootstrapped Drupal UX team.
So, how do we work within core development to redesign and improve parts of the user interface?
Problem?Content creation UX not good enough.Make it better!
Monday, April 15, 13
Having a well defined idea of what you'd like to see fixed is key.
Pick your battles. Drupal is huge, don't try to boil the ocean.
Pick a self-contained part of the user interface and get a clear idea of what you want to fix and what not.
A critical audience is all the content creators and editorsThose people that get to use Drupal content creation forms weekly or even daily, long after you’ve delivered the project.
Where this used to be a decision made by IT,These people have a strong influence on which system to use
Monday, April 15, 13
Simple example. Some serious problems with even a simple version of a content form
- no clear hierarchy to the overall page- essential options are hidden from immediate view- people do not know if ‘Save’ means it will be published or not.
Inventory, IWhat do we have now?What are the others doing?What is contrib doing?
http://groups.drupal.org/node/214898
Monday, April 15, 13
So we have an interesting problem to crack. Relatively contained problem. Improvements will have a big impact on general perception of Drupal usability.
So, again, we do the inventory1, 2, 3
Monday, April 15, 13
(switch to firefox)
its important to show your research, you need better foundations for your designs than ‘i like it that way’
Inventory, IISketch!
Monday, April 15, 13
The best way to get a good idea is to have many ideas
- This is the part where some developers get really nervous! - Sketching is deliberately open-ended, literally sketchy: vague, half-defined.- Post your ideas and allow for feedback
Monday, April 15, 13
Throw out rough ideas. Create multiple options
We had Skype meetings to review our ideas and point out promising areas, problematic ariesas
SelectionReview & decideContinue in hi-fi (Photoshop!)
Monday, April 15, 13
It makes sense to timebox things a bit.
There comes a moment where you realize that you won’t be coming up with anything new (for now)
Monday, April 15, 13
yes photoshop. It’s not an option to dive in and write up the patch that implements this design in a quick and easy way.
Photoshop is still usefull in those cases where you want to get an idea of what the page as a whole comes across
Couple of iterations here as well. Exploring particular details.
(switch to firefox)
ArbitrationTake it to the issue queue for implementation
Monday, April 15, 13
Wrap up the design phase, time to bring it to the issue queue
- Create a brief, reference all the prior research and art, outline what you want to see built.- Ideally, kick it off with a patch- Developers love patches, it's their source material and gives them something to play around with and brings things into their domain of expertise- It can all still totally go off the rails, core issue queues often define the limits of what core devs see happening on d.o.- Usability test if necessary- From then on, it's mostly monitoring the discussion to maintain momentum, help deciding on additional issues and generally try to keep things on track
(SWITCH TO FIREFOX)
Wunderroot
Monday, April 15, 13
Hi. My name is Roy Scholten and I’m a user experience architect at Wunderroot Belgium.
I joined Wunderroot because I want to be there where the rubber meets the road.
User needs
Business goals
Technology
Monday, April 15, 13
So we've established multiple times that we can do better than producing static wireframes, mocking up detailed designs in photoshop and the like.
We need to be more agile! Lean! reduce waste and focus on providing Business value asap.
What can you do to help your clients discover the sweet spot?
Agile UXP. Business & user goalsI. Sketch scenariosS. Review and selectA. Prototype & Usability test
Monday, April 15, 13
This is the format I’m applying these days to uncover what we need to build in order to best help cleints
Problem?Day 1:Business objectivesUser needs: persona
(recruit test participants)
Monday, April 15, 13
Monday, April 15, 13
Monday, April 15, 13
Monday, April 15, 13
InventoryDay 2:Sketch screens in the scenarios
Monday, April 15, 13
Monday, April 15, 13
Monday, April 15, 13
SelectionDay 3:Review all ideasGet stakeholder feedback Decide what to prototype
Monday, April 15, 13
Arbitration, IDay 4:Build the prototype
Monday, April 15, 13
Justinmind.com
Monday, April 15, 13
Arbitration, IIDay 5:Usability test
Monday, April 15, 13
5 participants
Monday, April 15, 13