Zepl Front End UI/UX Renewal Project

Background

Before, Zepl doesn’t had a designer and there’s no rule for the UI/UX guideline.

I teamed up with one designer and do the UI/UX renewal with building a reusable components and setting up design guidelines.

Participants: Yurim(Front End Engineer), Youngjin(Designer)
Project Period: 2018.06~2019.02
URL: https://www.zepl.com/

Before

Has no consistency on Font hierarchy, margins, the way to show the datasets.

After (Components that I made)

Overall app behavior

Carousel, Dropdown with Skeleton loading indicator

Modal with searchable dropdown components

Filterable/Sortable/Searchable Table with Pin feature

Item box and Overlay with micro interactions

Clickable list and Pagination

Collapsible with Real-time Graphs and Table

Outline sidebar with search feature

Create-able Select box which supports Validation, Copy/Paste from Excel sheet

Code snippets