In 2018, when businesses move at a breakneck speed, even with huge IT support building or making changes in an enterprise-app takes several months.

I was a part of an ambitious project which aimed at bringing this development time down from months to just minutes.


To comply with the NDA, I have omitted and obfuscated confidential information in this case study.

Journey of transformation

When Turbo Systems came to us, they were reluctant to have any kind of UX process for their product. But as of today, I’m happy to report that they host an in-house design team in their company.

This is a story of how our work brought about this transformation in Turbo.

How our work transformed Turbo Systems from a no-UX organization to a UX-driven company...

Hero image for Turbo
How it started

Thrown into disarray

The project started on a haphazard note. Things were not streamlined and we faced multiple logistical challenges...

Question icon

No UX process in place

Initially clients expected us to deliver beautified individual screens. They were reluctant to spend time in any UX activities.

Code icon

Several technical constraints

Turbo was built on top of existing enterprise database systems. Thus, there were some critical technical constraints to consider.

Sandglass icon

Tight delivery deadlines

Dev team was fully setup at the client side. This made delivery timelines extremely short as idle resources costed money.

Being a start-up and dev team dependent on our designs, we had to dive into mockups almost immediately...
Acting according to the situation

Embracing uncertainity

Understanding the criticality of the situation we decided to start with mockups. However, we also understood that to do justice to this project we had to figure-out UX strategy which worked for everyone.

Image: Mockups

My Role

I worked on this project with 2 other UI designers for a duration of 10 months. My background in software development helped me understand end-to-end architechture and deliver designs with ready-to-go market attributes.

In addition, I worked alongside PMs, QA, Management & Dev team at the client side to deliver mockups, wireframes & prototypes.

The platform was launched globally on January 5th 2019.

Image: Working with the team
Strategy 1

Circling back to the user

While working on individual screens and mockups, we conducted KT meetings with the product owner to understand the users of this platform and their motivations behind.

We created 2 distinct personas of this platform. We ensured our future designs actually catered to them.

Creating our designs around users helped Turbo team understand the user-centered approach...

Users personas
Strategy 2

Establishing a process

Given the fast-paced nature of the project we decided to adopt lean UX to deliver designs in bi-weekly sprints.

Lean UX Process
The process I followed for delivering designs


Complete vision meeting

We conducted a meeting with the company's board of directors to get a complete understanding of the vision behind this platform.

...based on this meeting we drafted a detailed IA. It helped us prioritize modules and plan sprints

information Architecture
information Architecture
Multi-level Information Architecture for Turbo platform
Strategy 3

Involving developers in the process

We switched our work location from Lollypop design studio to the Turbo Systems. We worked on alongside developers involving them in the design process. We used whiteboards as our collaboration tool to get quick feedback.

Whiteboards
Involving developers helped us iterate on designs much faster which led to quicker wireframe deliveries...
wireframes image
High, medium, low fidelity wireframes during various stages of the project
Strategy 4

Pioneering a design system

Design System was a trending term those days. It was never tried out before in any project in our studio, so it was an experimental effort for us. I along with UI designers crafted the first design system for Turbo.

Design system
Design system in collaboration with Dhilip Ganeshan
On one hand the design system was helping us create faster designs, but on the other hand it was taking significant maintainence effort...

We realised that design systems are helpful for products after they reach certain maturity. Thus, we kept building the design system as we went along, for the remaining course of the project.

When 24 hours are not enough

Reaching a deadlock

4 months into the project and we were working round the clock. Due to complex nature of this platform, we were still lagging behind the schedule.

With just one month remaining in the launch, we were in a deadlock situation.

Strategy 5

The War Room

To overcome the deadlock, we had to expedite the communication and decision making at every level.

Thus, we brought HODs of engineering, marketing, sales and management in a single room for 2 weeks and involved them in the design process.
We called it: Turbo War Room.

War room pics
We were able to complete 5 major features of the platform in 10 days which led to on-time release of the product.

As a result, the management understood the value of design process, and extended contract for 6 more months with our design studio.

And this is what we created

Introducing Turbo

World’s first cloud platform to rapidly build gorgeous enterprise apps in minutes, without writing a single line of code.

It seamlessly integrates with 140+ database systems so no need for data migration. Your data stays safe where it is.

For App Administrators

Turbo Studio

Turbo Studio is a cloud platform for app administrators to build or modify enterprise apps at a lightning speed.



App Administrator

App admin persona
We found the app admins are neither developers nor designers– thus, we shouldn't bother them with unnecessary tasks of writing the code or creating the UI...


Just drag n drop & we do the rest

App admin persona
Checklist concept design in collaboration with Dhilip Ganeshan

Turbo creates custom elements based on the database architecture.

We developed a simple drag and drop architecture, so the app admins don't have to write code or create an interface. They just drag the elements they need to create workflows, checklists, maps and more..

Simplifying logic configuration

The Expression Builder

App admins configure business logic, which is core to an enterprise app.

Admins don’t code. How do we enable them to create complex business logic in a seamless and intuitive way?


Extracting the logical components

I collaborated with the developers to list different types of operators and operands. I implemented Behavioral Driven Development approach for the logical structure, so it is traslated into a phrase from everyday language.

Table

Behavior Driven Approach

I implemented Behavioral Driven Development approach for the logical structure, so logic is easily traslated into everyday language for admins.

Logic Breakdown


Version 1

I adopted rapid prototyping approach. This module was central to the entire platform, the idea was to test and get as much feedback from the users as possible.

Expression Builder WFs
Early prototype screens for expression builder


Usability testing with the QA Team

I conducted usability sessions with QA team at the client location as their profile matched to the app admins. These helped us discover some usability issues early in the process.

Issues discovered

  • No clarity for nested conditions: They found it hard to distinguish conditions when number of levels increased above 3.
  • Re-create same conditions: Users found it cumbersome to create same conditions multiple times.
  • Rigid structure: Users followed different approaches to create expressions, they found the stucture did not allow them to make customizations on the go.


Version 5

We conducted multiple rounds of testing, with every version being a little better than the previous one. Finally we settled with v5 for the launch.


Color coding for visual clarity

We color coded elements to make them visually distinct.

Color coding the elements

Grouping conditions for abstraction

Users can group multiple conditions. This enabled them to nest and form of much more complex expressions with ease.

Grouping the conditions

Move around for flexible structure

Users can move a condition or entire group around. This enabled them to create logical expression in whichever order they found comfortable.

Hover over consition
For App Users

Turbo Roadster

Turbo roadster is the mobile app created by the admin using Turbo Studio.



On-field Employees

App user persona
In short, we were not designing for ‘the’ user. Their profiles and tasks vary greatly. We followed universal design principles as we were designing for the world...


Structure for infinite permutations

In Studio, admin can practically create infinite combinations of components. Thus, we created a universal stucture which could handle those permutations.

IA Roadster App


Navigational components

These were critical part of the app. They accomodated scalable and fixed sections depending on the admin’s configuration.

Navigation Components
I chose bottom navigation for fixed sections and vertical side panel for custom sections to keep it scalable.


Prototype, Prototype, Prototype

Having a seamless navigation strcture was core to this app. Thus, I ended up creating multiple prototypes for navigation.

Accessiblity Button Interaction
Accessibility button for universal functions

iPad Navigation
One of the navigational approaches involved novel interation in the side panel.


Getting Expert Feedback

Expert Feedback Sessions

As I created a novel interaction for the side panel, I decided to get feedback from the senior UX designers in our design studio.
Based on their feedback, I decided to discontinue with the approach as it involved a significant learning curve– not very good for low tech-savvy people.

App Home
Designing for no-tech users

Guided Workflows

Confused User
For users who are tech-troubled, workflows can be daunting. How do we enable them to move through complex workflows seamlessly?


Status always visible

We highlighted current step and completed steps with clear indication.

Status Indication


Just one button to tap

In guided mode (as opposed to the normal mode), users always have just one button to tap.

Guided Workflow

The journey continues...

Our work had an significant impact on not just product design but also management. The design process and collaboration transformed Turbo's approach from stakeholder-driven organization to a user-driven company.

And as we pass on the baton, I hope the new in-house UX team will take our work forward to bring Turbo closer to it’s ideal vision.

Designing a great experience for everyone, everywhere.

Find out more about my work.