Appsmith IDE, prior to May 2023
I guided two cross-functional teams in solving for learnability & activation
Recognizing that two teams were addressing symptoms rather than the root cause, I intervened and advocated to solve the problem at the root level: a fundamental redesign of the information architecture of the platform.
This decision was informed by the work of our team of designers:
Conducting a comprehensive audit of usability issues and papercuts.
Analyzing user recordings to understand navigation patterns
Facilitating workshops with stakeholders and subject matter experts
Creating core flow diagrams to map user tasks and cognitive load
Creating alignment through Vision
To gain organizational buy-in for the platform's revamp, I:
Developed a clear vision for how a strong information architecture would solve multiple problems
Created and presented high-level prototypes to demonstrate the potential impact.
Established measurable UX metrics tied to business outcomes.
Proposed a 7-phase execution plan with clear milestones.
Proposed how an Information Architecture revamp will correlate with activation metrics, to secure executive support.
Loom presentation to the company explaining the vision.
Team charter document
Team leadership & restructure
To revitalize the team and establish clear direction:
I proposed to rebrand the "New Developers Pod" as the "IDE Pod" with a focused charter.
Created a one-pager to clarify the team's mission and objectives.
Conducted a pre-mortem exercise to identify potential failure points
Built confidence through a transparent &. methodical process.
Providing a definition of success
I established assessment criteria to guide and evaluate design iterations for each phase of this massive project.
All of these measures helped immensely in establishing trust with the team and made them once again ready to tackle a complex intertwined problem.
Defined success states through UX metrics
Observing & mapping user behaviour
Our team of designers coupled with a PM and EM wanted to understand where people struggle within the Appsmith IDE.
To test this, I advised that the team conduct several task-based usability tests to identify various friction points. Also, the designer on the team wanted to start afresh and did secondary research with internal users of the platform to understand their friction points.
Further, we looked at user behaviour analytics to understand how new users and advanced users behave within the Appsmith IDE.
The problems that were synthesised could be broadly categorised into two groups: Problems with Navigation and Problems with Learnability.
Designer in the team doing a workshop with subject matter experts to unearth various problems
Given that the team previously had spent 10 months in trying to solve the problem, I created an abstract flow diagram to illustrate cognitive friction and how this creates problems when a user has to switch context.
I wanted to provide a reference map for the team to rely on so that they do not get tangled up in the problem complexity.
All these exercises to understand the problem in various viewpoints proved invaluable for the team to confidently take product decisions.
Content hierarchy within the Appsmith IDE
Translating the underlying IA to the UI
We looked at the content hierarchy of various entities within the IDE and wanted to translate that structure as-is.
The idea was to not introduce any further grouping and let the underlying structure transparently reflect on to the UI.
Introducing a Sidebar for easy navigation
Once we were clear about how the IA is going to translate to the UI, we looked at various patterns of how we could bring this IA to the UI.
A ubiquitous pattern in developer tools is the Sidebar. We wanted to adopt this so that it enables users to quickly navigate amongst various entities but also provide a familiar mental model to our developer audience.
Sidebar that represents the higher-level constructs of the IDE.
"Page segments" that not only provide easy context switching, but also remember the last accessed entity by the user.
Context switching made simpler with Page-level segments
In the previous IDE, users had to remember what they were doing previously whenever they had to switch context. This was a massive pain.
It is the system's job to remember what the user was previously doing and aid them in their work.
The beauty of representing the key elements of the IDE: Queries, JS Objects and UI elements in the form of a segmented control afforded us in aiding navigation further.
The system remembers the last accessed entity by the user, within each of Queries, JS and UI, significantly lessening the cognitive load inherent in context switching.
Minimising context switching further with a Side-by-side layout
From our user observations, we know that people constantly switch between Queries and UI, JS Objects and UI. It is important for us to reduce the need for this context switch so that users are able to write code and take advantage of the UI on the side.
Initially, we wanted the side-by-side mode to be the only way for users to access the IDE in. However, we heard from our internal users that they missed the flexibility of writing code in a full-fledged code-editor.
Hence, we decided to retain the best of both worlds by introducing the side-by-side layout as a mode.
Helping the team to traverse various iterations, zero-ing on this side-by-side layout, enabling the team to see why this solution works, and validating it with a lot of user-testing, is something I consider to be a big win for me as a design leader. Through this process, the team significantly gained clarity and thereby confidence in terms of moving forward with a solid solution. 💪🏽
With the advent of a new design system which was in the works for an year and was finally live, it was easier for us to realise the vision of making the platform have a consistent personality with a modernised look & feel.
I proposed and encouraged the Engineering team that we try and incorporate visual changes to the platform as the team would be working on the entirety of the codebase and this is a great time to get the changes in.
Revamped illustration set
Purposeful Illustrations
With the help of a UI consultant, we redid our Illustration set for the IDE. The intent was to have illustrations that aptly communicate the system's state along with clear call to actions so that the user always knows what to do.
Brand new IDE 2.0
All of these changes culminate in a brand new IDE for the Appsmith platform
The new IDE with a side-by-side mode which minimises context switching, significantly.
