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...
How it started
Thrown into disarray
The project started on a haphazard note. Things were not streamlined and we faced multiple logistical challenges...
No UX process in placeInitially clients expected us to deliver beautified individual screens. They were reluctant to spend time in any UX activities.
Several technical constraintsTurbo was built on top of existing enterprise database systems. Thus, there were some critical technical constraints to consider.
Tight delivery deadlinesDev 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
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.
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.
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...
Establishing a process
Given the fast-paced nature of the project we decided to adopt lean UX to deliver designs in bi-weekly sprints.
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
Multi-level Information Architecture for Turbo platform
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.
Involving developers helped us iterate on designs much faster which led to quicker wireframe deliveries...
High, medium, low fidelity wireframes during various stages of the project
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 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.
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.
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
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 is a cloud platform for app administrators to build or modify enterprise apps at a lightning speed.
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
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.
Behavior Driven Approach
I implemented Behavioral Driven Development approach for the logical structure, so logic is easily traslated into everyday language for admins.
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.
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.
- 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.
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.
Grouping conditions for abstraction
Users can group multiple conditions. This enabled them to nest and form of much more complex expressions with ease.
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.
For App Users
Turbo roadster is the mobile app created by the admin using Turbo Studio.
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.
These were critical part of the app. They accomodated scalable and fixed sections depending on the admin’s configuration.
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.
Accessibility button for universal functions
One of the navigational approaches involved novel interation in the side panel.
Getting Expert Feedback
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.
Designing for no-tech users
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.
Just one button to tap
In guided mode (as opposed to the normal mode), users always have just one button to tap.
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.