Please Wait

Sakumas
Landing Page


I. Project Overview

Background

Sakumas is an Indonesian startup focused on Digital Gold Investment. Founded in late 2019 with the name SehatiGold and rebrand into Sakumas in 2021after getting funded. I was contacted by Sakumas in July 2021 and was asked to transform their old SehatiGold page into the new Sakumas landing page. I started this project by discussing the goals they wanted to achieve and from there I elaborate the brief into design in Figma before transforming it into code using HTML, CSS, JS, and Jquery.


VISIT THE WEBSITE

Role

UI-UX Designer
Frontend Developer


Client

Sakumas


Date

September 2021 - October 2021

II. Design Process

Visual Identity

Logo

Project Detail

Typography

Project Detail

Colors

Project Detail

I was given the logo and was asked to create color palette for the brand. I decided to create a palette of complementary color which can be easily achieve by adding 180 degree value to the Hue of the orange color. The next thing I did was creating Shades and Tints for the orange and blue color and the palette is ready to use.

Building The Sakumas Brand

The previous SehatiGold page use a really out-of-date design concept with lack of animation and illustration. Along with the Sakumas team, we came up with an idea to bring animation and minimalist character illustration that will stand out for visitors. The challenge is at that time we don't have the talent to create our unique character illustration design, so we ended up using a free commercial illustration from UseSmash and fit them with our own palette.

III. Prototyping

Design Prototype

Project Detail

Figma is the choosen tools for prototyping because of the ease of communication for commenting and giving feedback. Using plugin like "Get Waves" and "Unsplash" from the figma community also help the prototyping process.

The following picture is the final iteration of the design that has been accepted and used in the current website. When designing the page I follow the reference from Halo Designer book. The book gave me insight about how conversion rate work in landing page and 5 success keys for landing page.

Landing Page Success Keys

Project Detail
  1. Title for Value
    We show the main value of Sakumas which is an ease of use for Digital Gold transaction.
  2. Subtitle to Elaborate
    We elaborate our value at a glance by showing that user can make Digital Gold transaction anywhere and anytime with Sakumas.
  3. Hero Image
    We use illustrations instead of product image because our mobile application wasn't ready. Hopefully in near future this illustration can be replaced with released product image.
  4. Call to Action
    We wanted to give an easy access for user to register and start using our service.
  5. Social Proof
    We show that Sakumas has been recognize by KOMINFO, JFK, KBI, and BAPPEBTI.

Animation Interaction

Scrolling animation as a part of interaction is one of the thing I wanted to achieve since the beginning of the project. For the onscroll animation I added CDN of AOS.JS library created by Michał Sajnóg right into the code.

IV. Final Result

Sakumas Landing Page

Sakumas About Page

V. What I Learn

Time Management

While working on this project, I'm also a fulltime student in Binus Graduate Program. Working on design process and brainstorming is another challenge for me with the given deadline.

Slicing for Particular Framework

The frontend code I develop need to be sliced into several part (partial) file such as 'navigation', 'gold chart', 'footer', etc. Slicing is easier when you are the one taking control of the whole web project with the choosen web framework you comfortable with. In this project, I work as a team and needed to slice the file before passing it to the other developer. I need to learn the web framework used in Sakumas to be able to slice the frontend file correctly.

© Johannes Farrell 2022