iOS Design System: Micro-Learning
Mico-Learning: 'Daily Editorial'
MasterClass aimed to test the effectiveness of a short-form, text-based “story” feature within its iOS app to boost daily user engagement compared to traditional long-form video lessons.
I collaborated with product managers, engineers, copywriters, and UX researchers to define a foundational design system within the existing MasterClass app. From there, I led a team of designers in developing 30+ immersive stories using templated cards in a swipeable interface. Each card was custom-designed to reflect the visual identity of its source material—incorporating specific textures, color palettes, and illustrations—for a cohesive and branded user experience.
The test successfully increased daily user engagement and gave MasterClass valuable insights into user behavior, product adaptability, and the return on investment for continued iOS development.
Below are two 'Daily Editorial' samples that demonstrate how graphic design elements were thoughtfully adapted to maintain visual consistency across platforms and channels.
'Daily Editorial' Sample 1: Does Melatonin Actually Work?
On screen graphics.
On screen title card.
Class Guide spread.
Class Guide spread.
"Daily Editorial" Sample 2: How to Decode Real Estate Listings
On screen title card.
On screen graphic.
Class Guide spread.
Class Guide spread.
Micro-Learning: 'Insights'
Building on the success of the Daily Editorial test, we applied key learnings to expand the text-based “story” concept into a more robust and immersive in-app iOS product. The goal was to further increase subscriber engagement beyond the results of the initial test.
Using the same swiping interface, we introduced new card templates and added interactive elements—including quizzes, exercises, infographics, and short video clips. I collaborated closely with the core product team to enhance the UX and developed a bold, brand-forward design language for the product, all on an accelerated timeline. As the project’s art director, I oversaw the execution of all visual assets, including 25 original infographics and 113 commissioned custom illustrations created by four contributing artists.
The test successfully boosted subscriber engagement, and the Insights architecture was later repurposed as a B2B product within the MasterClass at Work portfolio.
The three 'Insights' samples below showcase the unified design language—demonstrating thoughtful use of color theory, composition, layout principles, and scalable typography.
'Insights' Sample 1: How Your Memory Works
Insights: Opener slide, including a brief topic summary and introduction of featured instructors.
Insights: Exercise prompt slide.
Insights: Micro-learning slide, including a commissioned illustration.
Insights: Micro-learning slide, including a commissioned illustration.
'Insights' Sample 2: Food Preperation
Insights: Micro-learning slide, including a commissioned illustration.
Insights: Video automatically previews with blurred overlay, for legibility of instructor specific setup quote.
Insights: Automatically playing video lesson.
Insights: Micro-learning slide, including a commissioned illustration.
'Insights' Sample 3: Happiness Myths
Insights: Section opener slide, including a commissioned illustration.
Insights: Interactive quiz slide. User can select true or false, and will be informed if there selection is correct or incorrect with a pop up module.
Insights: Micro-learning slide, including a commissioned illustration.
Insights: Exercise prompt slide, including an original info-graphic created in-house.
• • •