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

ZEPL(Apache Zeppelin) 노트북 Ultimate Chart Parameter별 안내

 

Chart name	Category	Option
Ultimate line chart	Charts	line(shared)
		dashed(shared)
		step(shared)
		no-group
	Available Columns	xAxis
		yAxis
		Category
	Parameters	bulletType
		bulletSize
		hideBulletsCount
		yAxisValueFormat
		yAxisValuePrecision
		yAxisValueInside
		showXAxisScroll
		showYAxisScroll
		chartMarginLeft
		chartMarginRight
		showLegend
		legendValueText
		legendPosition
		xAxisPosition
		yAxisPosition
		rotateXAxisLabel
		rotateYAxisLabel
		balloonText
		balloonType
		yAxisGuides
		trendLines
		mainTitle
		subTitle
		xAxisName
		yAxisName
		xAxisUnit
		yAxisUnit
		logarithmicYAxis
		inverted
		graphType
		dateFormat
		dashLength