There's an app for that

After A Cloud Guru was acquired by Pluralsight, our team went through some big changes. Not only did we need to start thinking about a combined platform, but our team was also going through attrition, as well as structural and leadership changes. I took charge of the mobile platform, updating the design system and adding several key features to our application.

This project is a summary of the many initiatives, tweaks, and changes brought to mobile after A Cloud Guru's acquisition.

1. Inheriting a design system

It's not uncommon in my work to take over an existing product - in fact, that's probably more common than starting from the ground up (like with my community project). This presents several challenges, mainly with understanding the original structure and intent.

The mobile design system, titled "Skittles", is a off-shoot of A Cloud Guru's "Rainbow" design system used on the web. The decision to work with more than one design system was chosen before my time, and has several downsides including lagging behind Rainbow. Today, I would advocate for a unified design system across products, with few mobile-specific components such as tab bars and action menus. With only one design system, the entire company can contribute to and benefit from a unified library of components and interactions.

This is, in fact, the direct Pluralsight is headed. However, Pluralsight still has specific teams in charge of their own specialized component libraries. For example, a text editor component is not in the main design system, but is managed by the internal tooling team and is not shared with the rest of the team. This leads to duplicate work. Ideally, anyone can contribute to the design system given they go through a designated process to reduce this duplication. For now, though, the systems are separate, and in need of an overhaul.

Taming spaghetti

The design system I inherited was full of old cruft and outdated autolayouts (again, a unified design system is ideal!). Since it was last modified, new features like autolayout changes, variant components, and variables hit Figma. I'm a big fan of efficient systems, so I sought to bring a Sketch-era design system into the latest in best Figma practices.

Convention & configuration

A common term with programming, convention vs. configuration, applies in design systems as well. I reduced the amount of components, simplified the color pallette, and renamed and reorganized symbols. Instead of generating ten shades of every color for just in case we need it, every swatch has a purpose and specific use. Naming is specific in purpose yet generic in type. For example,the color name "High Contrast" is chosen over a concrete name like "Typeface Color". Likewise, shadow names were changed from "1dp", "2dp", "4dp"... to "Low", "Med", and "High". Like a great product, a good design system allows users to intuit correct usage, without needing to look up documentation or previous examples.

Theming

I structured symbols specifically so that light and dark themes could be rapidly produced with little to no manual changes. Every color has an equivalent light and dark version, and both versions are adjacent and easily selectable in the color symbol select menu. A basic plugin could swap themes even more quickly.

Unification

Ideally, all screens across Pluralsight and A Cloud Guru would share the same design system. While progress is being made towards a unified system, it is not yet final. Being said, mobile could be a great way to test design system efficacy and obtain early feedback. Ultimately, the unified system (not the mobile specific one shown here) was not yet ready to be tested at the time I was working on the application.

2. Learning paths

Learning paths are an aggregate of courses aimed at leveling up a specific career path. For example, AWS DevOps will take students who have no prior knowledge, and prepare them with the skills and certifications needed to land an AWS DevOps job. These paths weren't yet available on mobile, which is an obvious issue for a product that certainly requires desktop use at some point, as paths did not appear on mobile for desktop students that started using the app.

Searching with ease and precision

Upgrading the dashboard