Filter by:
MangaDex v5

MangaDex v5

URANIME

URANIME

泡盛まさひろ台灣

泡盛まさひろ台灣

Express Bahari App Design

Express Bahari Ap...

Express Bahari Website Redesign

Express Bahari We...

Pronovias台灣

Pronovias台灣

EventME

EventME

泡盛まさひろ台灣

cover-awamori-masahiro
Type

Website Design

Client

まさひろ酒造株式会社 (2020)

Tools Used

Adobe Photoshop, CSS, WordPress

Background ->

Masahiro is a sake brewery company located in Okinawa, Japan that is famous for its awamori. At the time, the company was trying to expand its business to Taiwan and was looking to build a simple responsive landing page that can convey its brand and present its products that appeal to the younger Taiwanese crowd without being overwhelming.

Design Journal

Role

Interface Designer, Layout Designer, Front-end Web Developer


Hard Question, Simple Answer

Design Question

  • How would we enchant and inform potential customers from the younger crowd about Masahiro’s awamori and attract them to try it?

Surprisingly Simple Answer

  • Design an aesthetically pleasing website that adds Masahiro's awamori essence to the website

Process Overview

Process Overview

Process overview of this landing page design project

01. Ideation

Brainstorming

Although technically from the younger crowd, unfortunately, I can’t be considered one of the user targets of this project since I was born and raised in Indonesia during my early years and spent my college days in Singapore.

This also brings an extra unique problem to this project as my design taste was greatly influenced by my time in Singapore, making me almost unfit to design something that is aimed towards the Taiwanese people – since each person’s design taste varies greatly depending on their geographic location.

Feeling stuck, I quickly arranged a few mood boards that I can use to refer to them during my brainstorming process, aside from that I also asked my Taiwanese friend for their opinions, primarily regarding colors.


Colors and Font

After a few design iterations, I settled on apricot-orange as the website's primary color to go with Masahiro's iconic green and the PingFang TC as the main font family that will complement well with the simple, aesthetically pleasing landing page that I'm going for.

Fonts and Colors

The font and color scheme of the landing page

02. Wireframing and Prototyping

Blueprint

During the initial design process (wireframing), there are three main points that I focus on:

  • Simple and clear layout
  • Concise content with clear wording
  • Attention-grabbing without being annoying

After taking into consideration of those three points, I went to draw a few sketches to get a rough idea of how the layout would look like.

Few Low Fidelity Wireframes

Few low fidelity wireframes of the landing page

Cleaning Up

After receiving enough feedback regarding the three initial layouts, I decided to create a new layout that combined the three layouts' strong suits and adds few layout optimizations to make it clearer and more simple.

High Fidelity Wireframes

High fidelity wireframe of the landing page, notice the usage of the wave-ish effect, used to add awamori's accent to the page

Since the main objective of the design is only to inform user targets about Masahiro's awamori, there was only one CTA section, urging users to scroll down to know more about the product and the rest are all content that was provided by the client albeit tweaked a bit to fit the website layout better.

03. Development

Building the Magic

Why WordPress? During the first meeting with the client, we discussed few options (Wix, Squarespace, or build from scratch), but settled with WordPress instead, as that's what they are most comfortable with and way more time-efficient than building from scratch.


Aside from that, WordPress also allows me to import our custom theme file (CSS) without being restricting like other options that were discussed, and most important of all, the numbers of resources regarding WordPress that exist on the internet.

Another thing that I have done during this process was to make sure that every media files on the website have to be optimized, this means low image size without sacrificing too much of the image quality, video that loads fast without no buffering time.

04. Outcome

Upon few weeks after completing the project, Masahiro noticed quite an increase in their initial sales in Taiwan, although they didn't tell me how many — only that it is better than what they initially expected.

In Action ->

content-awamori-masahiro