Zaim Asri's profile

Olive House Selatan

Olive House Selatan

KMJ Global Sdn Bhd


Fullstack Designer

Olive House focusing on the awareness of eating healthy food which also known as the Quranic Food. The objective of building the website is to grow their team by recruiting more agents to spread the word of "Healthy Food" from Quran.

I help the brand clarify on their mission & vision. I then design & develop a website which align to their short term & long term goals.

Discussion with client for a wireframes phase.

Hero Section (Wireframes)

It is important to be clear & direct to the agent they want to recruit once they land on the site.

I help them do that by providing a copywriting which encourage visitor to join them and embark on a journey for a mission on building a habit of Healthy Living Lifestyle (Aafiyat Lifestyle). 

The call to action was a popup of a video explaining why healthy food is important & will build up a person over the long term.

After Finalized on the Wireframes
I will not be too quick on designing the interface. The important thing to do are checking on the Brand Guideline. Unfortunately, for this project, the Brand Guideline seems doesn't match with our plan for a Minimalist Corporate Web Design.
As the logo refinement which I provide in a Brand Identity Design packages are not included in this project, I decided to help them with a Mini Guideline for a new look. 
Well as many designers, we just love to help if the job can be use in a portfolio such as this. Yes every designer are like that aren’t we?
This is how I help them:
1. Refine their logo. Make it proper & gave a new color.
2. Come up with a new color pallete & typography for the Brand.
Mini Brand Guideline to help client on the usage of the logo.

A simple 1 page for a logo spacing. This can help other designer working on the brand to use this as a guideline to ensure the logo spacing is consistent which minorly help people memorize the brand.

The Next Step is to establish a new color pallete.

And this one is what client agree with.
At Last! We have our Styleguide to get the design up & running.

This would really help make the design process much smoother & fast!

The UI Design Phase (Hero Section)

The Hero section as the name suggest is a "Hero" for the entire site. It is the first impression to safe your site from losing a visitor. 

The design decision was made to stand out with the help of team photo & eye catching minimal gradient color combines with yellow CTA (attractive color).

About The Business

In this section shows the original talk from the founder himself. This section is to help build more trust for the potential agent to be recruited later.

With the founder himself showing his face could help show the authenticity of the business and bring visitor closer to them.

Photo Manipulation in Adobe Photoshop.

To match the image with the new brand color, I help make a minor image cropping & recoloring. 
Figma Component

In Figma, there are 2 things that could help centralize the design element:

1. A Component act as a parent to the Instances. 

2. an Instances act as a child to the Component.

If anything change on the instances, it would not change on the component. However if a change made on the component, it will apply to all the instances.

This help ensuring the website design consistency.

​​​​​​​Figma Variant for Alternate Pose

As client have done a photoshoot & provide the photo to me, they ask me if there is other photo that can be use on the website? To ease the process of selecting a uniformed posing of the team, I provide them the alternate post and choose 1 of the 3 style they would like to use as a default.

After Finish the:

1. Wireframing
2. Copywriting
3. Logo Refine
4. Styleguide

The final step is to develop the site using Webflow a no-code tool & publish it to a live domain.


I've been enjoying working on this project. Going forward in the future, I believe minimal design is the way to go. It can help your business be simple, fast & cost effective while still maintaining a professional & premium look & feel. To ensure I always enjoy the work I do & achieve more while being efficient with my work, I only do Minimal Design Concept. 

Feel free to Contact me for a UI/UX & Web Design Services

More Info
Olive House Selatan


Olive House Selatan