Piko

The Island Sustainability Learning Experience App.

Preservation of culture and land through respectful ‘āina friendly choices.

Project Overview

The objective was to design and build an innovative platform for emerging creatives that will inspire future generations. The goal was to create a website that provides a user-friendly and interactive environment for users to connect, find inspiration, and share their experiences.

Services

UX/UI Design & Development

Software

Adobe Creative Cloud: Illustrator, PhotoShop, HTML, CSS, and Javascript Library

Challenge

The issue is that talented individuals are hidden by algorithmic media and “Day in the Life of” influencer-like content, leaving them unrecognized. The goal is to create a platform that showcases the essence of community in a world driven by viral content.

Solution

The objective is to design a mission-driven website that showcases the stories of emerging and like-minded individuals to inspire others to share their own stories.

Conceptual Planning

The planning process for the website started with researching the target audience and their requirements. It was determined that artists, designers, and storytellers wanted a platform to showcase their work, find inspiration, and connect with others. The main objective was to create a user-friendly and inspiring website that caters to the needs of these creative individuals.

Creative Culture

The design system for Piko website includes features for consistency and scalabilities such as a logo that represents the meaning of Piko, a serene and calm color palette, a classic type pairing, and visuals like a hero video highlighting community and growth. The design incorporates animations to showcase creators and an easy-to-navigate interface. Interactive elements like custom buttons and forums are also included, as well as a library of custom icons and illustrations to add visual interest and support content.

Logo

When translated from Hawaiian to English, the word Piko has two meanings: birth and the highest point of a mountain. It symbolizes a starting point on a path to achieving one's goals, carrying the story of their identity to the summit.

Color Palette

The color palette for this project consists of green and yellow as primary colors, symbolizing growth, balance, optimism, joy, and friendship. The use of neutral colors as a secondary blend enhances the prominence of the primary colors.

Typography

The typography of Piko needs to communicate a friendly, welcoming, and stylistic persona to a targeted audience. Contrast, character, and genuinity were prioritized while creating the typographic style of Piko.

Mrs Eaves XL Serif OT is a serif typeface that has an elegant and refined feel and was chosen for its friendliness and clarity. ITC Avant Garde Gothic Pro is a geometric sans-serif typeface that has a more relaxed tone and welcoming curves and was chosen for its clarity and playful and fun feel.

Graphics/Icons

Custom illustrative icons are used to depict each section of the brands mission, vision and values. All illustrations are in the style of line art, adding a playful, cohesive element that accompanies each photo.

Pattern

The triangle motif was used to enhance the visual appeal of the website, inspired by a traditional form of storytelling. It creates a visual band and cut-out of mountain tops, combining cultural reference, definition, and representation.

Animations

The website used original photos and videos instead of stock photos to create a welcoming and friendly environment. The use of original photos helped add nuance to the site, but having static photos made the website feel flat. So, they animated the photos three times to bring the site to life.

The Next Generation.

The project aimed to establish a strong and consistent visual identity for the platform through creative work, in order to inspire and motivate individuals to share their talents.

The Summit Awaits

The goal with this project was to create a safe and growing space for up-and-coming creatives while representing the heart of the brand through an engaging and friendly interface.

View Coded Site