Matoa Rakai

Personal Project

HTML5, CSS3, JavaScript, Figma

Visit live website

This website is available for 1440px screen size. Matoa Rakai is a batch of moon wooden watches created by MATOA Indonesia. This landing page was created as a project for the Web Design 2 class, with the task of making a website that's SEO(Search engine optimisation) optimized. In this case, it is enhanced with keywords that tend to attract the target audience. These keywords are chosen carefully through research and with online digital marketing tools.

CHALLENGE

Moon wooden watches are one of the most unique pieces that are rarely searched by consumers, especially due to their price, that's much higher than regular watches. Therefore, finding the perfect target keywords that sell for the market was quite challenging.

SOLUTIONS

Using digital marketing tools and in-depth research about the product, target audience, and its competitors, the challenges could be overcome. Through a better understanding of the market, it is easier to analyse which are suitable keywords.

DESIGN PROCESS

1. Product research and finding keywords for SEO

Conducting research about the specific product from Matoa's website and social media, as well as about moon and wooden watches in general (including about its competitors). From here, keywords for SEO are collected to later be implemented on the website's content.

2. Creating User Journey and Low Fidelity design of the landing page (Sketches)

To invision user's experience when interacting with this landing page, I created a user journey map. This map explains user's emotions, pain points, and actions throughout the process. As the base of the design, low fidelity sketch is created to get a picture of how the sections and content management going to look like.

3. Designing the High Fidelity

After collecting photos from MATOA's website and social media, the high fidelity design is created using Figma. On this stage, the website's content is starting to be developed using all the keywords gathered.

4. Coding the website (desktop)

Based on the design, the website is coded only for 1440px screen width using HTML for the content and CSS for the styling. Then, it is published online using github.

DESIGN SYSTEM

LIKE WHAT YOU SEE?