User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I am working on a pretty big project. There are many use case scenarios possible for the different user types.

I produced deliverables for the client which are essentially

  • persona
  • competition benchmark/analysis
  • Information Architecture (a mindmap)
  • wireframes

I'll have many different wireframes that will cover most of the pages. But for some pages there are different scenarios. For ex. the dashboard will not be displayed the same if the user has connected a social account, if he is prenium or a basic user, if he is a user-type A or B, etc.

So there are different variables that will make the layout change a bit.

I prefer to communicate those ideas with images, or at least include it in the wireframe (i.e including this info on the wireframes) because it's just more easy to understand for all parties (client, and developers)

I am not sure how to do that and if it is a good idea.

How would you represent all those cases (diagram, mindmap? annotations)? Designing wireframes for all cases would be too much.

I can not afford to take too much time for that, so please tell me what is the most efficient solution.

share|improve this question
how detailed are your wireframes? – Erics Apr 4 '12 at 3:09
there are as much precise as possible. Real content, real components, etc. – Marc D Apr 4 '12 at 3:45
How about using a wireframing tool like Balsamiq? Even producing many conditional screens should be pretty fast with such a tool. You could then present the wireframes along with 1-2 very detailed screens, prbably even visual design mockups. – greenforest Apr 4 '12 at 5:59
@user12999 : not with balsamiq cause it will produce another deliverable with another set of mockups and another style. I prefer to gather everything in one place. but yes why not doing all the cases but in low-fi is a possible solution. BTW I am using illustrator for wireframes – Marc D Apr 4 '12 at 6:31
@MarcD Right, even more deliverables and tools won't help, I agree. Maybe then Illustrator low-fi for all and hi-fi for selected screens can help. Also depends a lot on the client, i.e. if the can deal with low-fi. – greenforest Apr 4 '12 at 6:59

I find it to hard to give a clear recommendation as we do not know as much as you do. But I could imagine the following options might help. Finally you have to decide which suits you best.

  1. First describe the general page once - put in a placeholder for each module or elements which has different states according to the user type. After you described the page in general show these modules: put wires of the differents states of a module - modules only / without the page around - next to each other an specify the single states.

    This makes sense, if only single elements or modules of a single page alter.

  2. Write user journeys to describe a sequence of screens for different users This makes sense if not only one page or sinlge modules on one page change but a sequence of two or more pages.

Give the journey a clear title, indicating the user's status/type and the action he takes - e.g. "A premium user signs in to view his dashboard and does such and such to ..." Use your wires to illustrate the journey - specify all modules and elements of the single screens.

This helps clients and developers to understand the path a certain user follows, the actions he takes, the reactions and the behaviour of single modules. It#s easy to follow the one journey and not to mix up different behaviours.

share|improve this answer
up vote 1 down vote accepted

Thanks for your answer.

User journey/scenario/flow won't fit for that, it is too granular.

Module variations are interesting.

I finally decided to write use cases on the Info Archi. mindmap. For each page I have on the IA, I created a node called use-case where I specify all the combination possible.

That way I think I wont need to create wireframes for each case, but just create all the possible modules and then the developers will know which one to use at what time.

Hope it will work! what do you think?

a use-case node from the IA mindmap

share|improve this answer

Have you tried Flairbuilder?

I imported all my wireframes from balsamiq into flairbuilder where you can create variables and conditional options

very powerful

share|improve this answer
Could you explain how the conditional options work with some examples? From your answer's text alone it's hard to tell how this solves the problem – Ben Brocka Jul 5 '12 at 15:43

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.