Interaction Design : A systems approach
Or : Designing for Flow
( It is 25 min long, so I won’t be offended if you skip it — this is reflective piece for a question that’s bugging me — can we define interaction design so that it’s actually useful and teachable regardless of whether its a product or service, physical or digital, interaction design or service design? Here’s my attempt.)
Field update 1, May 21: I tested the process with a friend yesterday. She runs a non-profit that mentors young adults from underprivileged backgrounds. Together we used the approach to rethink her core mentorship experience. While I can’t share too many details, in summary : it works. The experience signature and signature experience are powerful tools. The reference to cinema and its metaphors work. But as with any design process, its not strictly linear. You bounce around between steps to keep pace with the conversation.
Recap
In the previous post, I defined interaction design as the discipline for the design of active experiences. An active experience is one where the customer is expected to take action in order to activate the experience. The test of the experience is whether is evoked the intended feelings at the right moments and whether it became memorable, so that the customer returns to it in the near future. These are the jobs interaction design is expected to do.
e.g. movie watching is a passive experience since you take a lean-back position. You pay for your experience. By contrast river rafting is an active experience since you take a lean-in position. You have to earn your experience. Loosely, designing the former is experience design, designing the latter is interaction design. The key difference is the second job : making it memorable so that you return to it as often as possible.
In this post I illustrate the process with an example : how might have the designer re-designed the Gmail mobile experience to the Inbox mobile experience ?
Introduction
Two principles and one discipline are at the heart of a systems approach to interaction design.
Principles:
- Design from the Experience Backwards — keep the experience front and centre. Always.
- Design For Flow : Form Follows Function. Function Follows Flow — design the flows and loops first and prescribe the forms last.
Discipline:
Systems thinking. See more here.
Sketch
Before I explain any further, here’s a quick sketch to illustrate the systems approach to interaction design.
Let’s say I’m asked to design a physical library — what might it look like if I took the current approach to interaction design, vis-a-vis the systems approach ?
In the current approach — the stock approach — I would spend most of my time fussing over the stock — categorisation of the books ( information hierarchy ) or the placement of the forms ( visual design) rather than the actual experience of using the library ( interaction design ). Few companies that do spend the time on it seem to have experience that “just work”. Clever illusion, that. Others wait till the actual opening of the library ( beta testing ) to see how people use it.
In a systems approach to interaction design — the flow approach — I would spend most of my time fussing over the experience — what triggers a library experience how does the participant journey between the librarian, books, the space, members and other touchpoints. In what “modes” does she use a library ( reference, study, meeting a date ) and in what intensities ? What gets her excited and what gets her stressed ? Which journeys are taken over and over and which ones are taken only once ? From this I would design the experience.
For example : a study library will have a different mode of use from a reference library. I would map the experience signature of each and fix what I believe to be the best possible experience for each mode. From this I would determine the core functions the library needs and the her feelings at different phases of her experience in each mode. Possibly different floors and different themes and services. Finally, I would infer the forms and where to place them to best support her feelings. I would test the modes and flows as quickly and as often as possible and progressively add objects as I observe moments where she still feels unsupported. I would then test ways to get her back on a regular basis. So far I would scrounge and get what I need to support the experience. If I see interest at this level, I would then bring in an architect, interior designer, product designer or graphic designer and ask them to apply their skills to help me build a state-of-the-art library. My brief would be the experience I’ve constructed — Make sure you only make them feel better.
While I’m over simplifying, my point is experiences today are the last thing a designer looks at. If at all. I think it should be the first thing to be articulated and tested. However the current process simply doesn’t recognise this. This I think is partly why designers are not fully and deeply integrated in companies. We simply do not make it obvious what will the final experience be like until very late into the process .
Process | Phases
The systems approach to interaction design has three phases :
- Experience Design : where we sketch the current and future experience
- System Design : where we assemble the problem and solution system and the pathways the participant might take through the experience
- Form Design: where create the pathway likely to be used most heavily ( the 80/20 rule applies ) and determine which forms are necessary to support the experience along this pathway. We also integrate existing disciplines of form design in this phase.
Field update 1, May 21 : I recently tested the experience design phase with a non-profit which matches mentors with mentees over a one-day workshop. It was a large sized experience ( more on experience sizing below ). The goal was to redesign their current experience. The process involved surfacing positive and negative stories of mentor mentee moments, surfacing the organising principle behind the moments and arranging the moments in time. Lessons —
1 : Starting from the beginning of the experience allowed the team to surface “experience gaps” — phases missing in the experience today. This allowed everyone to see the full experience from srart to finish and intuitively plug in missing phases.
2 : The experience signature became the central artifact that eveyone aligned on. It’s power is in its simplicity. Building back from the experience feels natural.
3 : The process of constructing the experience should be done as a group exercise with each group handling a part of the experience. It’s exhausting for both the facilitator and the participants to do it all at once.
4: The experience signature gave automatic buckets in which to organise work : phases of the experience ( e.g. No Connect ). Each phase finally expanded into the actual experience where every step represented a concrete real-world action ( e.g. Select Venue). This where it gets exciting as everyone can imagine new possibilties.
5: Work through the experience signature slowly. Start from the beginning or someplace easy and build confidence. Anything you do improves the experiences, so you have the satisfaction of changing things immediately.
Process | Steps
Each phase has the follows steps:
Experience Design
- Size the experience
- Find the trigger moment that will lead off into the experience. ( the moment of mediation )
- Define the current experience
- Analyse the experience for energy “leaks”
- Define the new experience
System Design
- Express the current system as an system of verbs
- Define Solution Principles
- Express the future system of verbs
- Determine the system settings
- Determine the path likely to be used most heavily
Form Design
- Develop a system of metaphors to encode forms
- Develop an interaction story
- Prototype the forms
Example : Gmail (before) to Inbox (after)
I’m using the example of Gmail and Inbox’s mobile experience to explain an experience first approach to interaction design. The approach to designing any active experience.
Here’s the before : Gmail.
And here’s the after : Inbox.
How might the designer have redesigned the Gmail experience to arrive at Inbox using a systems approach ?
Here’s a walk through using the process
0. Size the Experience
What : Put a T-shirt size to the experience
Why : Assess the complexity of the experience in order to sequence problem solving ( series or parallel ) and help in planning
How :
In T shirt sizes :
S — a slice of a participant journey — typically the size startups or individual apps aim for, you’re dealing with a single moment and a single mediation.
M — a part of a participant journey — like a check-in experience at a hospital, you will find more moments of mediation. All moments that happen in one physical space make up one single scene. e.g. Every moment of mediation in the check-in hall — waiting area, reception desk, emergency arrivals is one scene. Either prioritise and pick one moment , or parallelise and have one designer mediating moment in the Scene.
L — an entire participant journey — like the hospital stay experience from check-in to check-out you are dealing with a story. You chunk down the Story to Scenes, agree on Key Scenes, and have designers work in parallel on individual Scenes. Field update 1, 21st May: Worked on a new size L experience — redesgining the mentor-mentee experience.
XL — an entire participant journeys with large delays — sometimes years, and sometimes unknown and unknowable feedback loops, like the education system.You are dealing with a story with multiple endings.
Note : XL experiences are not solvable in this form since the time delays make it impossible to keep a team’s momentum going. For that you need to take a slightly different approach —think in layers and design Interventions. Key interventions, made at “soft spots” in the system alter system behaviour quickly. You assess the change, find the next soft spot and repeat the process. Essentially you resize the problem to S, M or L.
You could solve a big system problem at the level of a Moment, Scene or Story.
Example: The gmail mobile experience is clearly size S
1. Find the Trigger Moment
What : Contextualise the participant experience and determine where you will trigger your experience.
Why : People pay for pain. People will only hire your experience if it helps them when it matters the most — when they feel helpless to help themselves. Find moments where there is a gap in your customer’s life which can be filled by your experience. Eventually when you pitch it to your customer’s this is what will appear on your advertising, so figure it out early. It very expensive to discover later you designed something your customer didn’t really need. This is the only sustainable way to create a demand.
How: Design research with a new grammar :
Moment of mediation — everyone falls into moments of helplessness — where we don’t want to be there, but can’t go anywhere else. Think of when you’re stuck in a traffic jam, stuck in a boring meeting, stuck in school lobby, stuck in a hospital waiting room. Think of these moment as valleys of helplessness.
If you provide an offering that pulls them out of this valley -i.e. empowers them, you will have your participants gratitude and she will form a new habit because life is better with your offering. This is where you want to trigger your experience.
Here are some examples from research we did in healthcare :
Example: For the Inbox or Gmail mobile app, the moment of mediation here is the dead time — in traffic, in that meeting — where we reach for the phone hoping to do something useful with it. The job then is to make the participant feel like she did something useful with the slice of time on the app. i.e. She needs to feel like she accomplished something. We will test for this with the new experience.
2. Define the current experience
What : Graph the current experience.
Why : Get context and empathy quickly.
How : Take the journey yourself , or tag along with someone who is taking the journey. Alternatively, get 5 participants together in a room and get them to graph their experience of the postive and negative moments from going thru the experience. This will surface some phases and indicate “experience gaps” where some phases are missing.
Step through the most used pathway of the current experience or the most urgent pathway of the current experience. The first is the thruline and the second the faultline. If you’re your building confidence start with the thruline. If you’re radically rethinking the experience start with the faultline.
When stepping thru, note only the actions you took. Every step must be a verb. Add one noun below the verb to contextualise the action. Continue until the pathway is complete. Read together, it should read like a mini-story. If its very long, break it up into scenes. Remember everything that happens in one location is one scene.
Graph your energy levels at each verb. Recall how you felt at each action. It will always be an approximate graph. That’s good enough.
Give the graph an evocative name that characterises it. This the current energy signature.
Inventory the other pathways used.
Example
- I take the thruline since I don’t use gmail for extreme situations
Example : I use Gmail app as would usually would when in traffic or in a meeting room. The whole experience lasts a few minutes
- I make a note of the physical or mental actions I take — these are the verbs making up the experience. This is my X axis.
Example : For Gmail app , I Open, Scan, Clear, Prioritise, Respond, Exit. The trigger verb is Notice. - I note how the experience feels as I journey through the thruline. This is my Y axis. Example : The current experience feels overwhelming. There’s too much to scan, assess, organise before I can even get to a response. I lose energy almost as soon as I enter the experience. All I do is check if I’ve missed anything important any leave as soon as possible. I feel relief once I’ve close the app.
- I give the experience an evocative name I can refer to later
Example: I call it the Hit-and-Run experience. - I inventory the Read pathway and the Write pathway. I’ll be designing the Read pathway. The write pathway is shorter.
3. Analyse the experience for energy “leaks”
What : Analyse at which moments the experience drained you. Powerlessness is felt quite literally as power leaving you. Identify the verbs responsible for this.
Why : Determine where to start fixing the experience. The hotspots.
How : Mark places where you leaked energy. Find the dysfunctional verbs
Example :
The energy graph looks terrible. The experience feels “heavy”. I’m losing energy almost as soon as I enter the experience. But why ? As I analyse the phases it becomes obvious — It’s all the Clearing and Prioritising. These are the dysfunctional verbs. I’m being forced to do before I get to even reading a mail. It’s all negative work. I want to cook, but I’m being forced to chop veggies. Of course I’ll lose energy.
Hints
- In case of an L or XL experience where taking the full journey is not possible, start with a hotspot and then pull back to the scene where the hotspot starts. Fix this and move on to the next hotspot. Overtime, the pathways will become apparent.
4. Define the new experience
What : Graph the new experience.
Why : Work from the experience backwards. We all need to know the future. Work with this basic need to build team momentum.
How : Eliminate dysfunctional verbs and draw what feels like an energising graph. Add pull quotes, and pictures at the different moment to make it more visual. This is your new experience signature. Or your signature experience. Eventually there will be a library of experience signatures each with its own unique effect, but not just yet.
Example :
I know which verbs are responsible for the energy loss : Clear, Prioritise
I simply eliminate verbs that don’t add value to my experience. At this point I don’t care how. This is the experience I want. Then I draw the experience I would like.The new experience would be positive and have only the verbs that matter to me : Open, Scan, Respond and Exit.Even at this level, I can feel a slight excitement if this was possible. It would be a like a shot of espresso.
Field update 1, May 21 : For a L sized experience, for example a mentor-mentee journey lasting over a year, this step itself is a useful outcome and sufficient for starting the re-design. The experience gives natural buckets in which to work. The future experience surfaces where the experience is currently dysfunctional. Using the reference to theatre and props, we discussed the current props mediating the phases. Some props felt “heavy” and were targeted for re-design. We choose the first phase as the start of the re-design exercise and worked out the rough prototype of the redesigned prop. Now under iteration.
5. Express the current system as system of verbs
What : Connect all the verbs of the pathway into a system.
Why : You are in fact dealing with the system. That is why some parts of the experience predictably drain you. This makes this mental model explicit and discussable so you can change it.
How : Use causal loop diagrams. This can start as a group activity, but the final system comes from one mind. It is the very first act of designing.
Example :
From the energy graph, its clear that there is a reinforcing system at work. I can also feel it in the speed at with I lose energy when using the system.
I know its a reinforcing system so I close the loop with the end point feeding back into the start point. I add the trigger verb Notice which pulls me into the system and the Exit verb for closing the app.
At this point I’ve pulled back fully from the screen to the verbs. The reduced visual inputs makes it easier for my to think systemically.
6. Define Solution Principles
What : Find organising principle which help define the solution direction
Why : Solution principles work harmoniously with the system. Also one solution principle can generate multiple solutions for different parts of the system — a very useful trait.
How : This can be found from different sources — research, books, cases. The goal is to find if someone has solved your problem in any other way and borrow and apply principles of that solution to your problem. Find analogous situations.
Example :
It’s clear that I need to do something about the Clear Noise and Prioritise Mentally verbs. Both are extremely high in cognitive load and responsible for the energy drop. These make the system spin slower.
I know where I need to intervene, but I need to find a way to alter the system design so that the system handles this as much as possible . But I need to intervene sensitively — verb by verb.
Where can I learn about clearing noise and prioritising ? I reach for Paul Allen’s Getting Things Done. It’s analog, but I can borrow ideas from there. This makes sure I’m not doing a daft slash & burn tactic. GTD has an underlying philosophy so I’m assured of internal coherence.
My first intervention — A simple way to reduce noise, would be to chunk mail into groups — the equivalent of folders in the GTD system. GTD also give me the next intervention — the mind is not good at holding items. Put it on a list. Better than Prioritising Mentally would be to Prioritise Explicitly. A corollary to this is the insight that I actively should not read mails when prioritising. This suggests the third intervention : provide a preview of the mail so that I can prioritise by scanning it.
I get my early list of features from the GTD Organising Principle. GTD also gives me my system goal I will use later : Inbox Zero.
Field update 1, May 21 : Sometimes organising principles can come about thru a process of churn and reflection. For the workshop I conducted, the question became — what are we trying to achieve thru a mentor-mentee connection ? Over lunch and some reflection, it became clear : We’re trying to move the connection from transaction to a relationship. Relationship became the organising principle. Every aspect of the system is affected by it and must answer — will this help build a relationship ?
7. Express the future system of verbs
What: Design a simpler system, with more flow.
Why : That’s where we’re here to do as designers, ain’t it ?
How : Systems thinking.
Example :
Now I need design the system that will give me the behaviour I want. This is the Solution System and its is always simple. It needs to be because business systems — which is what a solution system is — are designed for speed, not complexity. High speeds, very few moving parts.
I start with the core verbs : Scan, Respond.
Already this looks better. It’s simpler and feels more powerful. I can imagine an experience with these two verbs at its core would be addictive.
I also note that this is a reinforcing system. These are inherently unstable systems and exhibit boom and bust type behaviour. That might be the behaviour I want for an amusement park, but for this experience I want a more gentle behaviour. I want the participant to slide into the experience. I will need to make this a goal seeking system. My Organising Principle gives me the goal : Inbox Zero.
Reinforcing Loops : First Order
Next I add on the two new solution verbs : Group and Prioritise
These verbs are reinforcements to the core verbs. If the Scan-Respond system spins fast, these two systems make the core spin even faster. grouping mails helps me scan mails faster. Prioritising mails helps me respond individually faster. I noodle with the nouns until it feels right. Mails feel right for both reinforcements.
These are first order reinforcements — meaning they are visible when I’m experiencing the core system. Grouping is present wherever Scanning is possible. Prioritising is available wherever a Response is possible.
8. Define System Settings
What : Define the different settings which determine the systems behaviour
Why : It’s the equivalent of the gears speeds. You need this to know which possible pathways you can take through the system
How : Systems thinking.
What gives the systems its behaviour are the system settings. Think of each verb having a dial attached with its own settings. The lighter settings create a lighter experience, the deeper settings create a deeper experience. Taking a journey through the interaction system at a particular setting creates a specific experience. Shallow settings require shallow engagement on the part of the participant and creates less cognitive load. Deeper settings require deeper engagement on the part of the participant and creates more cognitive load, but possibly greater satisfaction. Think of them as the possible modes of the system.
Example:
Let’s go over the system settings one at a time from the reinforcements to the core interaction system. You can skip over to the end of this section to Step 6 to see the full system.
Think of the “how” for each verb to determine its settings. e.g. How do I notice a mail ? Via the mail count and notification
Fair warning : it can look overwhelming. Get a coffee and step through it.
Trigger — Notice Settings
Notice has two settings :
- Notice the Mail Count
- Notice the Notification
Group Mails Settings
Group Mails has two settings :
- Group Mails Automatically — by default the mail are grouped according to a useful logic
- Group Mails Manually — I can also take the time to group it according to my specific logic
Prioritise Mail Settings
Prioritise Mails has two settings :
- Prioritise Mails for Now — to act on now
- Prioritise Mails for Later — to act on later
Respond Individually Settings
Respond Individually has two settings :
- Respond Individually by Marking Done
- Respond Individually by Replying
Scan Mails Settings
Scan Mails has two settings :
- Scan Headline
- Scan Body
System Goal
A goal seeking system needs a goal to achieve. Else it becomes a reinforcing system. The goal emerges naturally for the organising principle borrowed from the GTD Philosophy : Inbox Zero.
( image here )
This tells me, in the long run this is how fast the system will spin. After a few weeks of using inbox, I find myself automatically aiming to keep my inbox to zero and getting there several times a week — an indication of a balancing system at work.
This is the entire system one one page. It’s not that this is complex — its information dense. It’s an accurate representation of the real system so you can finally see that the real system is complex. We just entertained the pleasant illusion of simplicity by drawing simple linear diagrams. However if you get past the initial headache of looking at an information rich diagram, I think you will find that its pay rich dividends. The whole system is discussable.
Remember , I could have designed it differently and will always be a work in progress. My test is whether it models reality well enough to allow problem solving.
9. Determine the path likely to be used most heavily
What : Determine the new thruline
Why : This pathway needs the most attention. It’s the highway.
How : Since the settings are ordered by intensity, its a simple job. We tend to opt for lighter experiences most of the time, since it preserves precious psychic energy. Occasionally, or when the need is pressing, we engage in heavier experiences since its necessary to keep things moving smoothly. Finally, there are phases where we “binge” and work in a heavy mode for extended period of time. In these most we are the very productive but also very tired, so are grateful for well designed experience that lighten our load.
Example :
( image here )
Thruline : Notice the Mail Count — Mails Auto Grouped — Scan The Headlines — Mark Done — Prioritise Mails for Now — Scan Headlines / Scan Body — Mark Done / Reply — Exit
This is the thruline.
10. Develop a system of metaphors to encode forms
What : Move from concepts to forms using metaphors.
Why : Metaphors provides mental models and mental hooks to help use understand a system. Mental models tell us how something might work e.g. a desktop. Mental hooks tell us what something is or is like e.g. Calendar Good metaphors make it possible for the participant to predict the behaviour of the system making it easy to learn and use.
How : There are two kind of metaphors :
- Organising metaphor : which provides the mental model to understand how the whole system functions. The organising metaphor is a container, but we don’t manipulate it directly. e.g. desktop, dock
- Operating metaphor : which provides the mental hooks to understand how to use a part of the system. We manipulate operating metaphors. e.g. calendar, document, sheet, applications on a dock.
Example: I make notes next to each verb, indicating the metaphor, tracing my experience from the core interaction system outwards. The first verb I encounter on entering the experience, along with the name of the app clue me into the organising metaphor.
Organising Metaphor : Scan Mails
The first verb I encounter as I enter the experience is Scan Mails. ( Notice is a trigger verb and not unique to this app ). I encode it as Mailbox with a sheaf of papers. It encodes clearly, what I’m seeing and how I should expect it to behave — like my inbox. And it gives me a host of operating metaphors I can attach to it — papers, clips, staplers etc.
The Scan Mails settings make it clear that I must be first be able to scan headlines of each mails without having to open each.
Operating Metaphor : Respond Individually
Next I encode Respond Individually. I can encode this as either Target, or Search. Search fits the context better. Target feels right for a campaign management tool and a larger demographic. Search is also a key function of Google, nailing this operating metaphor.
The Respond Individually settings working in tandem with the Scan Mails settings make it clear that once I do find the mail and scan its headlines, I must be able to mark it Done. And as I scan the body, I must be able to mark it Done or send a Reply.
—
Visual Hierarchy : Core Experience
This gives me the core visual elements and the first order hierarchy for the placement of the elements. There needs to be an inbox and the Search function needs to be present prominently. I need to be able to scan each mail without having to open each. A Preview option, which shows me the contents of the attachments is an improvement from today’s experience.
As I scan each mail, I must be able to Mark it Done. This then leads me back to the next mail in my inbox and the core interaction repeats. If I open a mail and scan the contents of the body, I must have a Done and Reply function available.
This is my core experience. I build this first.
—
Operational Metaphor : Group Mails
Next I encode the first reinforcing loop —Group Mails. This is simply an extension of the Inbox metaphor. I could encode this in a number of ways — as a thick line to represent mails categorised into different groups, a clip or binder, an envelope, folders. I choose the simplest : Visual encoding to separate one group of mails from another.
The Group Mail settings working in tandem with the Scan Mail settings tells me that as I scan the headlines, I should see my mails categorised automatically. As I scan the body of my mail, I need the ability to group my mail in custom categories manually.
The Group Mail and Scan Mail working in tandem with the Respond Mails ( (change everywhere) tells me that I need to be able to respond to mail as groups as I scan them.
Operational Metaphor : Prioritise Mails
Next I encode the second reinforcing loop — Prioritise Mails. I could encode this in a number of ways — a list, a post-it, a paperclip, a pushpin. My settings tell me that I will do it in one of two ways : Now or Later.
In essence I’m creating a single Now list and deferring other mails for later. A pushpin feels like a good, active metaphor for this job.
Operating in tandem with the Respond Individually settings, this tells me that when I’m processing one mail, I want to be able to mark a mail as Done. If I don’t I want to mark my mail for processing Now or Later. I want to then scan the Now list, read the Body of each mail and either mark it Done or send a Reply. At a future date, the Later list returns to the inbox and I restart the process.
Interestingly, the system suggests I could also scan the Later list, read the Body of each mail, send a Reply and send it Later. Would be really useful for birthday and anniversary mails. I could take the time to scan a verse from a poem rather than a happy birthday or some such. It would mean seeing my Later list organised around key dates. For now though, it only suppresses the mail from the inbox.
This is a more complex interaction and clearly at the heart of the interaction system.
—
Visual Hierarchy : Reinforced Experience
This gives me the reinforcing visual elements and the second order hierarchy for the placement of the elements. My inbox needs to show me my mails pre-grouped. Within one mail I must be able to custom group my mail.
Apart from the previous functions, as I scan the body of a mail, I must be able to prioritise it for Now or Later. Prioritising for Now or Later must accrue to a list which I can see as I exit a mail. For now I see the Now list.
This is my reinforced experience. I build this next.
Operational Metaphor : Group Settings
Now I need to work out the interaction system supporting the reinforcements. Both reinforcements would have its own interaction systems. I’m taking only one for illustration.
Settings is easy — graphic equalizers come to mind almost immediately.
The Group Mails reinforcement is supported by the Grouping Logic. The Grouping Logic is supported by Groups. These the the final stock elements which make the interaction flow possible and need to be well designed. Stock elements are nouns unlike the flow elements I’ve explained so farm which are verbs. This makes visual encoding easier.
Both Grouping Logic and Groups have two settings:
- Add — to add to a new Grouping Logic or Group
- Modify — to change or delete and existing Grouping Logic or Group.
A grouping logic is easily encoded in a form and a group is easily encoded in a folder structure. All that remains it the visual hierarchy.
Visual Hierarchy : Settings
A shift from one subsystem to the next is also a shift in context. In the Inbox, the Grouping Logic is visible but not changeable.
As I step into a Group of mails change context, and can now access the Grouping Logic. Here I can add to the existing logic or modify — including delete — the existing logic. One form should suffice for this.
After this I can see the existing Groups supporting the logic and either add a Group or modify a Group. A second form should suffice for this.
Finally, stock creates a sense of order, so I surface the groups at the entry level itself, to give the participant a sense of how the space is organised.
By the time I’m done with this, all the loops in the systems are closed. I know know I will navigate from the core experience to the settings.
This is my Settings experience. I build this on last.
11. Develop an interaction story.
What : Design an interaction narrative of the thruline
Why : Developers need a straight line to follow, if they are to build for you. If you give them all possible paths, you’ll drive them crazy. Your customers also need to know what is the typical journey thru the system like. It’s like an architect’s walk through of a future design.
How : Use the thruline and flesh it out in cinematic beats. Each beat is an action reaction cycle. Keep the visual hierarchy in mind.
To write well, you need to put out a few solution principles. These are simple mental heuristics which indicate how the participant might use the new experience. These come from first hand experience of the old pathway and what might make for a energising experience. The inital immersion in the current experience pays back many-fold. Don’t skip it.
Finally put it all together into a storyboard.There are strictly two kinds of stories— value stories and interaction stories. You use value stories to connect larger dots, and interaction stories to connect small dots. We will discuss only interaction stories here
Example:
In this example I will be stepping through an interaction narrative, but the general process is the same for both kinds of narratives.
But which path should I visualise ? I’m looking to create a new throughline. Kind of the new defaults for the system. For this I need a general compass reading to where I’m headed. I do that using design principles. Here are three I created based on my personal experience of using gmail.
I embody these principles as I write out the new through line.
This then gives me the interaction states I will show in my storyboard. I don’t include a storyboard here, but I’m happy to share examples offline.
I could also focus on creating a narrative highlighting one design principle — say Chunk Up Actions.
And only mock up this sequence for discussion. This changes the unit of review and testing from screens to sequences and the throughline represents the most valuable sequence. There are others — for example the Write sequence.
As with any system, there are unexpected pathways which participants journey through with different intensities. These can and should be tested.
From here I jump to my favourite storyboard or mockup tool and put it all together. I can’t wait to see what it’ll look like and what the flow will feel like.
From there I make the final tweaks to the flow and visual hierarchy. That is my designerly eye tell me to ignore logic. I heed it.
12. Prototype the Forms
What: Integrate with other form-making disciplines
Why : The flow-based approach is integrative in nature. It orchestrates but does not make them obsolete
How : Service design has excellent tools — the service blueprint in particular that lets you convert the storyboard into a operational diagram that lets different disciplines know what they need to do and when. The metaphor development exercise gives you the forms you are looking to create. In case of a digital experience, the forms are just icons, so an iconographer / visual desginers will do. For physical experiences you will have to include suitable members in your team.
Use the storyboard as the central instrument to keep everyone on the same page. Create a service blueprint to give everyone a clear schedule of when their form enters the experience. Each form-maker will own one channel.
For a single channel experience, the storyboard will suffice. Create an interaction storyboard and have the visual designer work out the tweens for the visual hierarchy you’ve established.
Reality Check
So lets do a reality check for the process is — did it do both the jobs ?
Job 1 : Evoke feelings at the right moments and
Job 2 : Make the experience memorable, so that the paricipant returns to it, often ?
Job 1 : Check.
Step 4 : Define the new experience handles Job 1. It creates the experience signature. Reality is to be tested against this.
Job 2 : Check
Step 7: Define the future systems of verbs handles Job 2. The thru line ensures that the most valuable path thru the system is designed well and a pleasant experience. The Notice trigger acts as a re-inforcement once you leave the experience nudging you to return to it often.
You can devise other means to remind you that the mail app is helping. Android does it by giving you timely prompts for movie tickets you’ve purchased or making calendar entries for events you’ve commited to go to.
Summary
Here once more, is the process for an flow-first approach to interaction design. Is is participatory by default. Just imagine all the sketches as life-sized artefacts, taped to a room wall.
Experience Design
- Size the experience
- Find the trigger moment that will lead off into the experience. ( the moment of mediation )
- Define the current experience
- Analyse the experience for energy “leaks”
- Define the new experience
System Design
- Express the current system as an system of verbs
- Define Solution Principles
- Express the future system of verbs
- Determine the system settings
- Determine the path likely to be used most heavily
Form Design
- Develop a system of metaphors to encode forms
- Develop an interaction narrative
- Prototype the forms
Thanks for reading !
