Energy BTP (EBTP) is an oil retailer and oil storage management company that operates in Indonesia. The company was a newborn business and had no digital presence at the time of consultation with us. We built the website from the ground up as well as providing illustrations that client can use as their marketing branding strategy. Client wanted a classic look and illustrations with clear message on what they do. They want the illustrations to convey clear messages of their business model as people don't know who EBTP just yet.

Overall, we delivered three things in this project:

  • Web Design
  • Branding Illustrations
  • Web Performance

Web Design

Ever since the first client meeting with EBTP, We want the web design to deliver a strong message the visitors that 'This is Energy BTP'. We want to ensure that the brand stays in the EBTP's visitors memory. To deliver that objective, we proposed to make custom illustrations and newcolour palette that they can use for their brand marketing too. We came up with multiple illustrations that are now used across the web design as well as shade of yellow as the global colour palette.

Home Page design was packed with a lot of photos and illustrations. We want to expose as many information as possible to visitors yet maintaining clarity on what EBTP offers. EBTP offers two services: oil retail or storage partnership, and we reflect that on Home Page design by dividing the home page into three sections; brief introduction, storage partnership and oil retail. However, we dont want to spoil all the details on the home page as it would make the page looking cluttered. Instead, we put Click-to-Action (CTA) buttons on every end of the section. The idea of the design is to keep visitors on the site as long as possible and exposing them to as many page as possible. This idea was essential to EBTP's web design objective as this helps EBTP to expose more information and brand design to visitors in order to make them remembered.

Home Page - Oil Retail Product Showcase

On the other pages, we designed a header design template that is used on all page other than home page. The header design is essentially divided into two parts, left and right part. Left part is filled with brief information on what the page is about so visitor immediately understands what should they expect to get from reading this page. While the right part shows an illustration that is related to the page, to provide better understanding visually of the page information.

The header was followed by sections of relevant information of the page. In the sample at the left, which is the 'About Us' page, we incorporated illustrations and information in a grid style. The purpose is to make readers comfortable in reading the information. Splitting the text into sections help readers to focus on each topic at a time. We also always suggest clients to provide content that are written in casual format, such as bullet points and short paragraph. Other than helping readers to reduce strain in the eyes from reading long paragraphs, this type of format is being favoured by Google for crawling.

About Page - Full Page Preview

Responsive mobile design

To create a great mobile design, we rely heavily on CSS Grid. This allows us to freely customise the layout for Desktop and Mobile independently! The independence allow us to use one element repetitively on every breakpoints although we aggressively move the element position. This also helps us to cut down a lot of redundant codes which result a fast mobile web site.

We decided to go with vertical stack design on mobile to ensure that the design would compatible with all visitors' phones. As the target audience of EBTP is Indonesian who have tremendous diversity in mobile phones, designing the site with 'safe' design is important. Although we could come up with funky eccentric layout, it could fire back EBTP web design performance when faced with incompatible phones.

Mobile Preview

Branding Illustrations

EBTP Illustrations objective is simply to convey clear and strong message of what EBTP offers. Hence, we came up with illustrations of EBTP business activities and equipment. EBTP is also very proud of its wholly owned asset: tanker ship. We ensure that the tanker ship takes the spotlight throughout the web, to show to the audience of what EBTP most prominent service.

The illustration subjects are quite straightforward, but we opted for a sketch-like design approach. EBTP would like to be associated with 'classic'. Although EBTP is a new business, they want to be recognised as someone who has gone through years of experience. With that in mind, we decided by going with sketch-like design and solid colours.

Web Performance

Great design means nothing if the performance flops. We always ensure that our client gets at least 80 speed score from PageSpeed Insight by Google. In fact, EBTP receives greater score; a whopping 90 speed score!

We also focused on the mobile compatibility of EBTP on millions of different phones on Earth. We ensured that the site would only use elements that are compatible and light. Yes, being light on mobile environment is critical. Google highly regards mobile sites that are light for its ranking and also slow mobile sites generate very high dropout sessions.

Also, to ensure page load is fast on mobile design, we ensured that all illustrations are in SVG format and was drawn with vector platform. This provides a significant boost as SVG files are essentially read as codes by web browser instead of pixels like JPEG and PNG.

To compress the web size on mobile even further we literally minify everything; HTML, CSS and JS. Yes, this could be affecting the website stability but that's if the website relied on complex element of these scripts. We understand the risk from the first place and avoid using any scripts that would affect the performance. The result is brilliant as the web is blazingly fast on either Desktop or Mobile. On top of that, the HTML & CSS code we use are VERY CLEAN making the site is easily rendered by any mobile browsers. You can check how browser renders First Contentful Paint and First Meaningful Paint below. With the right code, a fast FCP and FMP are possible!

We usually highly suggest clients to use our preferred hosting, Webflow, as its speed and CDN performance are very reliable. Allowing websites to get score 90 above from Google PageInsight. However, EBTP opts to use its own hosting. Regardless of the hosting, our web design delivers extremely fast performance both on Desktop and Mobile

Impactful Brand Design with Unparalleled Speed

That's basically what we always strive for our clients, but that was really the main objective when we worked with EBTP. We are really happy to deliver what they really need as a newborn business. Though, every business would have different needs. Be sure to consult with us (and it's always free 👌) before performing any digital marketing strategy.

And you can always check our live website with the button below!

Oil Retailer & Storage Management - Energy BTP