Different Team members need different details to produce a feature; address each role specifically. Talk at the Digital Designers Toolbox at Common Code 2015-09-25. http://www.meetup.com/The-Digital-Designers-Toolbox/events/225008963/

1. Spec by
Role

2. The problem
(communication is hard)

3. Page9/74

6. Write your Spec
(by Feature)
then by Role

7. Roles
Backend Developer
Front End Engineer
Front End Developer
Client
Product Owner
UX Designer
UI Designer
Visual Designer
Copy Writer

8. Advantages
Increases the likelihood of the <team member>
comprehending what's relevant to them.
The process of change is async (a flurry of functional changes
may occur, but the appearance of ‘a button’ doesn’t change).
Allows us to update the spec for one role without needing to
change the other. Less noise / change to keep track of.

9. • Accessible
• Focussed
• Asynchronous
• Agile
Values

10. Tech
For: Backend Developer, Front End Engineer
UI Flow Shorthand: text based. Create this with the team in workshops using
sticky notes:
https://signalvnoise.com/posts/1926-a-shorthand-for-designing-ui-flows
State diagram: same function as above, but more visual (more difficult to
create and maintain).
Can map closely to cucumber features:
https://en.wikipedia.org/wiki/Cucumber_(software)

11. https://signalvnoise.com/posts/1926-a-shorthand-for-designing-ui-flows
UI Flow Shorthand, Ryan Singer

13. cucumber
Feature: Invitation to Event
As User, I want to activate an invitation
So I can register for an event
Background:
Given a user has received an email invitation
Scenario: Succesful registration
Given my token is valid
When I click the tokenised link
And there are tickets available
Then I should see the login/register screen
https://cucumber.io/

15. Middleground
For: Front end developer / designer, client (everyone!)
Page Layout
User flow: sketchy wireframe, context, information architecture
Component Layout
Detailed sketchy wireframe, UI design:
text copy, choice of elements, validation messages
More elaborate / difficult to produce and maintain:
http://wireframes.linowski.ca/2012/11/interactive-sketching-notation-v1-3/

16. http://wireframes.linowski.ca/2012/11/interactive-sketching-notation-v1-3/
Interactive Sketching Notation: Jakob Linowski

18. Visual
For: Designer, Client
This is a style guide which is easy to maintain: it’s presentational
only - doesn’t map closely to content.
Easy to maintain, communicates reliable rules for the front end
dev to implement (no special casing!)
Consider https://zeplin.io/ for publishing style guides if you use
Sketch.app

19. http://styletil.es/ : Samantha Warren
“…interface choices without making the investment in multiple photoshop mockups”

20. http://www.designshock.com/bootstrap-3-psd/

21. https://zeplin.io/

22. Solution
Example: https://marvelapp.com/6ag4bh#7954214
• Upload all the assets to a wire framing service
• Use the UI shorthand / state diagram as an index page
• Link each step on the index to the appropriate wire, and
wires to style guides
• Add comments to particular details throughout, but restrict
the comment to a link to a trello card.
Only discuss the issue in the trello card
because Trello is far superior as a forum for discussion!

23. https://invisionapp.com/ https://marvelapp.com/ https://trello.com/

24. Tim Osborn
@memelab