Sneak Peek: Indigo Studio by Infragistics!

Ambrose Little / Wednesday, August 22, 2012

Indigo Studio Sneak Peek

Have you ever found yourself in the situation where you had an app idea, but you didn’t have the time, or maybe even the skills, to prototype it? Have you tried using some of the existing app prototyping tools on the market today only to find that they were either too basic in their interactions support, too technical, or just too fiddly and complicated? Have you tried to give a set of static wireframes or mockups to be developed—annotated with descriptions about transitions and animations, only to find that the design you had in your head was very different from what was implemented? 

If you answered yes to any of these, or questions like them, then Indigo Studio is a tool for you!

Will the Real Interaction Design Tool Please Stand Up?

There are plenty of tools out there that people use today for interaction design—everything from paper and pen to hand coding prototypes on the target platform, and everything in between. Indigo Studio is the first tool that took doing interaction design as its core design problem and tries to support not only UI design in itself but situating UI design in the context of human living.

Indigo Studio Storyboard

As good interaction design starts from real, human stories, so Indigo starts you off with the ability to capture your stories, in storyboard format. You can start out by simply narrating your story/scenario, blocking it out on the storyboard.  Indigo Studio has hundreds of real-world “scenes” (sketches of people in real-world contexts) that you can just drop into your storyboard boxes to provide that context.

Once you get the basic story narrative down and spice it up with some real-world pictorial context, you can just double-click on any particular step and jump right into designing a UI concept for that part of the story. And as you may see in the screenshot above, the scenes that include a visible device screen let you literally show the screens you are designing in place, as if they were on that device in the scene.  Indigo creates a link between the state of the screen you design and that box in the storyboard, so it always stays up to date, and you can even run your prototype from any one of your steps.. but we’re getting ahead of ourselves.

While you don’t have to use the storyboarding part of Indigo, using a “storyboard first” approach helps keep the focus of design where it should be—on the people and their stories, but that’s just the beginning…

Serious Interactive Prototyping and Animations

What would an interaction design tool be if it didn’t support designing actual interactions?  Well, surprisingly, most tools that interaction designers use don’t really support this! Most let you at best create click through static mockups, but that’s hardly what is expected of rich, high-quality apps with great UX these days, right?  We thought so, too, so we made interactions absolutely core to Indigo Studio—not just a simple click through (though you can do that!), not just tacking some kind of “dynamic” content onto a mostly static design. No, interactions are the bread and butter of Indigo.

Add Interaction

Every element you put on a screen invites you (right there with no extra steps needed) to make it interactive, to respond to a user action with some kind of change in the prototype. You can respond to user actions in a number of ways, such as navigating to new screens, opening URLs, or you can just change the state of the current screen, for instance, by adding an overlay.

Making and Animating Changes

As you make changes to screens, those changes are recorded on the timeline for you. By default, of course, the changes are immediate, but all you have to do is drag or resize them to animate, and voila! you have not only an interactive prototype, but an interaction designed with a meaningful animation (assuming that was your intent, of course!).  All this without ever thinking once about writing a line of code, so you can stay focused on the interactions between the people you’re designing for and the awesome app you have in your head.

It takes just seconds to try out an interaction design concept in Indigo Studio. Of course you can still design static wireframes and just make them click through, but if you’re designing an interactive app, why would you choose to do that when you are empowered to easily and rapidly explore interactions? By getting not just the static screens but also the transitions out of your head and into some designed form, you can quickly try out multiple design ideas, validate if they will work like you think they do, and even give you something to go try with your target users, review with clients, and share with devs.


Indigo Studio is currently in a limited private preview, but we are actively seeking out people who are interested in participating.  If it looks like something you’d find helpful, just send an email to indigo at infragistics dot com.  Tell us your name, a little bit about what you do, and how you think Indigo can help you, and we’ll see what we can do to get you onto the private preview.  At a minimum, this will get you on the first notification list for when we release Indigo (which is not far off!).

UPDATE (16 Oct 2012) - The release is very soon, and all the gears are humming here on the Indigo Studio Team!  We are not currently accepting more folks into the private preview; however, if you wish to be notified of the release, feel free to send us an email as above!  Thanks for your interest!