Unlocking the full potential of the Umano product — from design to development

Transforming insights into the impact

Clear interfaces are crucial for user acceptance across any product. Recognizing that visual representation aids comprehension, we prioritized integrating clear, informative tables and graphs without visual noise.

Due to the platform’s feature-rich nature, our focus was on intuitive navigation. Detailed toolkit and settings capabilities became key elements in achieving this, ensuring users could easily access and utilize the vast functions.

Innovative design approaches

Inspired by a well-organized folder, our first concept features clean lines and gradients, enhancing visual focus and clarity. With this variation, we offered streamlined application functionality without clutter.

Once most of the app’s functionality was complete, we created the second concept with wireframes for new features. Here, we used a clean white backdrop and kept visual noise to a minimum, emphasizing the elegance of the interface.

{{slider-1}}

User experience designed for agility

Our goal was to give Umano a unique look and feel that pleases the eye. For this, we worked on gradients, applying them to the main page background while keeping other areas clean and minimalistic.

To help users see their high and low efficiency areas, we added clickable items with dynamics figures in the metrics blocks. For better data viewing, we rebuilt tables and charts in a clear layout without distracting elements.

We wanted a design that wouldn’t overwhelm users with data. Clear visuals with data became key — like a cheat sheet for peak performance.
{{dana-l}}

Implementing new features

In fruitful collaboration with the client, we added new features to his product. We developed the Project Overview page, where users can add or edit their projects. Next, we combined it with the Metric page of graphs and tables.

To enable teams to analyze and discuss the work progress in one place, we created pages such as the Active Cycle and Macro Cycle. These cover Scrum and Kanban iterations and also help teams plan their steps in the perspective.

We amplified the platform with program-generated tips, making it easier for teams to analyze how to improve their results and future projects
{{dana-l}}

Revamping the platform with innovations

The product was initially hosted on AngularJS, but for more flexibility, we migrated it into React. To make further decisions on the function’s usefulness, our team took the PoC approach, testing features online by real users.

While preserving key functions, we also added custom solutions. Our developers displayed AngularJS and React projects in one application to exchange data between them, using a method for state synchronization.

Our custom solution, such as app-wide synchronization of AngularJS with React, helped ensure a smooth integration of new features.
{{aleksandr-t}}

Ensuring flawless functionality

We kicked off QA with Static and UI/UX Testing — scouring specs and ensuring every pixel and interaction matched design intents across devices. To automate testing and ease workloads, we used MSW, Jest, and Testing Library tools.

Then, our team tackled Functional, Non-Functional, and Regression Testing, verifying that every feature performed perfectly. With testing docs, we kept our process clear and on track, ensuring no bugs made it through the net.

Unfolding features release by release

For the initial release, we launched what the client had, blending old and new designs. It was tricky as we juggled between two frameworks, keeping Angular and React versions linked by a web of redirects until all was ready.

With each release, we added core features like Tracker, Planner, and Reviewer in Active Cycle, Team Vibe with polls, and Macro Cycle with its toolset. This established a solid foundation for future enhancements.