Onboarding and guiding users through nerd.vision

Intro

With the current state of nerd.vision, the product from a development perspective increases daily in complexity. The issue started to arise whereby users interacting with the product for the first time were struggling to understand the initial stages and setup to start debugging with their applications. Data and research provided an insight as to why this was happening. We began to realise that for a new user, many aspects of the UI and UX were overwhelming and retention within the product started to decline. 

The Issue

The key areas that were identified within the product all revolved around onboarding and starting up debugger with the users application. This included creating a workspace, connecting an application and beginning the debugging process.

The fix

The solution to this was to go back to the drawing board. Understanding how a user interacts with the product or similar products and to develop a streamlined approach that could be explained to the development team was the goal.

For this I initially started with research. Being able to perform user testing under predetermined conditions with a structure to the test plan initially provided more understanding into the issue and allowed me to forward this data to the team to evidence the problem areas within the product.

Once these areas were identified, it was time to address them. I was able to develop some wireframes and mock designs that were viewed by the entire nerd.vision team in order to go through an iterative process of reaching a stage that we hoped would correct the issue and improve retention.

The first key area was to create a workspace. Users, when wanting to test out and understand the product were being overwhelmed by the customisation and configuration options available to them for building a workspace. I was able to explain to the team that for a first time user, most of these options were not needed at this stage in the workflow. The idea was that we should be trying to make this process as simple as possible for the user. The questions I put forward to the team: What is the minimum input we need from them in order to build a workspace? Is there anything we can do that we can get some of this input without actually needing them to give it to us?

This led to stripping the inputs down into the most basic form. If a user wants to add a workspace the only information we need from them is the location of the repository. From this simple input we can generate what provider they are using, build a name for the workspace and even determine whether it is a private and public repository. So from what was once four different inputs we have now rebuilt this into one key input that generates the data for the rest of the inputs. This provides the user with a much friendlier user experience going forward.

The old quick start panel for connecting an application

The design work for the new version of connecting an application

‍

The approach to our second problem area had to be slightly different. When a user connects an application they have to perform a number of tasks in order for the product to identify and attach nerd.vision to it. The user must insert specific code into their application specific to each agent/programming language the application is written in and then start the application up so nerd.vision can detect it is running. 

Unfortunately we could not reduce these steps like the workspace solution. The current implementation was a large quantity of information condensed into a modal within the product. User feedback often showed that the information overload caused users to quit the modal and avoid this stage completely.

The solution was to break the process down into simple, easy to follow steps. To do this I was able to design a simple step walkthrough component that would only show the absolute necessary information in order for the user to progress onto the next step. What I wanted to achieve with this was to use association within each stage so that when the user followed through the stages, they could understand what to interact with and what to read on each step. For this I created a clear message box that would provide a small one line instruction in very clear writing. Underneath this there would be interactive element clearly shown by a blue border around it. Each step followed the same principles until the user has connected an application.

The result was that users were now moving through the stages rather than closing the modal before being able to read and interact with the information. This approach is a combination of colour association and UI design principles that give a better user experience when connecting an application.

Conclusion

The solutions to our problems are not perfect, but I do believe there isn't a definitive or correct solution to UI/UX. It is an iterative process that improves slowly the more care and attention it is given. Understanding the user played a key role in how to improve the situation and tweaking our approach to building the UI should allow us to reach a point where we are happy that it is no longer an issue for users to go through onboarding.