A logic model, or theory of change, is one of the most common forms of visualization you’ll find in any evaluation report.
They can be critical in helping a program or project think through the underlying logic of how it’s supposed to work. But when it comes time to share or disseminate the diagram, that’s where we run into some problems.
The Problem
Two things often happen.
- The diagram is shared in it’s entirety, often offering little context behind its development.
- Or the diagram is altered to be “simpler” in a form where all the important context is stripped away.
The Concept
Interactive visualization offers an opportunity to get the best of both worlds.
My concept involves turning a model into a simple narrative. A graphical and icon illustrated story of the program. Something that could be easily read and understood by a lay audience.
Then to offer more context when wanted, each piece of the model is made clickable. The entire page is also setup in the style of an interactive infographic. This offers a chance to either click or scroll to find more context.
The final layer is a space at the end where the most engaged readers can sign up to receive more information in the future.
The Prototype
Here is a link where you can access the interactive visual prototype. Take a look around. Click on some of the arrows and boxes. See what you think.
Thoughts?
What do you think? Leave me a reply and let me know.
Have a project with a logic model you’d like to turn into something like this? Let’s talk.
That is the coolest thing I’ve seen a LONG time!
There will still be those who are stuck catatonic by the words “logic model”. That said, this could go a long way in drawing them in to the logic model long enough to understand that is a roadmap, not a spiderweb.
Thanks Michelle, glad you like it 🙂
Hi Chris,
You have created something here that would work for any logic model. It is simple enough not to scare away people with diagram phobia but with the layers needed for a professional M&E person to document the project. The layers, of course, are the highlight here. That is new. One can add as many layers as needed. Brilliant!!!
So what are you going to do with this? Publish it maybe? What’s next for you?
Best of luck.
Rabab
Thanks Rabab 🙂
I have a lot more to share, and will be doing so on this blog. I’m also hoping to find some projects that would like to go through the process of building an interactive infographic like this one.
Will let you know when something comes up. This is innovation at work. Power to you.
Rabab
Chris, this is awesome! I love how it visually draws you into the main ideas and that the meaty context doesn’t smack you in the face upfront, but instead is available via click. Such a great, simple antidote to the messiness of traditional logic models, which tend to give me a headache… Do you think icons are the best move, or could you see a version with images being useful as well?
Thanks Cathy 🙂
You could use icons, photos, sketches, colors, hieroglyphics… I think it just needs something to visually connect the model to the expanded detail below.
I love this idea for engaging a variety of stakeholders in interacting with evaluation findings. I often get requests for infographics in addition to evaluation reports so that evaluation findings are useful to a variety of audiences…not just those who sit down to read 100 pages (or the executive summary more likely). I wonder if an individual interacting with this content would reflect more (or differently) on the findings of an evaluation.
I think the way in which we present our work definitely changes the way our stakeholders see and think about that work.
Hi Chris! I’m definitely a fan of this interactive logic model. I think it will revamp the traditional process and relationship maps that we typically find developed in Visio (often also accompanied by several attachments that aim to further define sub-processes and features, such as roles/responsibilities, inputs, outputs, external dependencies, etc.). It gives the user the power to drill down if she or he so chooses, which is wonderful. How user-friendly did you find the InVision application?
Thanks Azadeh 🙂
InVision plays a key role in my design process, as it lets me rapid prototype interactives. It’s definitely user friendly. There are a bunch of tools out there that would function similarly (marvel, uxpin…).
Basically you still have to sketch out the base images somewhere (photoshop, sketch, illustrator, pen and paper, etc.) but then you can turn those into an interactive prototype that is comment-ready. Since it’s a UI/UX tool, and not a graphic design tool, it also works great for user experience testing.
After taking it through a process of iterations using InVision it would then go somewhere else for development. None of it is hard per say, and the tools are more intuitive all the time, but it tends to be out of the design comfort zone of most evaluators I work with.
What did you end up using to sketch out the your icons? And do you think it would be feasible to leverage something like PowerPoint as well? I have a research and evaluation background but have also had an interest in the design and visual communication element of my work. You’re right that most of these tools/apps are fairly intuitive, but even building an awareness of the spectrum of tools and application out there is a challenge for most. (So thanks for sharing! ) Then the next challenge is getting your end-user/client on board and– particularly in the context of government consulting where information/data security and confidentiality can be of utmost importance. The content used in the free versions of many of these web apps becomes public after all.
The icons for the prototype are from nounproject, I pay for premium. I also create my own using sketch, illustrator, or hand draw them using my ipad. Depends on the look I’m trying to get and what I can find quickly versus how long it would take to construct.
You don’t need to use invision or any other web tool. Although there are plenty of easy web tools that offer private uploading/storing/sharing for a fairly low fee. If it needs to stay off cloud-based servers> then interactive pdf, self-developed html, or power point could all be used (in addition to lots of other tools). You just need to use some basic within document hyperlinks.
Best way to get someone on board, especially conservative clients, is to show them a very direct example. I usually end up spending less time by actually creating and sharing instead of trying to explain/sell the idea. I have started to rely heavily on rapid prototyping.
Fantastic! I think this can help facilitate a much more dynamic strategy development process. After development, an interactive model can also support continued use of a logic model by program implementers. Thanks!
Thanks Rhonda 🙂
This may actually answer my question about what I could use Adobe Slate for. Ha! Thanks, Chris. I have been experimenting with interactive logic models for a while and haven’t quite mastered it yet. It’s great to see another person’s interpretation and execution. Much appreciated.
Thanks Kate. That is definitely one thing you could use Slate for, I’ll give you a few others soon 🙂
Great job Chris! I recently discovered InVision and really like it a lot too. I normally use Illustrator to design my interfaces, but lately, I’ve been using Sketch to do the layout. It’s syncing abilities with InVision is a real time savor.
You could kick up that interactive logic model prototype with some overlays (showing off hover states, a nav bar, sub menus, subtle color changes, etc.). Here is an article about it: http://blog.invisionapp.com/get-higher-fidelity-prototypes-with-less-work-using-overlays/
Looking forward to your next article!
Thanks Chris 🙂
Over the last couple of years I’ve gotten really into adobe creative suite. But after all I’ve heard about the simplicity of Sketch (and my new focus on rapid prototyping) I definitely plan to give it a shot. Especially since I draw/create using so many different tools (ipad apps/mac software/paper).
My web development background is mostly self-hosted WordPress, so I was just trying to create a prototype I knew I could easily develop either there or in pdf (I would rather not but so many researchers are super focused on pdf).
What’s your experience with the development side of the interactive html 5 elements? Where do your designs go to be developed, are you still involved in the development?
There seem to be so many great UI/UX resources out there.
That’s what so cool about using InVision. You can still use all your favorite programs to design the screenshots / drawings, import them into InVision, connect everything with their easy to use tools, then share your prototype with your website, other people, phone app, etc. Super cool. I haven’t spent any time using the new HTML 5 interactive elements. I was hired at LoanLogics to strictly do the design work, and after our .Net developers build out the new pages, I then go back into the code and tweak the CSS to make sure it looks like the original layout. Sometimes that gets tough because I can’t use HTML 5 and CSS 3 because we still have banking customers using older versions of IE. No fun.
As you know, InVision allows us to create interactive mockups that allow developers experience our designs, not just look at them and guess. One neat feature that Sketch offers that Illustrator doesn’t is the ability to export out the CSS in the mockup. That also helps the developers get your design built closer to what you expected, right out of the gate.
I bet you could turn this logic model into an iPhone app. It’s really easy with Sketch. Just pick the iPhone template artboard, design each page that the logic model would connect to, use InVision to build the prototype, share it to your phone number, follow the instructions they’ll send your phone, launch it and see your work perform like a real app! Hmmmm… business idea?!
Yeah, with everyone enjoying it so much, the thought had crossed my mind 🙂
By the way, I was wrong about Illustrator. It does have the ability to export CSS. It’s a complex process but good. Sketch is still more user-friendly and it’s syncing abilities with InVision make it worth the $99.
Yeah, I downloaded it today and played with it a bit. Definitely adds an ease factor that’s just not there in Illustrator. Really easy to resize/transform images and you get to have side by side art boards. It’s living up to its billing, I’ll definitely spend the cash.
A log frame app? The future is here, people!
This is great Chris. Many of my clients would love the opportunity to really expand on their thinking in the logic model for funders but feel limited by the little boxes.
Thanks Kylie. The nice thing about this approach is that it fits right into a UX design process focused on user testing/iterative feedback. You could take the same approach during the logic model building stage.
Paper sketches of different elements discussed with clients could be turned into a rapid interactive prototype. Then it could be constructed and refined through iteration over time.
It does involve either learning how to do this stuff on your own or building a different kind of relationship with your designer. Doing this kind of ongoing iterative data-based stakeholder-focused design work has become my new dream 🙂
Well, it’s about time!
You hit the nail on the head, Chris. Every time I design logic models for clients, I yearn for a more intuitive, dynamic way for them to navigate it. I want them to be able to see it the way I see it in my head, and that’s not a far cry from your prototype. Thank you for answering the call.
I echo the prediction that you are starting a mini-revolution. Now that I know an option like yours exists, I don’t imagine I’ll be able to tolerate static logic models much longer!
Thanks Heather 😉
This is very interesting!
Most of our Log frames are so complicated, unless you work really intensive with that particular programme, it will be very hard to understand. I am definitely going to share this with my team.
Thanks Apurba 🙂