This was the first time I heard Dan speak and it was fantastic. I’d class this particular presentation as one of the more challenging to hear because by the end he’s pitching a very different way of working than most of us are used to or have been trained to use. But challenges are good! Even though I’m not sure I’d advocate for all of Dan’s suggestions, the underlying reasoning behind them is sound, and those reasons point to better communication for a team and team goals that might be able to be met through other similar techniques.
Now: @danmall on “Til Launch Do Us Part” – he’s started us off with incredibly old advertising for radios, back in the time when it was believed that copy was the point and the art director did what they copywriter told them to do #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Bill Burnbach and Paul Rand changed all that by making the graphics as much the part of the idea of the ad as the copy. It was the first time they had a team. #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
In order to enjoy the collaboration that creates amazing work, we need to change our work dynamics and right culture. We need to respect the work of the front-end developer. Designers and engineers need to be collaborative partners. #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
If there’s one major commonality of orgs that divide design and development it’s Zeplin. If you use it, please stop. It allows designers to upload sketch files, and it automatically generates code.#AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
An analogy: how to sell cocaine. The Dead Drop: You wire your money to an account. After the payment is verified you go to a location to pick up drugs. No physical encounter occurs. You reduce chances of getting caught. This is like our design process. #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Zeplin cuts meetings in half – because it’s a dead drop. Designers chuck designs over the wall and developers pick them up.
What do you replace Zeplin with? Teams want a single source of truth #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
*Talking* is the source of truth. A tool cannot replace talking. If you want to know how an org does work, watch how the team works.
Agile manifesto’s 2nd principle: working software over comprehensive documentation. #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Comps are documentation for how something works, but you still can’t ship them. If you’re making a web product, you must have a role that writes HTML. Developers make it; everyone else makes it better. But without developers, there’s no product to make better. #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Every good programmer knows you optimize after you’ve built. A true web product MVP is just HTML. When it comes to making web products, front-end development is more important than visual design #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Are HTML and CSS as important as Javascript? Until you output HTML, whether it’s echoing PHP or React or whatever, it’s not a webpage. You need HTML to use anything on the web. What’s the first thing you should learn? HTML. #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
When it comes to making web products, front-end languages are more important than back-end languages. #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
The Brand Gap by Mary Newmeier: A brand is a person’s gut feeling about a product, service, or organization. It’s not a logo or a name or a color. ValuJet’s brand was “not trustworthy” after a crash – when they bought AirTran, they took AirTran’s name. #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
The name “front-end developer” is becoming toxic.
– not useful skills
– not “real” programmers because html/css aren’t “real programming” languagesnew:
Important
Equally valuable to programming
Involved in product vision
Involved in creating user interface#AEADC— Anne Gibson (@perpendicularme) July 31, 2018
Take all your front-end developers, move them to the design team, and call them designers.
Kate uses Sketch
Miles uses Photoshop
Kamala uses Figma
Jane uses HTML 5They all design interfaces for users, in different tools. #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
“It’s more efficient when everyone’s alike”
Sure, but that’s not a diverse team, creates outcasts. Creates stale and mundane thinking. Different skills, background, tools, can result in a really effectively designed team. #AEADC— Anne Gibson (@perpendicularme) July 31, 2018
Being a developer and all of a developer and only a developer never actually works because nobody fits only in one box. Rather than making specific boxes, make the roles really broad and fill them specifically. #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
If everyone is either a designer or an engineer, and that’s a spectrum, then you can plot the people you have across the skills that are needed. This is much more realistic view of skills and needs #AEADC pic.twitter.com/yQW8R7OeKh
— Anne Gibson (@perpendicularme) July 31, 2018
Sparkbox thinks of their work as “the hammer, and the chisel” – the hammer does the broad strokes, with the overall html and css structure, base layout and overall look and feel. #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
The chisel takes the hammer’s work and refines it and makes it more polished with the original vision, they can see actual detailed pieces coming together #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
(There was a video of Sparkbox explaining how this works but I didn’t get the URL – if there was one)
By charting skills like this you can see vertically you can see gaps in your organization. You can train up gaps or you can hire folks to fill gaps. #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Where do we start with our designs?
– Front-end developer starts writing some code: list of the jobs the page should do. Dump it into an html document, and that’s version 1. #AEADC— Anne Gibson (@perpendicularme) July 31, 2018
– because HTML is the web product, everything else is an optimization.
– wrap some divs around the discernible blocks, and now you’ve got a very light mobile-first wireframe.
– Transform to features and content. “Orient me” turns into the header. #AEADC— Anne Gibson (@perpendicularme) July 31, 2018
Now the designer can step in and change the priorities, put two things side by side.
Very rarely do we collaborate this early in a project as designers and front-end developers. #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
People can work in parallel. While the developer is doing the scaffolding, the designer can be working on the art direction. This can be an “element collage” – where you build out the various pieces with just enough exploration so everyone knows where you’re headed#AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
The element collage tells us some of the information that we’re going to need. The color palette, some typography, information that we’re going to need. We can turn these into tokens the designer can manipulate. The designer and developer talk #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Because everything’s rough, there’s no expectation that it’s going to be good. it can be critiqued.
Tokens might be a SASS file, or JSON, or YAML, that the designer owns #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Designers will need to learn a little bit of code, be able to change things directly. Tweak tokens to the heart’s content. That way the art director isn’t leaning over the developer’s shoulder talking about “two more pixels to the right please” #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
“Developer, what do you need right now?” Should be the driving question for the project.
If it’s the footer content – copywriter, get the copy for the footer – if the copywriter’s not available, maybe the product owner or the designer has it #AEADC— Anne Gibson (@perpendicularme) July 31, 2018
Lower stress by putting collaboration to the very front of the process. Give copywriters access to change the copy.
Use “Kind of like this” – “swipe through the cards kind of like this App Store” or “kind of like this button” in conversation. #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
The masthead: “I want a logo to the left, and a weird hamburger menu on the right”
– Developer makes spaces for both
– Designer makes a spot comp for just this part of the page
– Now Developer has just the piece they need #AEADC— Anne Gibson (@perpendicularme) July 31, 2018
(This is a very *very* different way of working than the last 10 year of my career as a ux designer and so far doesn’t really address the messy parts where you get 1/3 of the way into a design and go “nope, that IA’s garbage”. Maybe that would be faster? Not sure.) #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Designer/Developer Workflow with Brad Frost and Dan Mall video will be out next week and will cover much more of how it’ll work. #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Two reasons designers get resistant to this approach:
1. Ego – lots of designers think they rule the team. “I set the vision and what should happen.” There’s no room for ego on a collaborative team. This is actually pretty rare.#AEADC— Anne Gibson (@perpendicularme) July 31, 2018
2. Grieving loss. Denial, anger, bargaining, and depression.
“There’s no way this would work here”
“Why change?”
“What if we only try on side projects?”
“It’s not like it’s going to make anything better”
Designers are losing their identity #AEADC— Anne Gibson (@perpendicularme) July 31, 2018
This change can feel threatening. “Who am I now?” There’s going to be identity problems. If you take an identity away from someone, make sure you give them a new one. #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Action: Write down all the things you wanted to do and you weren’t able to do on your last few projects.
Animating
Learning a new app
Custom illustrations
Learning new code
Custom icon set
DocumentationYou just bought your time to do these things while devs do stuff#AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Dan Mall (@danmall) #aeadc Project Aristotle from Google: Insoght on team effectiveness. The researchers found that what really mattered was less about who is on the team, and more about how the team worked together.
Top factor? Psychological safetyhttps://t.co/0hAXGgoUc8
— Derek Featherstone (@feather) July 31, 2018
Project Aristotle
“Who is on a team matters less than how the team members interact, structure their work, and view their contributions.”
But psychological safety is the most powerful driver in collaboration and new ideas. #AEADC— Anne Gibson (@perpendicularme) July 31, 2018
Strive to change your dynamics to serve each other. #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Support people who have an existing process and slowly move them to a new process… like going from Word to Git for content…fo r this project we’ll do baby steps, and for the next project we’ll do baby steps #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Question and Answer period
How does discovery work in this process? Strategies for solving the problem and possible A/B tests before you get too invested?
Dan’s done this: everyone is up front, even the developers. Finish each other’s work, instead of throwing away each other’s work. #AEADC— Anne Gibson (@perpendicularme) July 31, 2018
Replace a deck of “what you can do” with four workable prototypes of what can be done. Everyone works on day 1. Divergent and convergent processes: read about them. Double-diamond process is a good one. #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Been using this process for the last 6 years.
What are some challenges to expect?
Designers struggle to keep up with the developers, especially where there’s good tooling. “I’m waiting on Design because I’ve run out of stuff to do.” #AEADC— Anne Gibson (@perpendicularme) July 31, 2018
How do you apply this for a massive company and hundreds of people?
Tons and tons of small groups that inter-relate. 6-8 people to work on a project and deploy it. The number of people you add to a team increases complexity because of # of connections #AEADC— Anne Gibson (@perpendicularme) July 31, 2018
If you have a 700-person design team and you’re working on one product, split it to 100 7-person teams. Teach the organization to act small. #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018