Overview

SoloLearn is a startup offering free apps that help users learn programming through short lessons, code challenges, and quizzes. The product needed a visual update and a consistent design across Web, Android, and iOS platforms.

Goal

Develop a structured iconography system with clear visual distinctions to enhance usability and comprehension. Establish a design system with defined hierarchy and guidelines to ensure consistency across all platforms.

Problem

The existing icons did not effectively convey their intended actions, making it difficult for users to navigate the interface. Additionally, some icons were reused for different functions, causing confusion and inconsistency in the user experience.

Solution

A new iconography system was designed to improve clarity, consistency, and usability across SoloLearn’s platforms. Icons were categorized based on function, ensuring distinct visuals for different actions. A structured grid system and scalable design approach were implemented to maintain consistency across devices. Usability testing and A/B testing guided refinements, resulting in an intuitive and cohesive visual language that enhances navigation and user experience.

My Role in Solving the Problem

I worked as a UX/UI Designer specializing in iconography as part of the design team responsible for redesigning the icons design system.

My role involved auditing all existing icons across the apps, identifying inconsistencies, and mapping out the current icon set. I conducted research to define a clearer, more functional iconography system that aligned with usability best practices and the overall design vision.

Research

I developed two research proposals covering both secondary and primary research to gain a comprehensive understanding of user needs. As part of the secondary research, I conducted a market analysis, SWOT analysis, and competitive analysis to evaluate existing solutions.

I explored various apps to identify industry standards in iconography, noting that SoloLearn’s simple interface closely aligned with tools like IBM and Material Design. These insights helped me understand the target audience and refine the visual language for icons.

For primary research, I conducted in-depth qualitative usability tests using UsabilityHub and A/B testing within the app. These tests helped assess which icons were more intuitive and effective for users.

Research Goals:

Understand the market landscape and industry standards
Identify the target audience and their expectations.
Analyze the successes and failures of competing applications (e.g., Duolingo) to refine SoloLearn’s iconography strategy.

Design Phase: Sketching and Exploration

Every design process begins with exploration. My first step was sketching numerous icon variations to experiment with shapes, styles, and structures. Since icons convey universal meanings, the challenge was to create a set that was both familiar and unique to SoloLearn. To achieve this, I explored different aesthetics, including a retro pixelated style inspired by 90s design—a concept that resonated with the team.

One of the biggest challenges was designing icons in Figma. Unlike traditional vector-based tools, Figma is optimized for screen design, which required me to adapt my workflow. This constraint pushed me to explore new techniques, ultimately enhancing my efficiency and deepening my understanding of Figma’s capabilities. For example, designing a heart shape became a particularly interesting challenge in balancing proportions and achieving the right visual impact.

Defining the Grid and Structure

Inspired by IBM’s iconography principles, I focused on consistency in stroke thickness, spacing, and sizing. A key design consideration was the impact of stroke thickness (e.g., IBM’s 1.5px standard) on readability across different screen sizes. This led me to ask critical questions:

Should we create a single universal icon size or multiple sizes for different devices?

Should the icons be outlined or filled for better visibility?

How should spacing and alignment be optimized for clarity?

Organizing the Icon System

To ensure scalability and usability, I categorized the icons into:

Primary Icons: Used in main navigation and high-visibility areas.
Secondary Icons: Smaller icons appearing in pop-ups and secondary actions.
Filled & Outlined Versions: Adapted for different UI backgrounds.
Illustrative Icons: Larger icons integrated into visual storytelling elements.

Phase 2: Refining for Accessibility and Usability

Sharing Screens

Team on Google Meet : Voting

After reviewing user feedback and team votes, I iterated on the designs and narrowed them down to three final versions. Through additional testing, we found that filled icons provided better visibility on brigh backgrounds, making them the preferred choice for key interactions.

Building the Design System

Establishing a design system for the new icons was crucial to maintaining consistency and scalability.

Key guidelines included:

Grid Sizes: 16px and 24px, contained within a 40px bounding box.

Stroke Thickness: 2px for main icons, 3px for navigation icons to enhance visibility.

Corner Radius: A balance of sharp and soft edges (0.5px–1.5px) for a modern aesthetic.

Background Adaptations: Some icons required enclosed shapes for clarity while maintaining the same size constraints.

Final icon set: 16 and 24 pixel

Final icon set: 24 and 40 pixel

Implementation and Documentation

Once the icons were finalized, I worked closely with developers to integrate them into the product. To streamline adoption:

The icons were added to the design library, with a clear naming hierarchy for easy accessibility.

Usage guidelines were documented to help designers and developers maintain consistency.

The new icons were tested in various UI contexts to ensure optimal readability and recognition.