AgileUX: Prototyping, Design Studio and Sketching

Posted by jc-Qualitystreet on 2012/05/26

Here are the slides of the presentation I gave at Agile France 2012 (Paris)

Agile prototyping tools: Paper, Whiteboard and Balsamiq…

Posted by jc-Qualitystreet on 2011/02/22

…that is all you need to work effectively!

The mockup activity (or prototyping) is part of a user-centered design approach. And the « Wireframe » has become over the years one of the most favorite artifact of User Experience specialists to communicate a concept, verify design assumptions and testing various options or validate ideas and usability decisions …

Example of wireframe with Balsamiq: my french blog

Wireframe: the real issues

A wireframe is a « low fidelity » prototype. This non-graphical artifact shows the skeleton of a screen, representing its structure and basic layout. It contains and localizes contents, features, navigation tools and interactions available to the user.

The wireframe is usually:

• black and white,
• accompanied by some annotations to describe the behavior of the elements (default or expected states, error cases, values, content source…), their relationships and their importance,
• often put in context within a storyboard (a sequence of screens in a key scenario)
• refined again and again
• used as a communication tool serving as an element of conversation and confirmation of  « agile » user stories

Various tools can be used to create wireframes (with different format and level of fidelity), from the simplest to the most sophisticated ones, free or not…

Just enough is the best…

I’ve seen too many projects (led by traditional development methods) in which a wireframe was one of the numerous artifacts of the project, just additional documentation, created solitary by a single person, aiming at replacing dialogue and conversation between people. What a waste…

But I’m also always amazed when I intervene on a agile project as a coach to observe that wireframes are rarely used. Moreover, design & specifications workshops,  interactions, conversations, feedbacks between Product Owner and team  are not effective, partially or not done. What a waste…

The winner of the « the best prototyping tool award » is actually… a Trio!

The real strength of the wireframe lies in its ability:

• to be a communication tool, used during a workshop to facilitate discussion with developers, testers and business actors (Product Owner).
• to be created collaboratively, in order to enable everyone on a team to have a shared picture ,

So, wireframes help to generate feedback, to see potential problems with an interface and to clarify conditions of satisfaction.

For these reasons, simple PAPER PROTOTYPING done collectively,

quick collaborative wireframes on the WHITEBOARD,

and rapid sketching activities with BALSAMIQ,

are by far the most effective.

On Agile projects (with short sprint lasting 2 or 3 weeks), this is not only an option!  Rapid and valuable prototyping in order to foster collaboration and elicit rapid feedback is a must.

Exploring, illustrating and understanding ust enough, just in time… wireframes should be adjusted in terms of scope, details, timing and level of fidelity with a special focus on feedback, collaboration and interactions. This is probably the reason why I abandoned tools like Microsoft Visio and PowerPoint or Axure RP Pro or PowerPoint that have long been my preference but which are mostly inappropriate in the Agile contexts …

Paper Prototyping

Paper prototyping is probably the fastest and easiest form of wireframes but not the least effective. Direct, simple, visual, cheap, enabling rich feedback, paper wireframes focus above all on collaboration and proximity.

Paper (sketch): easy to create a low-fidelity wireframe

Complexity of the format varies from one context to another, as highly developed paper prototypes can be created with proper equipment, good preparation and facilitation. Interactive paper prototyping sessions offer other benefits: direct manipulation, interactivity, playfulness and creativity.

Paper prototyping

Larger collaborative workshops (focus on prototyping) can be very valuable both for design and testing activities.

Design workshop. We divided the group into sub-groups (45 minutes preparation for the first round - 15 minutes presentation)

Simplicity is both a value and a strong principle of agility. Paper prototyping is a solid practice of Agile teams

UI paper

Witheboard: just in time, just enough…

Teamwork on the whiteboard is one of the most efficient form of communication.

Communication Modes Effectiveness - Scott Ambler

Collaborative specifications workshops around the whiteboard are intense and highly valuable:

• they create a collective dynamic leading to a stronger decision
• they are a incredible source of discovery and creativity
• they are interactive, playful, never boring
• they focus on visual and touch through direct manipulation

Several specifications workshops take place during an agile sprint.

Some are dedicated to the scope (user stories) of the current sprint; other (also called Product Backlog refinement) serve to explore, refine, model collectively user stories envisioned for the next sprint. Some teams I coach organize this specification workshop, just in time, the last day of the current sprint (i.e. Friday afternoon) after the Sprint review & Retrospective in order to be ready for the Monday sprint planning.

Other teams organize it in the middle of the sprint in order to have time for requirement exploration, testing, business modeling or quick user research….

Whiteboard prototyping

Design & specification workshops give the necessary context and conversational elements so crucial to User Stories. They enable to illustrate and clarify the conditions of satisfaction while delivering valuable examples.

Take a picture of the results with you camera, and you have a useful element to associate with your user story description written in the wiki!

Balsamiq Mockups

Balsamiq is an electronic tool that I recommend to agile teams (complementary with paper and whitebooard). Easy to use and allowing very rapid sketching, the application presents a large library of UI components (build-in and from the users’ community), many templates, export possibilities and precious plugins for Confluence or  Jira users.

Example of wireframe with Balsamiq

I use the tool with several co-located team and in distributed contexts offshore via screen sharing: in both cases the contribution of the tool was welcomed by teams and Product Owners « a useful tool that serves human activities« .

The sketchy format also has its interest: it lets you focus design conversations on functionality. No risk to forget the reality!

You must focus on your working software deliveries to measure you project progress. Wireframe is a communication tool.

Balsamiq Mockups can be used to model any type of interface: web portal and websites, software application, mobile interfaces…

This is not a free tool but the price / quality ratio is excellent.

Elements of High Performance Agile Teams

Posted by jc-Qualitystreet on 2011/02/21

… the team is now sprint#9, one week before the end of the release.

• All items of the Product Backlog are DONE (except the 5 user stories placed in the  « to do » column of the current sprint. These stories are already delivered to internal testers)

Product Backlog: no "To do" items remaining!

• Customer is delighted by the product he has received (incrementally). Very positive feedback sprint after sprint.
• Product quality is good: the application is fast, robust and secure
• Team satisfaction is high (best score)

Team Satisfaction High : "I am glad I’am part of the team and satisfied with how our team works together"

• Trust and transparency are characteristics of the team
• Management satisfaction is high. managers plan to keep the team and to assign it a new product to work on
• Sprint burndown chart of the current sprint is good

A good Burndown Chart !

• Team velocity is good and steady since 4 or 5 sprints
• Team focus factor is high
• Team accuracy of estimation is good
• Action items of the previous action plan are done

Actions items are tracked. Everything was done at the end of the sprint. The poster was displayed on the wall during the sprint.

• Just a few defects in the Bug tracking system
• No impediment

No impediment in the Impediments list

What else?

Just that it was a pleasure to coach such a good team! Thanks you guys.

Agile Coaching Tips: My Action Plan is visual, simple and SMART!

Posted by jc-Qualitystreet on 2011/02/14

I usually say to Agile teams that the most important outcome of a sprint (or release) retrospective (but also important workshops), is the Action Plan.

Scrum Retrospective Action Plan. A crucial element of facilitation.

Both past and future oriented, the SCRUM retrospective meeting aims to discover what the team did well, understand what went wrong, and to find ways to improve. It’s an important and intense exchange and communication event.

But completing an action plan, at the end of the retrospective, is the only way to make it fully successful and to engage the team in a continuous improvement approach (Inspect & Adapt) for better performance.

Simple

Concise and just enough…

Only a short list of actions (4 max) and three columns that make it simple and effective.

• What (the action: task-oriented, smart and with a verb)
• Who (the owner of the action)
• When (the agreed due-date)

Visual and visible

Build in collaboration on a large sheet of paper. At the end of the meeting, the action plan will join the team’s information radiator, into the team’s workplace to make it visible every day by everybody’s eyes. Communication is crucial for continuous improvement, and visual management is an effective strategy to make the follow up and to maintain engagement.

At the end of the next sprint, actions items of the previous plan will be reviewed: Done or KO…

SMART

Of course, the actions included in the « what » column are SMART:

• Specific
• Measurable
• Achievable
• Realistic
• Time-bound

Then, I like to get the team’s commitment to the plan before closing the meeting and doing the ROTI (Return On Time Invested).

What is Agility? The definition of the agile organization

Posted by jc-Qualitystreet on 2011/02/08

The question arises regularly… so here’s my own definition of agility:

« Agility is the ability of an organization to create value and to continuously delight the customer, while promoting and responding to change in its environment »

This broader definition completes a recent quote of my fellow french blogger Claude Aubry* on Twitter, and adds  to Jim Highsmith’s definition ( »Agility is the ability to both create and respond to change in order to profit in a turbulent business environment » 2002) or Craig Larman’s definition (« Rapid and flexible response to change » 2004). While I found these good definitions very inspiring, I was missing something…

I was missing the CLIENT, the primary goal and core foundation of an organization, the means to align employees to a common vision and the key differentiator against competitors. Indeed, in today’s world of complexity and competition, the challenge is not only to deliver value early but mostly to continuously delight his primary customer.

This is the only viable purpose to be successful in the long term. For this, the agile organization must be both proactive, active and reactive, supported both by lean, agile and user eXperience practices.

Of course « being agile » is also a mindset based on core values: communication, feedback, courage, simplicity, respect and the four from the Agile Manifesto.

* « L’Agilité est la capacité d’une organisation à créer de la valeur, tout en s’adaptant -à temps- aux changements dans son environnement » 2010