GENERAL

Working on Indago has revealed me to a complex system which, like most people, I’ve never had the chance to know before – the world of Chip Design. All of us consist on it for our beloved mobile phones, computers and, well, all aspects of modern life in general, but few of us get the chance to find out how it works behind the scenes. It is a super huge subject, wide and deep. At times I felt like the more I learn, the less I know.

Indago is a desktop application consisting of about 12 different tools, each tool allows you to check certain aspects of the chip, each tool is complex enough to serve as a stand alone product.

Trying to explain it in more details – the user, which is usually a chip designer or a verification engineer, runs a simulation that’s suppose to foresee or imitate how the chip will work in a real environment. The simulation can vary from milliseconds to days, and it consists on a pre-coded work environment (e.g. how will the chip run with wi-fi, how will it work when the device screen is on sleep mode, etc.).

Here are some of the tools indago contains:

• Waveform – Allows you to see a visual form of the signals running through the simulation. Think of something like video or sound editor.
• Hierarchy – A chip is designed based on protocols and conventions and it runs a code that’s written in a certain hierarchy. This tool shows how it’s written, and displays trees and sub-trees you can navigate between. Think of something like a Windows browser.
• Source – Displays all the source code files that are attached to the simulation, plus the option to trace and inspect the code to find the origins of the bug.
• Schematic – Allows you to see a 2 dimensional modeling of the different domains of the chip. Think of something like Autocad in 2D.

Also, there are few modes for the app, the main ones are:

• Interactive mode – for a running simulation, when the user can add breakpoints (points he/she wants to get back to and check once simulation is over).
• Post Process – a mode that is used after the simulation is over, in which the user can analyze the simulation data.

Here is how the app has looked like in the older version:

Redundant actions, clunky and “packed” look and feel.

Waveform – low Contrast, bad navigation between groups and signals.

Dozens of menu icons (one could hardly tell what each symbolizes).

It’s not hard to see how “packed” this app seems, especially when the users need a few tools that work side by side in order to see the full picture and find where and how a bug has occurred. We wanted to clean, lighten it up, make it more user friendly, improve functionality and use all those as an added value the new app.

UX METHODS

• We used a template for each new feature, stating the need definitions.

• We have collected all the details we could about the work process with the app and figured the main requirements.

• We have used personas to keep our users in mind – their positions, needs and characteristics.

• We have used whiteboards to show the user stories for a default/happy path and a not-so-happy path.

• We have used a collaborative web tool to re-organize all menus.

• We did reviews of high fidelity wireframes to Account Executives (AEs) to hear feedback from them.
• We gave the developers documents with the UX Decisions, as elaborated as possible, to cover all cases and scenarios.

A NEW APP CAME TO LIFE

• Dozens of icons removed from the menus (thinking of a new icon for an action was a true hassle, as these are not the common send/share/download type of icons).
• Header cleaned up, top menus were moved, some to the hamburger menu, some to the side bar.
• Toolbox with the tools list was given the functionality it lacked. Before it mainly served as a navigator between tools. Now it includes “add new” functions, error messages, toggle buttons, close tabs options and more.
• Waveform – one of the main used tools was given a new look with higher contrast, different shapes of signals and a new easy navigation concept with a groups browser.

LOADING SCREENS