Role: Individual contributor/DRI
Keywords: User experience, User research, UI design, Troubleshooting, Low-Code
Introduction
Outsystems is a low code platform that also offers ways to track & manage lifecycle of an application through their web portal; ODC (Outsystems developer cloud). As part of growth model, the roadmap includes introduction of new features & updates each quarter. Following project is a result of such activity.
Why go for a redesign?
“If we focus on collecting stories in our customer interviews, opportunities will emerge from those stories.”
– Teresa Torres, Product Discovery Coach at Product Talk
While the 1st version of this capability (Activity) acted as an MVP, it was time to dig deeper, review requirements with clients and improve the overall activities experience for end users; both technically & from a UX standpoint.
Goals
1. Add client-side traces/EAP (current activities only provide a way to visualise server side traces)
Come up with an end to end flow to activate client side traces
Come up with an end to end flow to activate client side traces
2. Identify pain points and improve user experience
Conduct research with existing users and define a scope of UX improvements, design the improvements and help in smooth development.
Conduct research with existing users and define a scope of UX improvements, design the improvements and help in smooth development.
Before going into design process, various brainstorming sessions were done to clarify doubts and open ended questions regarding VM.Design process started only when UX had enough datapoints to go ahead.
Design process
Outsystems UX group uses IDEO design methodologies with multiple assets available to the designer. Based on the project complexity and timelines, the DRI choose appropriate methods and assets.
Problem definition
There were two different objectives being considered here. While the first objective to release client-side traces was clear; the project requirements for UX improvements were quite open at this point. It was crucial to pin point which UX issues were faced by users the most and then create a priority document to pick them.
These steps were followed to create that document.
Understanding context
What are traces?
In today's world, majority of applications are made up of micro services. Tracing gives the capability to monitor the fate of a request during its lifecycle across various components in a system.Whenever an application initiates a request, either through a client or server-side component, it produces a trace. This trace provides a comprehensive view of the request, broken down into segments known as spans. Each span represents a distinct task and has its own duration.
Traces offer several benefits
They allow you to pinpoint which span caused an error, enabling you to identify the root cause via the ODC Portal and rectify it in ODC Studio; They help you comprehend the performance of each span within your application and its dependencies, allowing you to optimise spans that take longer and enhance your application’s performance;
Traces aid in debugging your applications by offering additional information about the problem’s location in ODC Studio. They are interconnected with logs for problem identification.
Existing user interface
Choosing the right persona
Outsystems user research team has created a wide array of product users. An appropriate persona was chosen based out of his needs & characteristics.
Contextual study of traces and the existing designs helped pinpoint a correct persona for the project..
Chosen persona
User interviews/ Primary research
Recruiting users
Users are generally recruited through Outsystems research team. Multiple clients were already interested in client-side traces to be introduced in activities. This gave me an opportunity to connect with their respective customer success managers and book interview sessions with them. With the help of research team, I was able to gather users that fit my target persona.
Users are generally recruited through Outsystems research team. Multiple clients were already interested in client-side traces to be introduced in activities. This gave me an opportunity to connect with their respective customer success managers and book interview sessions with them. With the help of research team, I was able to gather users that fit my target persona.
Since we were testing out the monetisation aspects of client side traces, we ended up taking a different route than traditional route of design user interviews. Instead of just designers conducting the session, we had distributed ownership in interviews where each DRI explored the end user response from design, product & technical perspective.
This approach gave -
• An opportunity for PM & POs to be the part of conversation
• Have early stage technical cost discussions
•To test if the features and improvements were even required at all
*Project was called EAP in earlier stages
Client information is hidden for privacy reasons
Desk research
Existing user feedback was gathered from other channels and included the in the research.
Feedback from Sauron
Outsystems uses feedback popups throughout the IDE & portal which are connected to Sauron, an independent github plugin to collect feedbacks.Popups are also designed with an in-built CSAT score scale which gives a more quantifiable data.
Feedback from community
Outsystems has an extensive community of MVP users and certified outsystems professionals. These users are actively participating in product feedback and new feature testing through community forums.
A slack integration is used to collect feedbacks from these forums.
Outsystems has an extensive community of MVP users and certified outsystems professionals. These users are actively participating in product feedback and new feature testing through community forums.
A slack integration is used to collect feedbacks from these forums.
Competitor study
Top observability tools were studied to understand how tracing is achieved through them.
*Competitor research is hidden for privacy reasons and previous concerns from competitors.
*Competitor research is hidden for privacy reasons and previous concerns from competitors.
Affinity mapping for research analysis
Mapping & categorising feedback in an affinity diagram
UX proposal
Interviews and feedbacks from other channels are a valuable research method for journey maps. The analysis gave me an insight on user journeys or use cases in this case. Based on use cases and business scope, a UX proposal was crafted for improvements and development of new feature. Feedbacks which were insufficient to form a proper use case were passed to insights team for further research.
Final UX stories based on UX proposal
Solution design
Multiple iterations were made to tackle one improvement at a time.
Timely reviews were taken from design system team & UX copy to make sure the solutions were aligned with product wide UX guidelines
Ideation, Brainstorming & Reviews
Design system reviews
Design systems team at Outsystems has standard components which are used throughout the product. If a new component is needed, generally the team works on it independently and then provides it to the DRI or in this case, a proposal was made by me and submitted to design system team. The team then reviews the propsal and if approved the new components are added to design system.
UX content review
UX copy and content design were extremely important in this project a we wwre aiming for features which would impact the product UX greatly. I collaborated with UX content to reviews each and every crucial content need.
Example:
Turning on client-side traces would affect volume of spans greatly. how do we let the user know that there would negative commotions associated with this action without causing panic?
Clear but assumptive, emphasis on negative outcomes
Clear, no assumptions, emphasis on positive outcome
For simpler content needs, we used 'Writer' in Figma that saved time of reviews.
While writer generated quicker results, it lacked context understanding which where content writer were really helpful.
Collaboration with Technical content
There was a strong user feedback on definition of 'Total duration' and it's meaning. While I made sure the right content was displayed on UI, it was evident that a technical document was required to help the user in every way.
I actively reached out to technical content team and engineering to prioritise an improvisation in technical documentation. As the user feedback was strong, teams agreed for an impromptu task and came up with a better documentation.
Usability tests
Qualitative Usability tests were done to identify potential issues in new flow to activate client-side traces and validate improvements before releasing a new product or feature.
Improvements & changes to new theme were treated as a mean to improve the overall troubleshooting flow rather than an individual feature. This was also done to reduce the cognitive bias that improvements will automatically lead to efficiency.
*Actual recordings and individual results of usability tests are hidden as Outsystems has an NDA with end users which safeguards their inputs for ethical reasons.
Solution delivery
As user tests proved positive, a value milestone was created to compile the UX proposal with product needs. Designs were handed over for Go live.
Outsystems develops solutions in 3 major rings (Environments). First 2 rings are for testing & development and ring 3 is for selected customers who get to do beta testing of features.
Task tracking for improvements
Engineering challenges
ODC portal runs mainly on dogfooding. It's important to learn that the portal capabilities are actually developed on the low code development platform, which poses many challenges when trying to to create custom components. Many improvements introduced new components which were new to design system and hence faced development challenges.
As a DRI , I was actively involved in development support which involved understanding low code challenges, doing minor compromises that helped development go faster and also reviewing & testing features as and when they were developed. Saving the time to go live.
Pre-launch testing (Amplitude usage reports)
Client-side traces were developed and made available for few enterprise accounts as for beta testing. We used Amplitude to setup KPIs that gave us important insights on customers who had access to client-side traces vs customers who didn't have access to it.
Final thoughts & future scope
We were able to release a better and improved version of activities (Now traces) as planned with client-side traces.
Achievements in this release:
UI with dark theme option
Release of client-side traces, increasing the end user usage of traces
Improvements that resulted in an overall better end user experience
Learnings
This was one of the first projects I picked at Outsystems, it helped me work with different teams, understand the dynamics in between them and design better with a product created purely on a low code platform.
It also gave me a chance to interact & understand Outsystems users.
Impact & Future scope
Outsystems UX group has a dedicated insights team that takes care of user feedback post feature development. Critical feedback is thoroughly analysed and given in appropriate format to concerned team. Since it's release, traces has been received well. Smaller UX issues have been addressed based on criticality and overall impact on end user experience.
5 new logos were added in Q3 increasing the ODC revenue | Retention of many existing clients with the improved capability
5 new logos were added in Q3 increasing the ODC revenue | Retention of many existing clients with the improved capability
Released version
