Productivity App Design System

Module: UI / Product Design | Level: Medium | Estimated Time: 2-3 days
Skills: UI Patterns, Visual Design, Branding


Design systems define the visual building blocks of your product: how components look, feel, and should be used. With a strong design system, you can quickly and easily prototype new pages and features while keeping the UI perfectly consistent. In this app, you’ll create a design system focused on UI components for a productivity app (e.g., to-do list, appointment manager).

Begin by brainstorming how people use this product. What are its main features and design patterns? What do the user flows look like? From there, you can identify UI components that appear throughout the app. Note that your kit doesn’t need to contain every visual element of your app—just the major components that will be used again and again.

Be sure to cover:

  • Typographic scales
  • Color palettes
  • Icons, buttons, checkboxes, and other assets
  • Input elements (e.g., text fields, datepickers)

If appropriate, you might also include additional components: notifications, alerts, tool tips, dropdown menus, progress bars, lists, etc.

Lastly, your kit should also include at least three UI layouts for specific screens, such as “New Reminder,” “Daily Task Overview,” “Set Goal,” or whatever else you like.


Create a graphic, PDF, or web-based design system that shows all the UI elements used in a productivity app. You can create your own fictional app or redesign an existing one.

Get Credit

  • Upload the finished project to your Skillshare portfolio.

  • Write a blurb explaining your design approach and points of feedback you’d like to receive.

  • Add the link to your project to this Project Signup Sheet. We highly recommend linking to your project in Telegram too.

  • Give feedback on another student’s project.


Helpful Articles
Basic Design Resources
Skillshare Classes

results matching ""

    No results matching ""