Safiyo
Helping businesses in emerging markets generate insights 4x faster at Safiyo
This new dashboard design gave more value to clients that Uber increased its SLA budget from $40k to $250k quarterly, Diageo purchased it in 3 more countries. Why? Clients reported a 47% improvement in their ability to identify actionable insights. The intuitive design and customizable filters allowed user to generate insights 3 times faster than with the previous iteration.
Overview
Safiyo is a B2B SaaS market research tool tailored to help businesses collect, analyze, and visualize consumer data across Africa and other emerging markets. With major clients such as Uber, Kellogg, Diageo, ABinBev, and Spotify, Safiyo enables companies to make data-driven decisions that power their market strategies. As the Lead Product Designer, I was tasked with designing a data visualization dashboard that empowers businesses to transform complex datasets into actionable consumer insights.
Problem
Businesses using Safiyo face the challenge of making sense of vast amounts of data coming from multiple sources—surveys, customer feedback, transactional data, and social media. The existing dashboard lacked intuitive design and flexibility, making it difficult for users to tailor visualizations to their unique needs. Users also struggled with interpreting insights, leading to missed opportunities to drive strategy.
Objectives
The goal was to create a flexible, intuitive, and robust data visualization dashboard that enables users to:
- Analyze consumer data with ease.
- Customize charts and graphs for their specific business questions.
- Extract meaningful insights quickly and accurately.
Additionally, the design needed to accommodate various chart formats, ranging from line graphs to heat maps, in order to meet the diverse needs of our users.
Design Approach
1. User Research & Pain Points
We conducted several rounds of user interview for 3 existing B2B clients for before and after design iterations, the findings are compared against session replays using Hotjar and first click tests with 7 particpants. We deduced the following pain points:
- Complexity in customization: Users found it difficult to configure charts for their specific data needs.
- Lack of clarity in data presentation: The existing charts didn’t effectively convey insights, especially with larger datasets.
- Limited visualization options: Users wanted more flexibility to choose between different chart formats to answer different business questions.
These findings highlighted the need for a scalable design system that could offer both flexibility and simplicity in presenting data.
Before
The previous dashboard design: Users complained that they could not filter by date, lack of user education on what the charts represent , users also reported difficulty in filtering large data sets.
2. Design System For Data Visualisation
Creating a robust design system became the backbone of the project. The design system ensured:
- Consistency: Users could switch between different charts (bar, line, pie, scatter, etc.) without losing the visual and functional consistency.
- Scalability: The system could easily accommodate future additions of new chart types and features without needing an overhaul.
- Customization: Each chart type could be customized with filters, data ranges, and formats to align with user preferences and data-specific needs.
Key Components of the Design System:
Data visualisation components: After consulting with research stakeholders I developed a reusable component library that includes: 35 unique charts, stats cards, filters, date pickers, dashboard layouts, color charts by hierachy of use, Tabs, Annotations and tooltips. These were shared with developers using Storybook and AM Charts library
- Modular Chart Components: Each type of chart (e.g., bar charts, heatmaps, line graphs) was created as a reusable component, ensuring flexibility and consistency across the platform.
- Color Palettes and Themes: We designed adaptive color schemes to make sure the charts were accessible for users with visual impairments and readable even when datasets grew large.
- Tooltips and Legends: Detailed yet unobtrusive tooltips and legends were incorporated to help users interpret their data quickly without cluttering the interface.
- Dynamic Layouts: We designed dynamic layouts that allowed charts to be resized, combined, or compared side by side, offering full control over how users interact with multiple datasets.
3. User Flow and Interactions
We focused heavily on simplifying the user flow. Users could:
- Upload or Import Data: The system allowed for seamless integration with existing data sources.
- Filter and Customize: Users could filter their data by demographics, time, or geography, and apply it to different charts.
- Visualize: They could choose from various chart formats and further customize the visualization.
- Export and Share: Visualized data could be exported in multiple formats (PDF, Excel, etc.) for reporting and presentations.
4. Usability Testing and Iterations
Once the first version of the dashboard was developed, we conducted usability testing with existing Safiyo clients. Their feedback led to several improvements:
- Interactive Zooming: Users needed to zoom in and focus on specific data points within larger datasets.
- Customization of Axes: Users requested more control over the axes to make the charts even more tailored to their use cases.
- Preset Templates: To save time, we introduced customizable chart templates based on common use cases such as sales performance, consumer demographics, and market segmentation.
Results
The redesigned data visualization dashboard was a game changer for Safiyo users. It improved not only the visual appeal of data but also the ease of extracting insights. Key results includes:
- Increased user engagement: Users spent 35% more time on the dashboard, exploring and interacting with the data.
- Improved decision-making: Clients reported a 40% improvement in their ability to identify key trends and actionable insights.
- Reduction in support requests: There was a significant drop in user complaints regarding data interpretation and chart customization.
- Reduction in analysis time: The intuitive design and customizable filters allowed users to generate insights 50% faster than with the previous iteration.
- 4x faster dashboard implementation: This helped the team to roll out more data visualisation for new businesses 4 times faster than before
Short description
Short description
Short description
Short description
Short description
Conclusion
The Data Visualization Dashboard at Safiyo empowered businesses with a more intuitive way to analyze complex data for consumer intelligence. The robust design system that underpinned the project ensured that Safiyo could scale its features to meet the evolving needs of its clients, while delivering a flexible, user-friendly interface. This case study showcases how thoughtful product design—driven by user research and a scalable design system—can turn a complex challenge into a powerful tool for business growth.