USER RESEARCH
UX/UI DESIGN
DESIGN SYSTEM
2021 - 2022
Countly Web App
Product analytics platform for companies who care about privacy
ROLE
User Research
Design System
UX Design
UI Design
TEAM
2 Designers
1 Product Manager
15 Developers
IMPACT
Increased user satisfaction
Improved productivity
Gained competitive advantage
Countly is a plugin-based product analytics platform that helps organizations track their product's performance and user data across all platforms. With its numerous features, it allows users gain in-depth insights and improve their products accordingly.
I joined the team prior to the commencement of the redesign project as a product designer. I was responsible for overseeing the project from its inception to its completion.
Throughout the project, I was actively involved in every phase to ensure that the final product aligned with our design vision.
CHALLENGE
The outdated interface not only made look and feel worse but also created basic usability issues that hindered us from scaling the product with new features that current users demanded. As the product had a complex nature, this meant more work in a tighter deadline with our already limited resources.
PROBLEM
The platform's design hasn't undergone any major design overhauls since its launch 8 years ago. Its outdated user experience has caused a competitive disadvantage, making it unattractive and hard to understand to both current and prospective customers.
GOALS
Create an up-to-date look and feel
Improve usability
Build a scalable information architecture that reduces the cognitive load
Build trust and increase retention
STEP 1: ANALYZE THE CURRENT PLATFORM AND IDENTIFY SCOPE
I started with auditing the existing platform, mapping areas of improvement in terms of usability, functionality, interaction, and visual elements. I also reviewed customer feedback to gain insights into user pain points and expectations.
Once the analysis was complete, I began collecting requirements with our product manager to define the objectives and scope of the project. As Countly did not monitor its users’ activity by policy, I decided to add user interviews to our scope, which was also our next step.
STEP 2: UNDERSTAND USERS AND COMPETITORS
I decided to conduct user interviews to understand our users, since most of them are power users consisting of technical people. This meant user interviews was a fast and efficient method, as our users understand our product better, are more attentive, and have their unique ways of using our product compared to users of other non-technical platforms.
The most critical and surprising finding was that even with their technical background, our users had a hard time understanding the features and functionality because of the information-intensive structure of the platform. This moved reducing cognitive load and informing user to the top of our priority list.
As being outdated caused a competitive disadvantage for us, next item in our scope was conducting a competitive analysis of our three biggest competitors while keeping our findings in mind.
I found out that our competitors also struggle with cognitive overload problem, as all platforms are complex and loaded with information by nature. I wanted to overcome this by making information accessible and readily available when needed creating a leveling field if not a competitive advantage.
STEP 3: IDEATE, DESIGN, COLLABORATE THE SYSTEM
We selected a couple of key screens to work on different patterns at the beginning and began ideating and designing solutions addressing key insights based on our research. First, I created high-fidelity wireframes and some concept designs to determine information architecture, interaction patterns and visual language of the redesign.
Our first iterations were on Sketch, but I suggested continuing with Figma. Even though moving designs to Figma meant extra effort in a time-constrained project, I was sure that it would save us way more in the long run by making collaboration between stakeholders easier and faster.
I created our design system in Figma, which enabled us to work directly with UI components, gaining us even more pace. To increase efficiency even further, I've organized our design system into three parts:
countly-foundations (icons, color, typography etc. to build components)
countly-components (components to create patterns)
countly-plugins (page patterns, complex flows, edge cases)
STEP 4: SHIP THE PRODUCT
Leveraging Figma's advanced capabilities, we significantly enhanced the handover process to development. By the time development began, all of our developers had already reviewed the designs and actively collaborated with us, ensuring alignment from the start.
Once they started developing screens, we helped them with QA, ensuring that everything was working and consistent with the designs.
Streamlined the handover process between design and development, fostering early collaboration and alignment to enhance efficiency and consistency.
Enhanced the platform's usability, enabling effortless navigation across features for a seamless user experience.
Reduced the need for external documentation by 25% by integrating informational guides directly into the product.
Achieved a modern and clean look and feel.