Onda Origins Internship:
A website redesign for Onda, a coffee company based in Seattle.

Duration:  Jan 2019 - Jan 2020          Team: Derrick Yap | Kari Bergstedt | Jessica Prasetyo          Role: Lead Design Intern
Project
Overview

PROBLEM
Onda needs a website for its customers to easily learn about the products and make orders. However, the existing website lacks a clear information structure and has an excessive amount of pages. In addtion, though the visual language communicates a friendly and organic personality, it fails to communicate what sets Onda apart — its humane approach to source coffee and genuine connection with the farmers.

OUTCOMES

Final
Product

OVERVIEW: SITEMAP

The following image is a sitemap for the redesigned website. The site structures information into five primary pages: “Home”, “Our Product”, “Track Your Coffee”, “Learn”, and “Serve Onda”.

HOME PAGE

This is the website’s landing page. This page serves as an introduction to the company and its products. It encourages customers to learn more and make purchases by highlighting featured products and Onda’s unique blockchain tracking system.
OUR PRODUCT

All of Onda’s available products are displayed on one page in order to reduce unnecessary subpages. The products are sorted into categories.
PRODUCT PAGE

If the customer clicks on one of the products, he will be able to make a purchase. The page contains significant product information identified by the customers in our user research.
LEARN

This page contains two subpages. The “About Us” page shows information about Onda and the team. The “Press” page displays press articles about Onda.
Design
Specs

In addition to hi-fidelity prototypes, the final deliverables also include a series of design specification documents that provide the engineer with information about the typefaces, color, and spacing applied on the website.

VISUAL GUIDELINE

The visual guideline contains information about the overall design system, including font choice, font size, paragraph leading/tracking, and color hex code
REUSABLE
COMPONENTS

This document lists out the components that the engineers can reuse throughout the website. It provides information on fonts, spacing, and color.
PAGE SPECS

Here are some example pages with specifications about the fonts, spacing, and color for the engineer’s reference.
Process
Gallery