Liz Reddinger
Liz Reddinger
Recur.png

Recur

 
 
 

Design System & Identity for Recur

Recur.png

The Project

Recur is the companion app for Buildschool students learning to code. As a backend-focused team, Buildschool needed something sustainable and accessible for future web and mobile apps. Developing a foundation for a design system would help lift design tasks from the overloaded team, and Recur would be its’ perfect starting point. As Buildschool grows, the system would also evolve, and nix page-by-page processes for component libraries and consistent experiences. I’m fascinated by systems thinking and the limitations of styleguides, so I was excited to take on the visual elements of the design system.

App Icon and Accessibility

recurapp.png

Developing a visual system from scratch is a pretty daunting task. I started with the app icon and developing an accessible color palette. By reimagining the company’s owl logo into a “behind the scenes” blueprint view, it complimented the work previously done for the illustration assets. I referenced the WCAG (Web Content Accessibility Guidelines) to pair these light and dark-background rules.

Components, Icons, and Typography

Screen Shot 2019-03-03 at 3.23.30 PM.png

Applying the color guidelines into actionable components and icons, I was able to get an idea for how things would start to look. Working from the branding, I created an icon set of owls, feathers, shields, and basic programming languages for the courses. I worked with the founder to divide the components into primary action buttons, secondary buttons, buttons with icons, inputs, inline links, and floating icons. Dialogue boxes also had their own states for correct, incorrect, and incomplete answers.

Redlines and Course Activities

Webp.net-gifmaker (1).gif

Course activities are a core part of the Recur app. I created a basic redline file that would cover basic yes/no, multiple choice, free response, and limited response activities. The redlines were taken into InVision for staging and organization, and allowed room for the course creators to focus on the content itself.

Standardizing the positions for headers, padding, action buttons, activity focus, and status indicators isn’t a super complex thing to do, but it gives the team a really simple understanding of what real estate they have to work with.

 

♥ Special thanks to the unstoppable founder, Sophie Zhou Novati.