9

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.

Improve this question
6
  • how detailed are your wireframes?
    – Erics
    Apr 4, 2012 at 3:09
  • there are as much precise as possible. Real content, real components, etc.
    – Marc D
    Apr 4, 2012 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, 2012 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 wireframes...it is a possible solution. BTW I am using illustrator for wireframes
    – Marc D
    Apr 4, 2012 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, 2012 at 6:59

4 Answers 4

Reset to default
3

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.

Improve this answer
1

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

Improve this answer
0

The short answer to your question would be high level diagrams with annotations that reference more detailed wireframes or mockups.

Often wireframes are presented for a specific set of user flows/journeys, for example, the most frequent or important path. So generally there is a point of reference for alternatives based on different conditions. These are the different conditions that I can think of which you can annotate on the main wireframe flow and provide appendix or additional documentation to show the variations:

  • Alternate starting point(s): these could in fact impact the user flow/journey significantly, and would probably need an entirely separate diagram but with proper references.
  • Alternate end point(s): these are the result of variations at different stages of the user flow/journey, but is usually provided so a snapshot of available outcomes can be easily determined.
  • Alternate/conditional paths: these can be options or selections that may or may not affect the eventual outcome depending on the actual business logic and user selection.

The best way is to establish a system (either numerical, alphabetical or alphanumeric) that you use to annotate a reference flow/journey that also allows you to provide designations for each path and also branches from the main flow. But is best to map out all the variations before coming up with a system so you don't have to change it mid-way and you can also be confident that it works for most of the user flows/journeys that you have to describe.

Improve this answer
-1

Have you tried Flairbuilder?

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

very powerful

http://flairbuilder.com/getting-started/prototyping-interactions/

Improve this answer
1
  • 2
    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, 2012 at 15:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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