System Icons for Problem Roulette

As a UX Design Intern at the Center for Academic Innovation, I played a role in updated the design system for Problem Roulette. My contributions included creating a new icon style for the platform.

Skills

Visual Design,
Icon Design,
Design System

Team

Solo Project

Context

Internship Project

Timeline

Feb. 2019 - Mar. 2019

The problem

Problem Roulette is an exam preparation tool to help students study by practicing questions from previous exams. Since 2017, the tool has served more than 7 million problems to more than 20k students across 13 courses.

As the platform matured, so did its brand. But, the icon style hadn't been updated since its initial launch two years ago. These icons no longer fit in with the platform's brand visually nor were the conveying the right functionally.

Problem Roulette's Brand

My first step was to understand Problem Roulette's brand to inform my design direction. The platform's branding consists of soft colors and playful visuals and illustrations for an overall approachable and inviting feel. By establishing a brand that is lively, Problem Roulette communicates to students that practicing problems doesn’t have to be an arduous task.

Current Icons

Considering Problem Roulette's overall brand, the current set of icons used in the interface don’t fit in visually nor do they communicate the platform's message well. Visually, this set of icons relies more heavily on straighter, sharper shapes and edges. This comes in a stark contrast to the softer, more rounded visual design language used in Problem Roulette’s interface.

Redesign goals

I began by laying out my goals for this redesign. I began by evaluating Problem Roulette's brand and digging deeper into the values it aimed to communicate.

1. Usability

Designing icons that improve usability of the tool by communicating appropriate functionality.

2. Communication

Communicate Problem Roulette's brand values more effectively through icons
.

3. Scalability

Create a scalable icon system and style that the design team can add to.

4. Branding

Creating an icon style that matches Problem Roulette's aesthetic.

Design, Test, and Refine

My initial idea was to use the shapes in Problem Roulette's logo as an underlying guide to build my icons on. I hoped to create icons that mimicked the logo to create a consistent visual identity throughout the interface.

The feedback on this initial exploration was that the icons were far too detailed and weren't shedding the dark and bulky feel of the original icon set. I took this as an opportunity to explore other illustration styles and decided to play around more with the opacity and line thickness. After multiple iterations and feedback, I settled on two icon styles to test with users.

Top to bottom: Original icons, Icons style 1, Icons style 2

Developing both sets to test in the interface. Top: Style 2, Bottom: Style 1

Final Design Style

After multiple rounds of testing the icons in the PR interface and with users, I decided to stick with Style 2 for its simplicity. Having less details graphics and no use of fill meant that the intended shapes translated more clearly in context. In this case, form dictated function and I prioritized my styles accordingly.

Reflection

Icon design occupies a a unique space at the intersection of visual design and UX design. This project came with its own set of visual design and usability challenges that I had the opportunity to navigate. This project also served as a great reminder of the value of testing designs. The scale at which I was designing my icons was not the scale they were going to be implemented at. It was crucial that at every iteration, I took a step back to test and evaluate my design direction.