What Makes Indigo Different?

As one of the "faces" of Indigo Studio, I often get asked, "what makes Indigo different/special/better than ?" It's a fair question--it's not like we are the first players in this game, and everybody is doing interaction design with some kind of tools today.

Indirectly, I've tried to answer this question with our Rationale series of blog posts, but I figured it'd help to try to sum up and provide a list of how I see Indigo being different.

First of all, with UI design, there are literally hundreds of tools that people use--trust me, I know. And I use "literally" in the correct, literal sense here. :) So when approaching Indigo Studio, looking at the vast array of what people use, we had to ask ourselves, "what do we hope to add that these other tools don't?"

Features Don't Matter

That's an exaggeration, but we are talking about user experience, and that's a lot more than features. A feature that Indigo has today could be added by a competitor tomorrow. A feature that a competitor has today could be added by Indigo tomorrow. Sure, features add capabilities that support experiences, productivity, and so on, but when comparing tools, there are a lot more important things to consider more than a line-by-line feature comparison. How is a feature implemented? How does it support an overall story? Do competing products use the same word in the same way?

This last question is especially pertinent in the UX tools space. For instance, a lot of tools claim to do "prototyping," but they often mean that there is some way to do clickable linking of static images. That's hugely different from what we mean when we say prototyping, which is that interactions are the native tongue of Indigo, that they are super easy to add, fully integrated, state-based and/or navigation-based, and that we support rich animations.

So the rest of this post focuses on these qualities--the how we are different, not just comparing features. If you want, you can certainly explore all the Indigo features here.

Holistic Approach

Most if not all of the existing tools on the market are either hacks (e.g., using a basic diagramming tool or presentation tool) or propose to solve one, isolated aspect of interaction design (graphic/visual design, static wireframing, or full on prototyping/app simulation). It's true that some tools have evolved out from their initial core to suit other purposes, but most of the time, those additional capabilities are tacked on and don't feel quite right/native/fluid in the experience of the tool.

With Indigo, a core principle for us is to consider interaction design holistically. Our tool has been envisioned from the get go not as a niche, do-one-part tool but a holistic interaction design tool. This doesn't mean that we literally do everything that fits in a good interaction design process--we couldn't, because a lot of good interaction design activities happen outside of software tooling. But our principle is to tackle those things that make sense to do in software--where there is sufficient value added, and we are able to connect the dots and reduce rework.

Principally, this takes the shape of integration--filling in the gaps between software tools, and doing so in a unified way that fits fluidly in an interaction design process. So far, this has been realized in these ways:

• Integrated Storyboarding - not only are we the only tool on the market that really does storyboarding, we have made it more feasible to do it by integrating it in with your designs. The live link between screens and storyboards means they are always in sync and up to date, so when you update your UI design, the storyboard is automatically updated to reflect that. Plus, you can easily jump into specific areas of your prototype from your story, which makes helping others understand design intent much better/easier.
• Blurring the Line Between Sketch/Wireframe and Prototype - the vast majority of UI design tools are static layout tools, either wireframing or visual/graphic design. If there is support for interactivity, it's very basic (clickable PDFs, clickable mockups, linked wireframes). In Indigo, you can start doing quick, lo-fi layouts/wireframes, but adding interactivity is a native thing in Indigo--it even has a no-cost feel to it. You tell Indigo, "when the user clicks this button" and then tell it what to do by just tweaking the screen or navigating to a new screen. And at the end of it, you have both a good set of wireframes as well as a functional prototype. And all of this is as fast or even faster than the best wireframing tools on the market today.
• Easily Add Interactive Fidelity - sure you can do static clickable screens, but it's a simple matter of dragging a few things around on the timeline to go from instant/abrupt to smooth and animated. Maybe you start static, test that the layout and core interactions work, then add animations to enhance. Or maybe you specifically want to try different animations up front. Your choice--it's there.
• Easily Share for Free - many tools only let you export to image or document (maybe clickable). Or they have an extra-cost service or integration with some other vendor for sharing. Or you have to find a service on your own to upload your static images into and then setup click throughs. With Indigo, after you've natively made your interactions as rich as you want, with just One Click you can share an interactive prototype that runs on any modern device--we'll host it for free, or you can use your own servers. This facilitates the rapid review and evaluation activities for interaction design.
• Multi-Platform/Platform Independent - the baseline "Essentials" platform pack in Indigo is a generic collection of interactive, common UI elements. Our default style is a clean, flat grayscale look. You can literally design a UI for pretty much any platform you want with it. Of course we are adding other platform-specific packs (such as iOS) to make designing for specific platforms faster, but the real value here is that you don't have to find, learn, or use different tools to design for different platforms. It's not just for Web, it's not just desktop, it's not just this or that mobile OS. You can design for all of them, with one tool.

Most of these points mean you have:

• Faster Iterations - you can far more quickly evaluate ideas and iterate to find great solutions.
• Reduced Rework - because a sketch is a wireframe is a prototype is an animated prototype that can run on any modern device, you can gradually, strategically add fidelity without having to redo your designs in a new tool.
• Less Costly Changes - you come to a concrete, shared understanding of what you are building much faster and without investing in setting up a code environment.
• More Time to Find the Right Design

Because this holistic approach is a core principle, it will continue to drive future direction of the tool, and you'll see Indigo bridging more and more gaps as time goes on. We see what many of those gaps are, and we have a plan to tackle them in a way that will continue to feel integrated, native, and fluid and.. right.

User-Focused Prototype Sketching

Another core principle for us is to help our users stay focused on their users. Most tools in the market that come close to offering "real" interaction prototyping (i.e., more than simple static-based click throughs) very quickly dump you into a technology-focused, user-free wasteland. You are asked to think in terms of a target technology in order to effectively use the tool. This typically means two things: a rather huge learning curve to do anything useful with it and having to engage with tons of technical jargon, options, and details that are better deferred until you get to closer to development. Both of these lead to slowing you down and wasting your valuable time.

Because of this, code-free interaction prototyping has gotten a bad rap. People ask, and often rightly so, "why not just start off prototyping in code?" In a sense, that's a valid point--if your prototype tool takes a lot of work and is barely one step above coding anyways! With Indigo, we didn't want to forget that the point of interaction/UI prototyping is to discover what is best for users! To do that effectively, you need be able to bring the experience of making a prototype as close to your users' experience of the prototype, and to do that quickly and iteratively.

Hence we coined the term "prototype sketching" or "sketching prototypes" to communicate the feel we are aiming for. Essentially, making a prototype should feel as much like sketching as possible. It should feel natural, fit the outside-in mindset, and be fast.

In Indigo, we realize this a few ways:

• Stay on Track with Storyboarding - we enable you to integrate user-focused storyboards with real world context into your UI design/prototyping. This helps keep you focused on the users and their stories--right in the tool. It's easy to get distracted when you start using tools and exploring all sorts of ancillary paths--"ooh, what should this button do?" and you end up spending a lot more time on a prototype than you should before evaluating it. Storyboards help keep you on track--you should prototype a story, evaluate that, iterate, then do another story. (Or a set of few targeted stories.) Don't get caught up filling in every interactive path!
• User-Focused Interaction Dialogs - the interaction dialogs in Indigo are framed from the user's perspective ("when user the prototype should "). It's a very natural way to approach UI design, and it helps keep you in the right frame of mind, more so than "triggers" and "events" and all that sort of thing.
• User-Flow-Based Prototyping - Indigo frames prototyping in terms of a set of possible user flows. This means it is very easy and natural to quickly design through a given user flow, changing the screen state in response to user actions, and not get distracted from that. You don't have to start from storyboards to do this--it's just the way designing with Indigo works.
• User-Focused Interaction Flow - as you go along, you are designing what should happen when users do this or that thing. As you design more stories/flows, Indigo keeps track of all that for you and represents it in a very useful flow diagram that helps you understand what paths users can take based on their actions, what will happen, and this helps you navigate and modify your flows much more easily than most other tools.
• Clutter Free UI - the Indigo interface is designed to add minimal clutter, which means you aren't constantly fighting with and being distracted by a horde of tool panels, properties, lists, and so on. We aim to make most things contextually sensitive--so you only see it when you need it. Every option you see fought for its right to be up in your face.
• Design It Like You Want It - we strive to reduce abstraction as much as possible. Wherever we can, you can edit in place--so you don't have to find and fiddle with property inspectors any more than necessary. Our state-based interactions mean that you just set up the screen in the designer exactly how you want it to be--what you see is what the users will see.

Modern, Interactive Prototyping

Expectations of users in regards to apps have certainly changed over the years, and yet very few of our UI design tools really support those changed expectations. In fact, in some ways it is remarkable how we manage to work around our extremely limited tools to design rich apps.

Indigo takes this as another starting off point--you should be able to easily and quickly prototype rich interactivity without having to resort to coding. On top of that, you should have a visual aesthetic that suits contemporary sensibilities--it shouldn't look like you are designing a 1990s Web site or a Windows 2000 app, by default. And heck, ideally the tool interface itself shouldn't feel like it was designed in the '90s--talk about working against inspiration!

So we realize this in a few ways:

• Interactions are Native - select any element, and right there, big and friendly, is an invitation to make that element interactive. Not only that, our state-based approach makes it super fast and easy to make modifications (and only the relevant modifications) to the UI in response to that interaction. You don't have to create special kinds of elements or go into special modes, much less use other tools, to make your designs interactive. There is no managing panels, layers, or anything cumbersome like that--you can easily visualize and navigate the various states you've designed.
• Adding Animations is Fast and Easy - you don't have to add special libraries or rely on only built-in pre-made animation options. You literally can make any change to the UI animated by just dragging it around on the timeline. And the timeline is designed to keep things simple, so you don't have to feel like you are learning a whole new, specialized tool just to make things animated.
• Our Default Visual Style is Flat/Modern - hey, that's all the rage right now, right? :) The point is, you don't have to seek out a special add on library of widgets to design something that is clean and sleek. Indigo designs just look good out of the box, and so they make you look good, too.
• Modern, Interactive Platform Packs - Indigo has been designed to be extensible--to support adding in new UI libraries, much like other tools; however, unlike most other tools, the libraries that we add are fully functional emulations--interactive widgets. So when we add our iOS Platform Pack, it's not just a bunch of pretty pictures--it is really interactive, just like the rest of Indigo, and it is focused on making designing modern, interactive apps for iOS a breeze. We will add more platform packs as well as enable customers to create their own interactive libraries to suit their UI patterns and branding.
• Our UI is Modern - even though our UI is designed to get out of your way, we still spend time to make sure it is itself clean and modern. When designing modern apps, you should feel like you are working with modern tools.

Experience and Outcomes

Ultimately, what makes Indigo different is about experience and outcomes--your experience of using the tool, how you feel empowered, and the designs you make with it. We focus on having a great, user-focused experience for you, because you are designing things for users. We focus on helping you design things fast with minimal technical overhead, giving you targeted tooling support so that the designs you make are not only functional but also useful, usable, and desirable.

You shouldn't have to be a visual designer to create a good looking prototype. You shouldn't have to be a technology expert to create a highly interactive, animated prototype of a design that is in your head. You shouldn't have to invest days or weeks to create an interactive prototype to evaluate with users. You shouldn't have to waste hours upon hours recreating the same design with different tools to go from one level of fidelity to another. You shouldn't have to wait until the code is done to find out that you need to change the UI. The reality is that despite the glut of UI design tools out there today, you do have to deal with all these challenges. Indigo, on the other hand, tackles these challenges for you head on, and that's what makes it different.

You don't have to take our word for it, though. You can see how it is different by watching our videos, and you can feel how it is different by downloading for free and giving it a try!

---

If you are using Indigo, we welcome your ideas on how we can better apply and refine these and other good interaction design principles to help you to design awesome UIs. If you have any questions or problems, please don’t hesitate to discuss them with us in our forums. We’re also on Twitter @indigodesigned.

About the Author

Ambrose Little is principal design technologist at Infragistics and has worked on Indigo Studio as interaction designer and product manager along with an awesome team based here in Cranbury, NJ, USA and Montevideo, Uruguay.