Design System for JoVE Site
Type: Teamwork
Deliveries: Prototype of the app, presentation.
Method: Whiteboarding, Agile+Scrum Meeting, Cross-functional Team Meeting
Tool：Figma, Sketch, InVision DSM, Jira
Timeline: Jan.2020 - March. 2020; Feb. 2021 - March. 2021
SITUATION
Redesigning the JoVE company's website.
GOAL
QUICK NOTE ABOUT JOVE
The Journal of Visualized Experiments (styled JoVE) is a peer-reviewed scientific journal that publishes experimental methods in video format. The journal is based in Cambridge, MA and was established in December 2006.
JoVE covers research methods and experimental techniques from both the physical and life sciences. The journal currently has 13 sections: Biology, Developmental Biology, Neuroscience, Immunology and Infection, Medicine, Bioengineering, Engineering, Chemistry, Behavior, Environment, Biochemistry, Cancer Research, and Genetics.
MY ROLE
Arranged Whiteboarding meeting
Designed the interface and interaction
Collectied and organized the Design System
Interactive Prototype Design
Present the Desgin System's function
Made sure every team member on the same page
TOOLS
Whiteboard
Sketch
InVision DSM
Jira
Figma
HOW CAN WE ORGANIZED
Obviously, what kind of classification method should be used is a significant point here.
In order to keep the Design System consistance, organized, easy to understand, and simplicity, we decided to learn from the Atomic Design Systems as a reference, and adjust it to our own design system.
AND CHANGED TO OUR OWN STYLE
Here's what we adjusted for our own design system.
GLOBAL
Global means it affects the whole website.
This session includes Typography, Color, and Icons.
Typography
Color
Icons
ATOMS
Atoms session collect the single design element which is fairly abstract and often not terribly useful on their own. Applied to web interfaces, Atoms are our HTML tags, such as a form label, an input, or a button.
This session includes Buttons, Dropdown boxes, and Label.
Buttons
Dropdown
Label
MOLECULES
Molecules = Atom + Atom ( + Atom +......)
Molecules are groups of Atoms bonded together and are the smallest fundamental units of a compound.
This session includes Input Box, Video Card, Profile Card.
Inputs
Video Card
Profile Card
ORGANISMS
Organisms = Molecules + Molecules ( + Molecules +......)
Organisms are groups of Molecules joined together to form a relatively complex, distinct section of an interface. Organisms can consist of similar and/or different molecule types.
This session includes Banner, Form, Sidebar, Header, Sub-header, Footer, Segment Control, and Breadcrumbs.
Banner
Form
Sidebar
Header
Sub Header
Footer
Breadcrumbs
Segment Control
NEW CHANGES
I DID
With the new tendency pops up, I wanted to use the new trend in the design. For example, the Frosted Glass Design and Gradient color become more and more popular today, so I decided to combine them into the updated Design System.
Instead of a heavy drop shadow or Neumorphism design, I kept the main color palette and combined the Frosted Glass Design and Gradient color into the primary blue button, light blue button, dropdown boxes, and the label's interface.
According to the Input Box, I added two more elements: Checkbox and Radio button to enrich the choosing options.
Fixed the color of banner to match the main color palett.
And also changed the action button into the Frosted Grass Design style.
Ensuring the pixals of padding.
Replacing the dark green background of the sidebar menu, I kept using the Gradient Color style for a silky look.
Adding a sub header for the dark background.
Comparing with the old design, I changed all the button design to the Frosted Grass plus Gradient color style.
For Segment Control, I added an under-blue-line to highlight the active selection. And also created a vertical version for the smaller screen size (eg. mobile device).
