FROM SKETCHES TO CODE
the Agile way
@jenny_wong
#AgileBr
delivery project
coaching
training
sponsor
north america practice lead
The why Analyse the business
The what Convey work
The how Bringing Agile development awesomeness
ROLE OF AN ANALYST IN AN
AGILE ENVIRONMENT
User research
Express requirements in user stories
Feedback-driven collaboration
ROLE OF AN ANALYST IN AN
AGILE ENVIRONMENT
User research
Express requirements in user stories
Feedback-driven collaboratio...
FROM IDEASTO STORIES
ESSENTIALTOOL #1
Breaking a high-level feature down into smaller chunks
EXAMPLE: USER JOURNEY
Luiza wants to book a local restaurant when travelling to Berlin
Luiza opens the app
She sees the tr...
15-MINUTE CHALLENGE
Pairing time!
How would you deliver this iteratively?
Show in stories and sketches
present to group
USER JOURNEY
Luiza opens the app
She sees the travel
guide for Berlin
She sees the
restaurant
recommendations
She clicks o...
DEBRIEF
What were the highest-value aspect of the product?
Did you make assumptions?
How did you find out? (Assumptions vs....
THE PERFECT STORM
Your product owner throws a curve ball during development!
The Business gets a commission at:
A) Users booking a table from reading a review
B) Users booking and dining at the chose...
With your pair
Add, re-sketch and re-write stories in your allocated path
A) Users booking a table from reading a review
B...
USER JOURNEY
Luiza opens the app
She sees the travel
guide for Berlin
She sees the
restaurant
recommendations
She clicks o...
DEBRIEF
How much change did you make?
How did this last round shape your view of the product?
How does this affect technic...
TURNING STORIESTO CODE
ESSENTIALTOOL #2
HOWTO WRITE GOOD BETTER STORIES
As a!
I want!
So that!
INVEST IN INVEST
Independent
Negotiable
Value
Estimable
Small
Testable
DECONSTRUCTING A STORY
Story
Description
Assumptions
Technical notes
Acceptance criteria
Priority
Story estimate
FIELD EXAMPLE
 Description     
Narrative
As  CS
I  want  to  manage  hero  content
So  that  I  can  modify  content  displayed  to  cu...
 Description     
Narrative
As  CS
I  want  to  manage  hero  content
So  that  I  can  modify  content  displayed  to  cu...
 Description     
Narrative
As  CS
I  want  to  manage  hero  content
So  that  I  can  modify  content  displayed  to  cu...
Given  I  have  logged  in  as  CS
When  I  view  the  navigation  bar
Then  I  can  see  a  link  for  "Manage  Gadgets"
...
Given  I  have  logged  in  as  CS
When  I  view  the  navigation  bar
Then  I  can  see  a  link  for  "Manage  Gadgets"
...
10-MINUTE CHALLENGE
Pick a story
Write with details
present
DEBRIEF
How would you tweak this to suit your needs?
How does this help with communication?
... and, collaboration?
What d...
User stories
Domain
Business rules
Scope
Sketches
UI design
Prototype
Wireframes
Code
Functional code
Test code
User stories
Domain
Business rules
Scope
Sketches
UI design
Prototype
Wireframes
Code
Functional code
Test code
User stories
Domain
Business rules
Scope
Sketches
UI design
Prototype
Wireframes
Code
Functional code
Test code
User stories
Domain
Business rules
Scope
Sketches
UI design
Prototype
Wireframes
Code
Functional code
Test code
User stories
Domain
Business rules
Scope
Sketches
UI design
Prototype
Wireframes
Code
Functional code
Test code
User stories
Domain
Business rules
Scope
Sketches
UI design
Prototype
Wireframes
Code
Functional code
Test code
Sketches
UI design
Prototype
Wireframes
Code
Functional code
Test code
User stories
Domain
Business rules
Scope
The intert...
LOOK OUT FOR
POPULAR ANTI-PATTERN
ANTI-PATTERN
CIRCULAR
As a user,
I want to log into the system,
So that I can log into the system.
ANTI-PATTERN
CIRCULAR
As a user,
I want to log into the system,
So that I can log into the system.
As a customer,
I want t...
ANTI-PATTERN
AMBIGUITY
As IT Operations,
I want to look at the system log files,
So that I can use it.
ANTI-PATTERN
GENERIC FORMAT
As a user ...
As a user ...
As a user ...
As a user ...
As a user ...
As a user ...
As a user ...
BEYOND EVERYDAY
REQUIREMENTS
Cross-functional requirements
Technical story
User Interface (UI) story
BEYOND EVERYDAY
REQUIREMENTS
Cross-functional requirements
Technical story
User Interface (UI) story
Could you write stori...
[⌘-C] [⌘-V]
[Ctrl+C] [Ctrl +V]
not good for code, not good for stories either!
AGILE IS A DISCIPLINE
Define the boundaries of your scope
Channel the needs of your customers and stakeholders
Use domain k...
OBRIGADA
THANKYOU
@jenny_wong
#AgileBr
Q & A
FROM SKETCHES TO CODE
the Agile way
From sketches to code, the agile way
From sketches to code, the agile way
Upcoming SlideShare
Loading in...5
×

From sketches to code, the agile way

1,542

Published on

Published in: Technology
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,542
On Slideshare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
2
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide

From sketches to code, the agile way

  1. 1. FROM SKETCHES TO CODE the Agile way @jenny_wong #AgileBr
  2. 2. delivery project coaching training sponsor north america practice lead
  3. 3. The why Analyse the business The what Convey work The how Bringing Agile development awesomeness
  4. 4. ROLE OF AN ANALYST IN AN AGILE ENVIRONMENT User research Express requirements in user stories Feedback-driven collaboration
  5. 5. ROLE OF AN ANALYST IN AN AGILE ENVIRONMENT User research Express requirements in user stories Feedback-driven collaboration How is it different to traditional analysis ?
  6. 6. FROM IDEASTO STORIES
  7. 7. ESSENTIALTOOL #1 Breaking a high-level feature down into smaller chunks
  8. 8. EXAMPLE: USER JOURNEY Luiza wants to book a local restaurant when travelling to Berlin Luiza opens the app She sees the travel guide for Berlin She sees the restaurant recommendations She clicks on one restaurant to look at the reviews She books the restaurant for 7PM Booking confirmation is sent to her via email & calendar - booking ID - map Step-by-step journey as a person, not system Implies UI, and output Does not specify implementation
  9. 9. 15-MINUTE CHALLENGE Pairing time! How would you deliver this iteratively? Show in stories and sketches present to group
  10. 10. USER JOURNEY Luiza opens the app She sees the travel guide for Berlin She sees the restaurant recommendations She clicks on one restaurant to look at the reviews She books the restaurant for 7PM Booking confirmation is sent to her via email & calendar - booking ID - map Luiza wants to book a local restaurant when travelling to Berlin
  11. 11. DEBRIEF What were the highest-value aspect of the product? Did you make assumptions? How did you find out? (Assumptions vs.Validated learning) How robust are your stories at dealing with changes? 5 min
  12. 12. THE PERFECT STORM Your product owner throws a curve ball during development!
  13. 13. The Business gets a commission at: A) Users booking a table from reading a review B) Users booking and dining at the chosen restaurant C) Users submit a rating in the city guide How will you change your sketches and stories to adapt to change?
  14. 14. With your pair Add, re-sketch and re-write stories in your allocated path A) Users booking a table from reading a review B) Users booking and dining at the chosen restaurant C) Users submit a rating in the city guide present! 10-MINUTE CHALLENGE
  15. 15. USER JOURNEY Luiza opens the app She sees the travel guide for Berlin She sees the restaurant recommendations She clicks on one restaurant to look at the reviews She books the restaurant for 7PM Booking confirmation is sent to her via email & calendar - booking ID - map Luiza wants to book a local restaurant when travelling to Berlin
  16. 16. DEBRIEF How much change did you make? How did this last round shape your view of the product? How does this affect technical design? Is this a good thing? Why? 5 min
  17. 17. TURNING STORIESTO CODE
  18. 18. ESSENTIALTOOL #2 HOWTO WRITE GOOD BETTER STORIES As a! I want! So that!
  19. 19. INVEST IN INVEST Independent Negotiable Value Estimable Small Testable
  20. 20. DECONSTRUCTING A STORY Story Description Assumptions Technical notes Acceptance criteria Priority Story estimate
  21. 21. FIELD EXAMPLE
  22. 22.  Description     Narrative As  CS I  want  to  manage  hero  content So  that  I  can  modify  content  displayed  to  customers  on  Ruler  Foods'  home  page Description This  story  allows  CS  to  administer  "hero"  gadgets.  CS  provides  search  criteria  in  the  form  of  tags  and  can  select  one  topic  from  the  results.  This selection  populates  the  hero  gadget  slot  on  the  Ruler  Foods'  home  page  with  that  topic  content. The  hero  gadget  can  contain  an  asset  and  content.  The  content  can  contain  a  headline,  body  text,  and  call  to  action. This  story  also  creates  a  "Manage  Gadgets"  link  on  CMS  navigation  bar. Customers  can  then  view  the  "Hero"  content  on  the  Ruler  Foods'  home  page. Open  Questions How  much  text  do  we  show  for  content  in  search  results?  Headline  and  text  will  show  for  topic  but  how  much  text? OOS This  story  does  not  include  multiple  panels  in  the  hero,  and  the  accompanying  timed  rotation,  and  dot-­based  navigation.  Handled  in  future  story. Does  not  include  inspirational  hero.  (BST-­178) Does  not  include  editing/creating  content  for  hero. User  journey 1.  CS  personnel  logs  in  to  CMS 2.  They  click  on  "Manage  Gadgets" 3.  They  select  "Hero"  for  the  gadget 4.  They  enter  content(topic)  tags  as  search  criteria  for  "Hero" 5.  Search 6.  They  view  list  of  topics  in  search  results 7.  The  topics  can  contain  an  image,  headline,  body  text,  and  call  to  action 8.  They  select  a  single  topic. 9.  Save 10.  They  can  view  the  topic  on  the  Ruler  Foods'  home  page
  23. 23.  Description     Narrative As  CS I  want  to  manage  hero  content So  that  I  can  modify  content  displayed  to  customers  on  Ruler  Foods'  home  page Description This  story  allows  CS  to  administer  "hero"  gadgets.  CS  provides  search  criteria  in  the  form  of  tags  and  can  select  one  topic  from  the  results.  This selection  populates  the  hero  gadget  slot  on  the  Ruler  Foods'  home  page  with  that  topic  content. The  hero  gadget  can  contain  an  asset  and  content.  The  content  can  contain  a  headline,  body  text,  and  call  to  action. This  story  also  creates  a  "Manage  Gadgets"  link  on  CMS  navigation  bar. Customers  can  then  view  the  "Hero"  content  on  the  Ruler  Foods'  home  page. Open  Questions How  much  text  do  we  show  for  content  in  search  results?  Headline  and  text  will  show  for  topic  but  how  much  text? OOS This  story  does  not  include  multiple  panels  in  the  hero,  and  the  accompanying  timed  rotation,  and  dot-­based  navigation.  Handled  in  future  story. Does  not  include  inspirational  hero.  (BST-­178) Does  not  include  editing/creating  content  for  hero. User  journey 1.  CS  personnel  logs  in  to  CMS 2.  They  click  on  "Manage  Gadgets" 3.  They  select  "Hero"  for  the  gadget 4.  They  enter  content(topic)  tags  as  search  criteria  for  "Hero" 5.  Search 6.  They  view  list  of  topics  in  search  results 7.  The  topics  can  contain  an  image,  headline,  body  text,  and  call  to  action 8.  They  select  a  single  topic. 9.  Save 10.  They  can  view  the  topic  on  the  Ruler  Foods'  home  page Customers  can  then  view  the  "Hero"  content  on  the  Ruler  Foods'  home  page. Open  Questions How  much  text  do  we  show  for  content  in  search  results?  Headline  and  text  will  show  for  topic  but  how  much  text? OOS This  story  does  not  include  multiple  panels  in  the  hero,  and  the  accompanying  timed  rotation,  and  dot-­based  navigation.  Handled  in  future  story Does  not  include  inspirational  hero.  (BST-­178) Does  not  include  editing/creating  content  for  hero. User  journey 1.  CS  personnel  logs  in  to  CMS 2.  They  click  on  "Manage  Gadgets" 3.  They  select  "Hero"  for  the  gadget 4.  They  enter  content(topic)  tags  as  search  criteria  for  "Hero" 5.  Search 6.  They  view  list  of  topics  in  search  results 7.  The  topics  can  contain  an  image,  headline,  body  text,  and  call  to  action 8.  They  select  a  single  topic. 9.  Save 10.  They  can  view  the  topic  on  the  Ruler  Foods'  home  page
  24. 24.  Description     Narrative As  CS I  want  to  manage  hero  content So  that  I  can  modify  content  displayed  to  customers  on  Ruler  Foods'  home  page Description This  story  allows  CS  to  administer  "hero"  gadgets.  CS  provides  search  criteria  in  the  form  of  tags  and  can  select  one  topic  from  the  results.  This selection  populates  the  hero  gadget  slot  on  the  Ruler  Foods'  home  page  with  that  topic  content. The  hero  gadget  can  contain  an  asset  and  content.  The  content  can  contain  a  headline,  body  text,  and  call  to  action. This  story  also  creates  a  "Manage  Gadgets"  link  on  CMS  navigation  bar. Customers  can  then  view  the  "Hero"  content  on  the  Ruler  Foods'  home  page. Open  Questions How  much  text  do  we  show  for  content  in  search  results?  Headline  and  text  will  show  for  topic  but  how  much  text? OOS This  story  does  not  include  multiple  panels  in  the  hero,  and  the  accompanying  timed  rotation,  and  dot-­based  navigation.  Handled  in  future  story. Does  not  include  inspirational  hero.  (BST-­178) Does  not  include  editing/creating  content  for  hero. User  journey 1.  CS  personnel  logs  in  to  CMS 2.  They  click  on  "Manage  Gadgets" 3.  They  select  "Hero"  for  the  gadget 4.  They  enter  content(topic)  tags  as  search  criteria  for  "Hero" 5.  Search 6.  They  view  list  of  topics  in  search  results 7.  The  topics  can  contain  an  image,  headline,  body  text,  and  call  to  action 8.  They  select  a  single  topic. 9.  Save 10.  They  can  view  the  topic  on  the  Ruler  Foods'  home  page Customers  can  then  view  the  "Hero"  content  on  the  Ruler  Foods'  home  page. Open  Questions How  much  text  do  we  show  for  content  in  search  results?  Headline  and  text  will  show  for  topic  but  how  much  text? OOS This  story  does  not  include  multiple  panels  in  the  hero,  and  the  accompanying  timed  rotation,  and  dot-­based  navigation.  Handled  in  future  story Does  not  include  inspirational  hero.  (BST-­178) Does  not  include  editing/creating  content  for  hero. User  journey 1.  CS  personnel  logs  in  to  CMS 2.  They  click  on  "Manage  Gadgets" 3.  They  select  "Hero"  for  the  gadget 4.  They  enter  content(topic)  tags  as  search  criteria  for  "Hero" 5.  Search 6.  They  view  list  of  topics  in  search  results 7.  The  topics  can  contain  an  image,  headline,  body  text,  and  call  to  action 8.  They  select  a  single  topic. 9.  Save 10.  They  can  view  the  topic  on  the  Ruler  Foods'  home  page 10.  They  can  view  the  topic  on  the  Ruler  Foods'  home  page Assumptions BST-­178  Assign  content  to  an  Inspirational  Hero  has  not  been  played Searchable  content  exists  for  hero  via  tags. Search  logic  is  an  "OR"  search Home  page  template  is  in  place. Can  only  select  one  topic  at  a  time  for  hero  slot. Content  selection  goes  live  on  save "Hero"  is  an  active  gadget  in  the  template  and  assigned  to  a  slot  on  the  Ruler  Foods'  home  page. Cannot  search  with  a  "blank"  search  box. Acceptance  Criteria
  25. 25. Given  I  have  logged  in  as  CS When  I  view  the  navigation  bar Then  I  can  see  a  link  for  "Manage  Gadgets" 2.  View  search  criteria  for  gadget Given  I  have  clicked  on  "Manage  Gadgets"  link When  I  view  the  page Then  I  will  see  the  current  published  content  (if  any) And  then  I  will  have  an  option  to  select  the  "Hero"  gadget And  then  I  can  select  topics  by  tag  name And  then  I  will  see  an  option  to  search 3.  View  "Hero"  content  from  search  results Given  I  am  on  the  "Manage  Gadgets"  page And  I  have  selected  "Hero"  for  the  gadget And  I  have  typed  "Duck"  for  topic  tag When  I  click  "Search" Then  I  can  see  the  "Duck"  topic  in  search  results And  it  will  contain  image,  headline,  body  text,  and  call  to  action 4.  View  search  results  using  "OR"  logic Given  the  following: topic  A  is  tagged  with  Duck,
  26. 26. Given  I  have  logged  in  as  CS When  I  view  the  navigation  bar Then  I  can  see  a  link  for  "Manage  Gadgets" 2.  View  search  criteria  for  gadget Given  I  have  clicked  on  "Manage  Gadgets"  link When  I  view  the  page Then  I  will  see  the  current  published  content  (if  any) And  then  I  will  have  an  option  to  select  the  "Hero"  gadget And  then  I  can  select  topics  by  tag  name And  then  I  will  see  an  option  to  search 3.  View  "Hero"  content  from  search  results Given  I  am  on  the  "Manage  Gadgets"  page And  I  have  selected  "Hero"  for  the  gadget And  I  have  typed  "Duck"  for  topic  tag When  I  click  "Search" Then  I  can  see  the  "Duck"  topic  in  search  results And  it  will  contain  image,  headline,  body  text,  and  call  to  action 4.  View  search  results  using  "OR"  logic Given  the  following: topic  A  is  tagged  with  Duck, Find your acceptance criteria Happy Path Sad Path Bad Path
  27. 27. 10-MINUTE CHALLENGE Pick a story Write with details present
  28. 28. DEBRIEF How would you tweak this to suit your needs? How does this help with communication? ... and, collaboration? What does this do, to change team dynamics? 5 min
  29. 29. User stories Domain Business rules Scope Sketches UI design Prototype Wireframes Code Functional code Test code
  30. 30. User stories Domain Business rules Scope Sketches UI design Prototype Wireframes Code Functional code Test code
  31. 31. User stories Domain Business rules Scope Sketches UI design Prototype Wireframes Code Functional code Test code
  32. 32. User stories Domain Business rules Scope Sketches UI design Prototype Wireframes Code Functional code Test code
  33. 33. User stories Domain Business rules Scope Sketches UI design Prototype Wireframes Code Functional code Test code
  34. 34. User stories Domain Business rules Scope Sketches UI design Prototype Wireframes Code Functional code Test code
  35. 35. Sketches UI design Prototype Wireframes Code Functional code Test code User stories Domain Business rules Scope The intertwined living documentation
  36. 36. LOOK OUT FOR POPULAR ANTI-PATTERN
  37. 37. ANTI-PATTERN CIRCULAR As a user, I want to log into the system, So that I can log into the system.
  38. 38. ANTI-PATTERN CIRCULAR As a user, I want to log into the system, So that I can log into the system. As a customer, I want to log into my account securely, So that my data is protected from prying eyes.
  39. 39. ANTI-PATTERN AMBIGUITY As IT Operations, I want to look at the system log files, So that I can use it.
  40. 40. ANTI-PATTERN GENERIC FORMAT As a user ... As a user ... As a user ... As a user ... As a user ... As a user ... As a user ... As a user ... As a user ... As a user ... As a user ...As a user ...
  41. 41. BEYOND EVERYDAY REQUIREMENTS Cross-functional requirements Technical story User Interface (UI) story
  42. 42. BEYOND EVERYDAY REQUIREMENTS Cross-functional requirements Technical story User Interface (UI) story Could you write stories for them too? ... and to avoid implementation details!
  43. 43. [⌘-C] [⌘-V] [Ctrl+C] [Ctrl +V] not good for code, not good for stories either!
  44. 44. AGILE IS A DISCIPLINE Define the boundaries of your scope Channel the needs of your customers and stakeholders Use domain knowledge as a communication tool Never, ever a bottleneck or silo
  45. 45. OBRIGADA THANKYOU @jenny_wong #AgileBr
  46. 46. Q & A
  47. 47. FROM SKETCHES TO CODE the Agile way

×