Codelysis 2.0 -
A better Coding Simulator
Codelysis - coding platform redesign was aimed to bring the modern sensibilities, functionalities to the organisation's most robust coding simulator and solve the zero score problem, critical UX and usability problems that arise due to the complex nature of the product.
Because of the significant revamp of the test-taking platform, the coding simulator also needs to be upgraded visually and solve the zero score problem, UX issues that are proving to be a significant pain point for people who are using this service regularly.
Building upon the new design system framework provided by the platform revamp, Codelysis 2.0 is one of the most powerful, robust, flexible and advanced Coding simulators yet, which is now part of the organisation's new product line updated to meet the modern and global standards.
Lead designer
Interaction designer
Visual designer
Desktop Web
2020 - 2021
Many clients identified and reported that more than 5% of the people who use the codelysis platform score zero as their final grade - even when there is no problem with the code, the execution, or the process itself.
This begs the question, what is the reason behind this zero score when there is no issue with the code - is it an interface problem, the missing functionality, or mismatch of users expectations with the system. And to understand that and identify any hidden problems, I need to understand the user's behaviour, expectations and process flow when they attempt to solve any question in codelysis 1.0
Apart from the direct feedback from the client's who used the organisation's services - No analytical data was presented for Codelysis 1.0
My approach was to combine direct feedback and use Qualitative analytical methods - personal interviews of people who use this type of simulator, understanding the user itself to dig deep and highlight the usability problems users face.
We had years of direct feedback from the clients who used the Codelysis services in their use cases.
This feedback usually consists of missing features, client-specific modifications, new features requests and more.
This helped us identify the missing gaps - both in terms of features and scalability between the Codelysis and the service offered by the competitors, which allowed us to plan the product vision and make the design scalable and future-proof.
Apart from the features request, It was crucial to understanding the user's behaviour, pain point, expectations and where to focus our attention through this redesign.
To understand this, I've conducted a series of personal interviews with the developers, code-enthusiasts, hackers and people who spend most of their time coding or practising in the coding simulators to get a more holistic view of the product itself.
Through these exercises - which spanned around 4 months, I was able to identify four more specific problems with the Codelysis 1.0
More than 5% of the people who use the codelysis platform encounter zero scores as their final grade - even when there is no problem in their code, the execution and the process itself
Several features were missing from the codelysis that users expect from a modern coding simulator - resizing window and code persistence.
There are a series of tabs placed on the simulator in various levels that the user needs to access the information, which is a challenging task to do constantly when debugging their code.
People unanimously agree that the terminology used on the simulator is not standard and does not contribute towards a common language that people are familiar with from all other simulators.
How can we create a coding platform which avoids the Zero-score issue, is easy to navigate, has standard terminologies, is objectively modern and intuitive to use and scalable to support modern features?
The new codelysis platform must achieve these goals to be considered successful.
The new platform should decrease the cases where users encounter zero-score problems by improving code-execution capabilities, missing features and creating a self-sufficient interface.
The tab navigation and other related interactions need to be rethought and restructured to avoid unnecessary clicks and provide the same information to the user faster without overloading information to focus on their debugging instead of unnecessary clicks.
Codelysis controls, button placements, terminologies and other features need to be restructured, standardised and placed into the most effective place where they can provide maximum value to the user without hindering the actual goal of the end-user.
The codelysis interface should be visually refreshed and use the organisation's new dynamic design system and be scalable enough to extend the support to incorporate new functionalities in the future.
I went through several rounds of ideation, experimented with multiple design patterns and thought processes, and gained quick feedback from all the concerned teams to quickly iterate over the designs and interactions before finalising a shippable design candidate.
After more than a year of rigorous design iterations and development cycles, Team was finally able to ship the new and improved coding simulator - Codelysis 2.0
Codelysis 2.0 showcases a modern-day code simulator with a new interface, newly restructured controls, standard terminologies, revamped information architecture and unique features that were either hidden from the user or completely missing.
Following are some of the highlights of the new features that were added to Codelysis 2.0
Codelysis 2.0 showcases a brand new walkthrough, which was carefully designed, showcasing the most important elements for users to focus on so that users won't skip out on some critical features, Easy on the eye transition animations and Fewer steps, as we don't want users to stay on the walkthrough forever.
Users can always restart the walkthrough through a helpful widget - which is always present on the screen.
We decided to bifurcate the code execution controls into two separate entities - Compile and Test & Submit Code - eliminating earlier the confusion from the user's side as to how to test the code without submitting it to the central server.
Compile and Test - is the control entity that runs the code execution and checks how the code fares against sample test cases without submitting it to the central server, enabling users to experiment with the code as much as possible.
Submit code - is the control entity that is now being used to submit the code and test it against the graded test cases.
This feature is a brand new addition to Codelysis 2.0
Through a flick of a tab, users can see the history of the code they have submitted during the test for quick reference.
Each entry in the Code history contains a quick summary of the performance of the code, which includes the number and types of passed test cases, Code execution details and memory consumption - for reference and quicker decision making.
Upon scrolling a bit further, users can see the code itself, and opt to open it in the editor itself - replacing the already written code, so that users can quickly resume their work from where they've left.
By observing the users through the interviews - I decided to make use of the verticality of the screen itself for information propagation - through accordions, which leads to the elimination of all the 7 tabs that were presented on Codelysis 1.0 and emphasising the scrolling patterns that is a native interaction among the web developers.
Tabs can only switch between mutually exclusive categories that serve their own unique purpose - Code Execution and Code History.
More enhancements were done to restructure and increase the visibility of some of the most prominent features of the Codelysis simulator.
Users can now toggle between Dark and Light themes as per their preference.
Through a single click or using the keyboard-accessible shortcut, users can invoke their Codelysis editor shortcuts which will assist users throughout their assessment.
New features such as Editor Mode, Tab-spacing, Auto-scrolling, and Intellisense were added to Codelysis for more robust and flexible customisation of the simulator.
After more than a year of hard work, we launched the new website and achieved our goals and seized the opportunity we were presented with.
The new simulator enhances the user's experience. We solved the Zero-score problem by registering the issue with less than 0.5% of the users with more straightforward navigation, well-explained standard terminologies, and fresh features.
With the elimination of unnecessary tabs and re-worked IA, we provided a modern simulator experience with native interactions and no information overload.
Codelysis controls, button placements, and more were restructured, standardised and placed into the most effective place to provide maximum value to the user.
People have an overall positive sentiment toward Codelysis 2.0 and frequently describe the simulator as modern, simple, flexible and powerful.
I would sincerely thank my incredible design team - Rajat Budakoti and Anmol Bindra, for assisting me with the research and design iterations and sharing their valuable insights wherever they can.
I would also like to thank Product Manager - Kapil Malik and Ankit Abhishek, Technology Team, QA, for a seamless collaboration during the development of the project and for creating the best experience possible for the end-users through Codelysis 2.0
😊