Company

Otten Coffee

Duration

Lifetime

Tools

Figma, Pen and Paper, Notion

Team

Galuh NAP (PD), Ovinsyah (Front End Developer), Agus (Android Developer), Rizky (iOS Developer)

Role

Product Designer

Responsibility

Leading Design System, Documenting, Create and maintain design token and design component.

Platform

Desktop, Mobile Web, Mobile Apps (iOS and Android)

Project Overview

The first day I join to Otten Coffee, I feel in the middle of nowhere. I’m the first Product Designer ever to join Otten Coffee. No design tools, no design resource (eg: documentation), there’s nothing. And in the upcoming project we will faced really big project to revamp the whole Otten Coffee Digital Product. From there I'm starting to talk with some of engineer to build our own design system.

The Problem

• Otten Coffee has more than One Digital Product (E-commerce, Subscription, Smart Retail) it mean, more product will be more inconsistency if we designed it and develop it with traditional way
• We have to Revamped the whole Otten Coffee Digital Product on all platform (Desktop, Mobile web, iOS and Android)
• Designing and develop a product or feature is not too effective because we need to build a component in every different page (example : button and form)

The Process

1. Audit Component in Existing Product

At the first, we audit component in existing product which component should be made or not

2. Build the Design Token (Foundation)

Start to define the foundational element such as color, iconography, typography, Spacing, Radius, Shadow. And build it in Design Tools (we use figma) and documented it.

3. Build the Design Component