Crafting a website takes a long time. How can designers, dealing with business objectives on the one hand, and design ideas and concerns on the other, make sure they don’t forget or miss important bits along the way?

From sense to senses

The “veuve Cliquot” methodology is a top-down, simple design process that makes sure every single idea, objective and every single bit of sense that should be conveyed to end users properly informs the final user experience. It was crafted for – and with – students, and has been successfully used for real work projects. If you’re a web creative, I believe it can be of help to you too.

maxresdefault

«Who» before «what»

We are makers. We like to do things. When a project starts, we’re eager to quickly jump into execution.

Resist the urge. Make sure you first identify what, exactly, has to be communicated, and to whom.

Capture the target audience into personas. Think about who they are, what is their background, what are their needs that you’ll need to address? Baptize each persona with a relevant and easy-to-remember name. For instance, the “google lady” could designate mid-fourties women who land on the website via a Google search for «cotton napron».

“What” before how”

content inventory and taxonomy

In a spreadsheet program, maintain a list of all bits of contents that you have at your disposal. Suggested columns: filename, description, colors, keywords, must-see ratio (on a scale of 1 to 4). Figure out what matters to you and your target audience and add as many column as you deem relevant.

Content inventory (example)
Content inventory (example)

The juice

Write down all bits of information that needs to be conveyed to each persona, things that she must have to have understood by the end of the experience that will be crafted for her.

Yes, it’s a bit like writing a love letter. At this stage, it’s all words, because you want to fix what you need to tell her. Once it is done, you can start to think on how you could say it differently than in words. Images, videos, colors, rich interaction, that’s all referring to the …

how

How will you say what you need to say? Sequence the user experience, in time and in space.

In time

For each persona, draw a graph with time as the X axis, and user satisfaction on the Y axis. Plot the user’s satisfaction during the whole experience they will live thanks to you. Place at least five or six of these… let’s call them “moments“. Vocalize them, as if you were inside of her head. The last moment should be when they perform the act of conversion you’ve designed for her.

Planning the target audience's satisfaction.
Planning the target audience’s satisfaction.

In space

For each persona, prepare a long sheet of paper about 2m long (several sheets of A3 papers taped together). Draw a big rectangle for each moment that you considered in the «uxp in time» step. Inside each rectangle, draw a column in which you write down part of the juice that must be conveyed at this moment of the experience.
The remaining space can be used to store notes (post-it) informing the wireframing step of that “moment”.
We call this long stripe of paper a “sense flux”, as it gives you a global overview of the way sense will flow through the sequences of screen you will set up. You could define it simply as the “storyboard of a user experience”.

Draft of a sens.flux. Next step is to make this into a really big document (think human size) so you'll have rooms for post-its.
Draft of a sens.flux. Next step is to make this into a really big document (think human size) so you’ll have rooms for post-its.
Detail on a part of a sens.flux. Each box is a "moment" in the user experience.
Detail on a part of a sens.flux. Each box is a “moment” in the user experience.

 

iterate

These documents are all you need really, to control the uxp design process. From thereon, you can focus on iterating on each ux moment via wireframing, testing out ideas, down to mockup, prototyping and finally producing the user experience.
Report back to the sense flux to keep track of what is done and what is missing. Remember: this is your battle map, informing you on the current state of your work.

Here is one sens.flux for a target called "Mr Sli". The Sens.flux is your memo of all your ideas on HOW (left side) to express WHAT you need to tell him (right side), step by step.
Here is one sens.flux for a target called “Mr Sli”. The Sens.flux is your memo of all your ideas on HOW (left side) to express WHAT you need to tell him (right side), step by step.

“veuve Cliquot” ?

This user experience design process was baptized the “veuve Cliquot” methodology as a reference to the pyramid of glasses seen at fancy weddings, where the waiter pours champagne on the topmost glasses until the last level of glasses has been filled. The juice flows from top to bottom, and is just as good at the end of the process as it were when it first came out of the bottle.

That’s about all there is to making the best out of your brain and your own creativity. Keep on iterating while keeping track of your progresses on the sens.flux.

Now, go make good champagne!