Hi Developers! We all agree that UX is important, right!? But the question is, how do you take UX approach to improve your application. I had an opportunity to attend the training and hands-on to Indigo Studio, an UX toolset which is released by Infragistics.

Link to Indigo Studio

Indigo Studio Client

At first, I thought it is just another prototyping desktop application, which is 50% correct. Indigo Studio consists of client and server. The cross-platform desktop application gives us what we need.

• Drag and drop components and change properties to quickly create UI for prototyping. If you already have UI design in Sketch, you can export/import without any hustle.
• Add interactions to each component such as tap, swipe, double tap.
• Add multiple states to one screen with animations as a result of interaction.
• Add navigation to interaction so user can easily navigate multiple views.

Create your first prototype

Add Animations with Indigo Studio

Add Interactions with Indigo Studio

In addition to prototyping features, it also offers following features.

• Share project with other team member with Indigo Studio Server.
• Publish the application so that anyone can consume it with Indigo Studio Server.
• Create story board with each screen embedded, which is like a comic book to explain how user uses the application.

Storyboard with Indigo Studio

Sketch as UI starting point

According to the trainer, Indigo Studio is not replacement for Sketch, rather it works very well with Sketch, as Sketch is UI design tool, and Indigo Studio add interaction, animation, etc.

Indigo Studio Server

I am not 100% sure if "Indigo Studio Server" is proper name, but there are great features in server side. By the way, there are two types of servers. Server hosted by Infragistics as PaaS, and On-Premise version if you need full and granular control. The server can do the followings.

• Host shared projects. You can host them under your own workplace or team workplace.
• Host published application and gives you URL to access to the application.
• Users can put feedback to published application.
• You can see all the feedback on the central place or on each screen.
• You can add usability test to published application.
• User can do the usability test and server records their result.
• You can see the usability test results to analyze how users uses the application.

Get started with indigodesigned com

Usability Test

I know there are bunch of great features the product has, but the most impressive feature to me is the "Usability Test". Why? There are several points why this is a game changer for me.

Quality of the prototyping

The prototyping application we can craft via Indigo Studio is very close to the real application. It's not just tap to navigate to different views.

For example,

• Easily add gestures with smooth transition such as swipe to show menu or swipe an item in the list to the left to delete it.
• Tap a button to trigger action with animation, or even add "indicator" for a couple of seconds on purpose to let user feel like they are actually connecting to back-end server.
• Show toast notification, button click animation, popup, dialog, etc. These small behavior make the prototype application like real application

This is a key for real usability test, it behaves exactly same as the real application, including timing.

Easy to do the test

When you let end-user test the application, there are several challenges.

• Distribute the application to testers.
• Explain what you want them to test.
• Gather the test results.
• Give them a tool to feedback.

Indigo Studio server solves them all.

• Distribution: The application is hosted online, and user can easily access to the application via browser.
• Explanation: The Indigo Studio server gives you the place to put test scenario. Users can access both application and scenario at the same time.
• Results: The Indigo Studio Server records all user interaction, even their face using camera, if you want. It track how many steps user take to complete the scenario, how long and how accurate it was compare to what you set as a best way to achieve it.
• Analyze: All the results are easily accessible to you with reasonable format.

Create a remote usability study

Take part in a usability study

Why we should do usability test as early as possible

We all know usability test is important, but there are two questions.

• When do you conduct the test?
• How you take the feedback into the application?

I see many projects conduct the test only after they implemented back-end service and create minimum application. However, unlike "Unit Test" or "Function Test", we don't need any actual application or back-end service to do "usability test", right? Yes, only if the application behaves almost same as real application.

How to gather useful feedback.

If users say, it is difficult to figure out how to use the application, what are you going to do? Is this great feedback? No.

That's what Indigo Studio Server gives you better idea.

• You can see all the steps each user took.
• You can see how many seconds each operation took.

If 80% of users try to swipe the item to the left to delete item, then that's the expectation when they delete the item. If 95% of users try to open the menu by swiping from left to right, then that's how you may want to implement the application. If 70% of users takes more than 5 seconds to find a button on UI, then you may want to change the place or color of the button.

View usability study results

What's missing

There are several features missing from my points of view.

• Not all operation can be done in Indigo Studio Client. I need to go to browser to do some operations.
• Not so easy to convert the prototype into actual code for several platform such as C#. HTML/JavaScript works well though.
• No Multi-Factor Authentication for Indigo Studio server. This may be one of the reasons why some customer want to use On-Premise version? I don't know.

Summary

If you ever feel the pain points I feel, I recommend you to try the product.

• Writing code to create prototype, and you don't want to keep changing the code to fix minor thing every time your manager or customer asked for.
• Cannot adopt feedback very well because it's hard to let user test, or feedback is vague, or it's too late to adopt the change.
• It takes too much time to just show the concept application.

Reference

There are great training video available, that's why I didn't include any technical information in this post :)
Training Videos & Support Documentation

Ken