Software analytics for next-level code quality & efficiency
Our work spanned UX research, onboarding improvements, and web development, resulting in a more powerful tool that helps development teams quickly identify and address code quality issues across their projects.
TEAM INVOLVED
This innovative platform uses data analysis and machine learning to provide deep insights into software projects, distinguishing itself from traditional tools by focusing on the health, complexity, and evolution of code. It helps companies improve the state of their code and build maintainable systems.
The focus
Project overview
Our mission was to revolutionize software analytics for CodeScene, focusing on enhancing actionable insights for development teams.
This mission unfolded through a targeted project with key initiatives.
Tools like Hotjar and Amplitude, along with guided product tours via Userpilot, informed our redesign efforts and product evolution. We used insights gained through research to redesign and improve key user flows that also correlate with product growth.
CodeScene provides a lot of great insights and data to companies that want to improve the quality of their software. Our goal was to make that information more easily accessible, while building and maintaining a consistent UI Kit and look & feel for the software.
Let's take you through a short version of the journey.
Here’s how it all started...
So we started exploring and trying to understand the most pressing pain-points, understanding customers and what a quality code analysis meant for them and their team performance.
True partnership built on trust
Engagement objectives
CodeScene wanted to improve the look and feel of their product, reduce the time it takes users to complete tasks, reduce UI complexity and provide an intuitive experience for the user. This project called for a deeply collaborative process based on a highly embedded agency-client partnership extending beyond the traditional boundaries of service delivery. This type of engagement set the stage for success as it enabled Motiff to gain deep knowledge about the product and gave a sense of ownership over delivering great user experiences.
A win-win relationship built on trust
Open and consistent communication with CodeScene's Product, Marketing, Data, Development and QA teams, helped us gain a deep understanding of end user needs. This positioned us to be able to deliver meaningful solutions. Our team lead the broader user experience while closely consulting with CodeScene’s in-house team. As the project progressed, we were given the opportunity to be part of CodeScene’s Growth Team and help improve and automate some internal processes.
Challenges
From knowledge accumulation to design complexities, we embraced each challenge as a chance to push boundaries and deliver impactful solutions.
Highly technical product
CodeScene is a highly technical and specialized product designed for engineering teams. In order to bring value through design, our team first needed to understand how the product works.
Managing user feedback
It was important to balance user needs and preferences with business objectives and technical feasibility.
Legacy constraints
Our job was to introduce improvements to an already great product that offered great insights to engineering teams. The existing infrastructure required us to investigate every existing flow prior to redesign and to take careful considerations to ensure compatibility and a smooth transition.
Presenting complex data in a simple way
One of CodeScene’s main differentiators is that it is a highly visual product. It allows engineering teams to visualize their codebase in terms of the actual code as well as the people behind it. One of the challenges was making these visuals more intuitive and simple to reduce the cognitive load for its users and help them effectively drive conclusions.
Specific user personas
CodeScene’s users are highly technical and sophisticated. To emphatize with these users, it meant going beyond the surface to understand their underlying motivations, concerns, needs and the extended environment they operate in. This required lots of analysis, behavioral observations and an understanding of the development process, tool stack and team dynamics.
What we delivered
Solutions
We focused on enhancing the platform's functionality and usability while giving CodeScene the presentation it deserved. Our efforts spanned from comprehensive website design and development, redesign of key user flows inside the product, integration of third-party tools to both gather user feedback, improve the user experience and automate various workflows. User experience, product growth and scalability was always top of mind.
We placed high focus on redesigning flows with high friction, that also correlate with product growth. To a large extent, design decisions were made and validated through user testing, observation, product data analysis, and keeping open communication with internal development teams as well as client-facing teams within CodeScene.
To be able to add value, our team needed to gain a thorough understanding of this highly technical product and its user personas. We talked to a number of developers and performed UX audits of flows prior to offering solutions.
Finally, a presentation deserving
of the CodeScene product.
Project dashboard
A full redesign of the Project Dashboard offers users a holistic view of their projects with enhanced usability and data visualization.
Reports
Code Health and Team Performance reports were redesigned, making it easier for teams to navigate and derive meaningful insights.
PR review, summary and statistics
CodeScene offers an integration with GitHub, BitBucket, Azure DevOps or GitLab pull requests to provide feedback to developers before merging code. It was important to make those insights easy to review and act on and to see PR statistics on the analysis dashboard.
IDE AI assistant
An IDE AI Assistant was introduced to enhance developer productivity and code quality. We helped CodeScene prototype an MVP of this AI powered assistant.
Onboarding and sign-up
For onboarding, we introduced a guided tour using a Demo Project. This allowed new users to walk through the core features and functionalities, making it easier to get started and discover the value of CodeScene.
Additionally, we worked on improving the signup process, simplifying registration steps and providing clear instructions to minimize friction and improve completion rates.
Project overview page
CodeScene wanted to provide an easy-to-grasp overview of all projects, to help it’s users easily identify projects in need of attention and those that are performing well.
A few iterations later, the result was a high level overview of the entire software portfolio, positioning projects in green (healthy), orange (attention) and red (risky) zones based on their CodeHealth, Knowledge Distribution, Team-Code Alignment and Delivery. Users can also view a summary of the trends for each project individually.
