JoVE Design System
A Design System is a comprehensive collection of reusable components, guidelines, and standards that help teams design and develop products consistently and efficiently. It serves as a single source of truth for design and development, ensuring brand cohesion, usability, and scalability across digital products.
What is Design System?
Client
Journal of Visualized Experiments
My Role
UI/UX Designer
Duration
3 Months
Goal
To drive consistency in all Jove applications.
Start with the basic design system and make it mature and robust.
Bridge gaps between designers, developers, PMs, and stakeholders with shared documentation.
Ensure Accessibility & Inclusivity
Project Overview
JoVE team was just working on a project called JoVE Quiz version 2, which I was a part of. My task was to enhance the interfaces with consistent design language that matches with their brand and to provide a cohesive and better user experience. So a design system for the JoVE application was much needed.
My Role
Lead and create the design system
Create reusable UI components in Figma
Collaborate with the team, review and test
Key Concept
Used Atomic Design methodology introduced by Brad Frost to build the design system
ATOM
MOLECULE
ORGANISM
TEMPLATES
PAGES
The Structure
Started designing basic atoms of our design system, like colors, typography, and spacing. Combining these atoms together to form molecules like buttons, form fields etc.
Buttons
The button component is probably the most widely used element in any user interface or website.
Forms & Dropdowns
Forms and dropdown select list are critical components in design systems that facilitate user input and data collection.
Filters
Filters allow users to focus on specific subsets of data based on selected criteria. By reducing the amount of information displayed, filters make it easier for users to find what they need.
Navigations
Navigation in UI refers to the system that allows users to move through an application or website, find content, and complete tasks efficiently. Effective navigation ensures users can easily understand where they are, where they can go, and how to return to previous steps.
Cards
Cards are surfaces that group related content into a compact, visually distinct container.
Quiz Block
UI blocks specially designed for JoVE Quiz to add questions and add multiselect options.
Video Player
Video player UI components to ensure smooth playback, controls, and user engagement.
Graphs and Tables
Graph and Tables for data visualization and structured information presentation.
Toast
An UI element that provides brief, contextual feedback about an action or system status.
Page
Example of a page designed using the predefined reusable components.
