Design Team: UX Research, Developers, Design Lead
Tools: Figma
2022
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.
Develop a structured iconography system with clear visual distinctions to enhance usability and comprehension. Establish a design system with a defined hierarchy and guidelines to ensure consistency across all platforms.
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.
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.
I worked as a UX/UI Designer specializing in iconography as part of the design team responsible for redesigning the icons design system.
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.
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.
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:
- 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.
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 bright backgrounds, making them the preferred choice for key interactions.
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
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.