Projects

01 Design System
02 Reactions Menu
03 Shoulder Tap
04 Verizon Console
05 NYRR Marathon App

Selected Clients:
NYRR (NY Road Runners), Verizon, Teradata




Resume


2023 - Present
2022 - 2023
TCS Interactive
oVice
DESIGN SYSTEM

Streamlining the creation of user-friendly and visually harmonious experiences


oVice is a SaaS Startup in virtual workplace 📍 Korea & Japan

Atomic Design Methodology

formulated by Brad Frost, is a methodology aimed at offering guidance for the intentional construction of interface design systems, emphasizing explicit order and hierarchy.

Atoms
like those in Chemistry, are the basic building blocks in our system. In design, they encompass buttons, inputs, labels, and other small elements used consistently throughout our framework.
Molecules
are formed through the combination of multiple atoms, each retaining its unique properties within the group, resulting in distinct characteristics for the collective unit.
Organisms
As we enter the Organisms stage, our collections of atoms and molecules now become more complex than at the molecular level.

ATOMS

TYPOGRAPHY
is a crucial part of our visual language for user communication, alongside elements like color and form. It sets mood, tone, and product perception. We've integrated English, Korean, and Japanese, reflecting our global clientele.

English
Noto Sans
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
1 2 3 4 5 6 7 8 9
Korean
Noto Sans Kr
가나다라마바사아자차카타파하
1 2 3 4 5 6 7 8 9
Japanese
Noto Sans JP
あかさたなはまやらわをん
1 2 3 4 5 6 7 8 9

COLOR

you choose can mirror your brand's personality, drawing in users and enhancing the communication of your message. Most UI design guidelines emphasize the significance of colors, as they have the ability to establish the fundamental mood, tone, concept, and connotation for a brand or product.




Shadows
contribute to the overall cohesiveness, flexibility, and usability of the interface by providing a standardized way to handle depth and visual hierarchy within and between components.
Icons
are visual representations or symbols denoting specific actions or tools within an interface. oVice incorporates a family of icons available in three different sizes.



MOLECULES

BUTTON
typically designed as styled links, aim to capture users' attention and guide them in a specific direction. Buttons enable the linking to other pages or the completion of tasks, such as form submissions or online purchases.
Small
Medium
Large




FORMS
enable users to input text into a user interface, commonly appearing in forms and dialogs. The design of text field components should ensure a clear affordance for interaction, enhancing their discoverability in layouts, efficiency in filling them out, and accessibility.

Passwords
Search
Textarea
Textfield
Selection
Pagination
Tabs


NOTIFICATION
inform users of a process that an app has performed or will perform. It indicates brief, informative message that appears when a user interacts with an element in a graphical user interface


Toast Bar
Snack Bar
Tooltip / Popover

DATE & TIME
The Date/Time picker is used with the Selectbox/Dropdown menu.
Displays for users to select a date and time and the picker is displayed when the dropdown is clicked.




ORGANISMS

LEFT MENU & LAYOUT/GRID
The left menu helps users orient themselves within the application and provides quick access to various functionalities without cluttering the main content area. Grid systems aid in creating visually appealing and consistent layouts across different screen sizes and devices, enhancing the overall user experience.






TEMPLATES
ensure that different sections or pages of an application or website maintain a consistent look and feel. By using predefined templates, designers can adhere to established design standards and guidelines, resulting in a cohesive user experience.