Stears set out to create Nigeria’s first real-time, interactive election results database for the 2023 general elections. With no local precedent to draw from, the goal was to build a product that could deliver accurate, verified results to millions of Nigerians to make them understandable, accessible, and engaging on both web and mobile.
As lead product designer, I was responsible for the end-to-end design of the product, from research and ideation through to high-fidelity prototypes and developer handoff.
Role
Visual + UI/UX Designer
Industry
Data and Insights
Team
Victor Enesi, Head of Design. Hannah Kate, PM. Abeeb Oladele, Full-stack Mobile Dev. Bode Ogunlana, CTO.
Tldr: The problem and solution
During high-stakes elections, voters, journalists, and analysts need quick, reliable access to real-time race information. However, the existing tools for following Nigerian elections were fragmented, difficult to navigate, and often lacked personalisation. Users had to sift through cluttered pages or unreliable sources to track races, candidates, and results.
I designed a responsive, component-based election platform for Stears that put clarity and personalisation at the forefront. The result was a fast, intuitive, and trustworthy election hub that supported thousands of daily active users, reduced navigation time by an estimated 40%, and kept audiences engaged throughout election week. As well, as positive feedback from journalists, analysts, and voters citing the platform’s clarity and ease of use.
Discovery & research
Starting off with problem discovery, I conducted competitive analysis of global election coverage platforms to identify best practices in data visualisation, navigation, and interactivity.
I interviewed journalists, politically engaged citizens, and civil society groups to understand needs, behaviours, and device preferences. Collaborated closely with Stears’ data team to understand how results would be collected, verified, and updated in real time.
Defining design principles
Before jumping into design, I worked with my product manager and data research team to clearly define what the Stears Election experience needed to achieve, both functionally and experientially.
These requirements and principles became the foundation for wireframes, component design, and the overall UX strategy, ensuring every decision aligned with the platform’s mission to deliver transparent and accessible election coverage.
Prioritise the most relevant election information at each stage of the user journey. Make key results and trends instantly understandable.
Optimise for quick loading, even in low-data environments. Present numbers in a way that is not just accurate, but easy to interpret.
Reinforce credibility with clear sourcing, visual hierarchy, and consistent UI patterns.
Wireframing & prototyping
I created a series of low and mid-fidelity wireframes to explore how the election data, filtering tools, and navigation features could work together in a way that felt intuitive and scalable.
Early wireframes helped the team align on functionality and data presentation before visual design began, reducing rework during the high-fidelity and component-building stages.
Design components
A consistent and reusable design language was critical for the Stears Election platform. I developed a suite of modular components that ensured scalability, visual consistency, and faster development cycles while accommodating the platform’s dynamic election data.
◆ Election race table: Displays all election categories (e.g., Presidential, Senate, House of Reps) with corresponding dates and countdown timers. Supports multiple date formats and states (upcoming, active, completed).
◆ Follow race modal: Enables users to subscribe to specific races (e.g., Governorship, House of Reps). Designed for quick selection with minimal input friction.
◆ Results card: Displays vote counts in a clear, comparable format with party colour coding. Includes a visual progress indicator for quick result scanning.
◆ Candidate list: Shows candidate details including name, party, gender, and political affiliation tag. Supports both condensed (list) and expanded (detailed view) layouts.
Homepage and interactive map
The election website was designed as a live dashboard, surfacing the most important election updates at a glance. It included top-line results, quick navigation to key races, and a prominent opt-in for live updates.
A colour-coded, clickable map of Nigeria showing state-by-state vote tallies was crafted. Users could zoom in, filter by candidate or party, and see results update in real time.
Predictive search feature
The predictive search in Stears Election was designed to help users find candidates, constituencies, and races within seconds, even with partial names or locations. As users type, it instantly surfaces keyword-based suggestions, recent search history for quick re-access, and context-rich results that combine election history with related articles.
This streamlined flow not only reduces typing effort, but also keeps users engaged by providing background information upfront. If a result links to premium content, the experience transitions smoothly into a sign-up or login screen without losing the search state, ensuring both free and subscribed users can navigate seamlessly.
Election alerts and notifications
I designed an alerts and notifications system to keep users informed during critical moments without overwhelming them. Users could follow specific races and receive timely updates on vote counts, lead changes, and final results, as well as breaking news on national developments.
Notifications were clear, concise, and actionable, linking directly to detailed results pages, and were delivered both in-app and via mobile push. A preferences option allowed users to control which races or events triggered alerts, ensuring relevance and preventing notification fatigue.
Comprehensive user testing and insights
Usability testings that spanned over weeks were scheduled with 14 users that signed up to participate in the product test. The goal of the tests was to validate the designs as addressing the users needs and helping them achieve their goals.
The test strategies used were Click Test to check that the user makes a first click to carry out a task in an easy way, 5 Seconds Click Test to gauge user’s first impressions on pages within the designs and Task Execution to see if the users could carry out specific tasks on the prototypes successfully.
Task success and critical error rate.
Time to view results.
Navigation depth and backtracks.
Component comprehension, labels and iconography.
Perceived clarity and trust, short Likert scales.
Remote moderated sessions, 30 minutes each, using mid and high-fidelity Figma prototypes.
Task-based evaluation with think-aloud, followed by short SUS and a 3-question post-test survey.
Unmoderated click tests to validate navigation labels at scale.
Color contrast verified to WCAG AA.
Tap targets set to 44 px minimum.
Screen reader labels added for results, for example “APC, 52 percent, leading.”
Focus order reviewed for keyboard navigation.
Key findings and changes
Race discovery: Users hesitated between “Races” and “Results.” Change: Consolidated into a single “Races & Results” entry with a persistent filter bar.
Follow action: Some expected the follow control near the race title, not at the bottom. Change: Moved the control to the header, added a confirmation toast and a “Following” tab.
Results legibility on mobile: Dense rows caused pinch-zooming. Change: Introduced a compact row variant with progressive disclosure for long fields.
Party color reliance: Color-only cues failed accessibility checks. Change: Added badges with text labels and patterns to meet contrast and non-color cues.
State vs district filters: Users were uncertain about hierarchy. Change: Added breadcrumbs and an “All States” reset, renamed filters to “State” and “Constituency.”
Handover and app launch
Once designs were finalised and validated through usability testing, I prepared a design handover to ensure a smooth transition into development. All components, layouts, and interaction states were documented in Figma with clear naming conventions, responsive variants, and developer annotations. I also provided usage guidelines for complex elements like predictive search, results tables, and the race-following feature to minimise ambiguity during implementation.
To support launch readiness, I worked closely with engineers during sprint reviews, resolving edge cases and adapting designs where technical constraints emerged. I also participated in QA sessions to check build quality against the design system, ensuring visual consistency and functional accuracy across devices.
The app launched ahead of the 2023 Nigerian general elections, handling thousands of concurrent users at peak traffic without major UI or UX issues. Early feedback from journalists, analysts, and voters praised its clarity, speed, and ease of navigation, confirming that the collaborative build and handover process had delivered a reliable and impactful election tool.