Designing A Machine Learning Compliance Product / Part 3

Agile sprints, user stories, & atomic design

Matthew Voshell
Design + Sketch
5 min readDec 4, 2016

--

Agile methodology is a way of running projects that you may have heard of. You’ve probably also heard the terms Scrum, Kanban, and Lean. What does it all mean right?

Speed. More to the point... Velocity. It’s a way to continually discover ways to work faster and more efficiently whilst also removing wasted effort at the same time. It also has a game element to it. Each task or User Story, is assigned a number that represents the level of effort it would take to complete that task. Numbers are assign on the fibonacci numbers. Depending on the length of your sprint (most companies run 1/2 week sprints) 1 person could complete X number of points. In a 2 week sprint I was averaging ~60 points.

The above cartoon (Amend 2005) shows an unconventional sports application of the Fibonacci numbers (left two panels). (The right panel instead applies the Perrin sequence).

When the next sprint planning session occurred, a meeting where the stories are collected and assigned, you would see if you could add 5 more points this sprint. You are constantly pushing how many pts you can complete. When a team attacks this growing sprint backlog it’s known as swarming.

Ideally when you estimate stories you want them to all be 1 pt. 1 roughly equals 1 day of effort. Anything larger and you should break them down into smaller more specific stories. If I don’t I hear the voice of Mark Fischer in my head yelling…

1 point!… 1 story!…1 day!

My focus is always on what design would make the user story true. This allows for ultimate creative freedom while still adhering to feature requirements through Acceptance Criteria. User Stories go a long way to ensuring the quality and consistency of the designs are always high while also being fast.

User Story Mapping

The user story is the main instrument used in the agile design process. They provide a multitude of understanding around Feature Value, Prioritization, and Effort.

I follow the user story structure of

As a <role>, I want <feature> so that <reason>

User story mapping is the foundation for sharing overall understanding and setting expectations on what can realistically be achieved in a sprint. Or as Jeff Patton says,

User Story Mapping is a dead simple idea. Talk about user’s journey through your product building a simple model that tells your user’s story as you do. But it turns out this simple idea makes working with user stories in agile development a lot easier.

If User Story Mapping is new to you you should read Jeff’s book first! It’s really well done and covers all aspects around the process of creating story maps.

Product User Story Map

Around 12 people participated in building the initial map. Using the whiteboard space (8' tall x 12' wide) people were told about the identified roles and were asked to write stories. There had been a few workshops prior to the sessions just around how to write stories for those that didn’t have much experience w/ it. We really wanted everyone’s point of view to be considered and heard.

…my focus is always on what design would make the user story true

I typically start w/ this exercise for most projects AFTER presenting the findings of contextual user interviews. But in this case I had no research data yet so I had to invite stakeholders into the session to lend context and information about what they knew about the users.

The stories pertained to enabling the users to process the alerts at a quicker rate and more efficiently .Many of the assumptions made during this exercise actually ended up being disproved by user research.

Identified Roles

Several roles were identified through this exercise including Level 1 Analyst, Level 2 Analyst, Supervisor, Queue Manager, and System

Design Sprints

The user epics and stories identified from the mapping session are fed into a kanban board. I followed a 2 week sprint schedule. Side Note: I’m almost done the GV design sprint book and will be changing to 1 week sprints.

Kanban boards in conjunction with the screenful.me tracking provides a large window into the design process at any given moment. I find that this allows for ultimate agility when deadlines change, and they always do.

Daily scrum huddles informed the rest of the team on what I actually accomplished yesterday and what I planned to accomplish today.

Project Board Columns

For those Agile junkies out there here is my kanban stages:

  • Use Story Mapping Backlog
  • Whiteboard Backlog
  • White Sprint Backlog
  • Whiteboarding
  • Design Backlog
  • Design Sprint Backlog
  • Designing
  • Design Critique
  • Activity Trail Icon [If one needed to be created]
  • Zeplin Backlog [To be pushed to Dev]
  • Prototype Backlog
  • Prototyping
  • Graveyard

Evaluating Progress & Effort

Using the Labels feature in Trello and a powerup built-in third party app called Screenful.me I’m able to automaticlly create realt time burndown charts, cummulative flow, and understand team velocity. I assign cards w/ the appropriate labels, which represent Epics. Those labels drive the flow chart below.

Screenful.me Epic Cummulative Flow

To determine effort you add a“(#)” at the beginning of the card title to assign an estimation. Screenful will understand this and update accordingly.

Screenful.me also has a “radiator” mode where it automaticlly pages through the screens. It’s great to just leave on a screen in a open area in the office to offer a view of what is being worked on and when it might be complete.

Atomic Design

Developed by the amazing Brad Frost, I’ve follow Atomic Design principles in my Sketch files. If you haven’t seen this drop everything and watch the video below.

Brad Frost explaining Atomic Design

Project Atomic Library

Atoms
These are the smaller bits. For me this means toasts [call to actions], Category icons, General icons, Audit icons, and logos;

Molecules
Comprised of many atoms, Molecules represent the next step in constructing interchangeable components. Typical convention is to read left to right and follow the flow/changes in the component.

Developer Handoff

If you aren’t already you should be using Zeplin. This product enables me to develop very quickly by removing the tedious tasks of creating redline comps or writing CSS for style specifcs like Hex #’s for colors.

Zeplin instantly provides the frontend development team w/ up to date:

  • CSS Stylesheet incl. color pallette
  • Asset Images
  • Object placement/spacing measurements
  • Feedback/Comments

Utilizing the Zeplin Sketch plugin and Sketch Runner pushing updates takes only a few minutes. The more detailed your designs the longer it tends to take to upload. You also can only do 1 page in Sketch at a time but unlimited count of artboards on that page at once.

Next we finally get to discuss the user research!

--

--