JALA, Redesign of Website Company Profile

Jala Web Design Project

Client : Jala
Year : 2019

This project is a redesign and redevelop of Jala’s old website company profile. Jala is an IoT startup in Yogyakarta, Indonesia who provides solutions to help farmers understand the farm condition better in a real-time way for preventive actions towards the risk of farming. Currently, they have 2 products, the device that can detect water condition and a web app that integrated to the device so the farm owner can see their farm condition and eventually will have a better plan to get successful harvest.

Jala’s Products

The Problem

The old website was their first website as a startup so they didn’t prepare the content and the design that well. Now as they grow bigger, they need to show their website to potential clients and investors. So they need a better content structure and of course better and fresher design to attract clients and investors.

Jala’s old website

The User & Audience

As i mentioned above, the main goal of the site is to give better information for potential clients and investors, so the obvious user here is clients and investors. But there’s also the “Career” section on the site, and it’s about what job positions that are currently opening and also the details of the job. And this ‘Career’ section will have job seekers as the user.


Role & Responsibility

  1. Project manager. This is a web design and development project, so i put this in my team Duosweb . I was the one who talks to the client, interviewing them, create a project summary, create a project timeline, etc.
  2. Designer. Of course, i am also the designer in this project. And the development phase was done by my partner Ervan.

Scope & Constraints

Actually i didn’t start from scratch, because they already have a design draft for the homepage. And most important part, they already figured out about the content structure which they write on Dropbox paper, so everyone can edit and view it.

Their first draft of the homepage.

So, i design the homepage design from the draft and develop it. Then i also design all the inner pages. Lucky me they have an in-house illustrator, so they already have some beautiful illustration assets to use. The list of the pages that i designed was :

  1. Homepage
  2. About page
  3. Product page
  4. Career page
  5. Career detail page
  6. Contact page

Process

Gathering Requirement

Since i and the client are in the same city, Yogyakarta, we decided to start the project by meeting at a cafe. Talking about the problems, the goals, the scopes, and the budget. These are notes that i took after the meeting:

  • They want a clean UI, uncluttered, easy to read and navigate
  • Blue color as CTA buttons
  • The keyword for the design inspiration : Data visualization, iOt design, Ai farm mangamenet, data driven farming.
Sitemap

Since they already have the content structure, the first step that i took when we have a deal was creating a sitemap so everyone can see the whole structure of the website. This sitemap is very useful to see how big the scope is and also as my guide when designing the pages. When the sitemap is done, i sent it to them for approval before continuing to the next step, wireframe.

Jala sitemap
Websites for inspiration

I’ve got some inspiration from the client. Most of these websites are the company who has similar products, which is water IoT device. I found some great visualization about what they expect immediately. And i ended using some layout and design approach from these inspiration.

website inspiration

The inspiration above mostly about the layout and the content structure. Then i am looking my own inspiration for the look and feel. The inspiration i’m looking for is websites that using white background, clean, and using blue as the main color and CTA. And these are websites that i found.

website inspiration
Wireframe

After the sitemap is approved i proceed to wireframe process. In this wireframe, i use the actual content from them and also the layout that i propose to present the content, so they know how the page would look like. I find this wireframe process is very important so i and the clients can focus on the content first. I designed the wireframe for all the pages.

Jala wireframe

They approved most of the pages above, on some small revisions. The first one is the hero section on product page. They didn’t know what they want to show at first so i assume only showing 1 product. Revised so the section shows 3 products.

wireframe revision

Still on the same page, they want the ‘google play’ section can be different so it draws more attention from the user.

wireframe revision
Defining Colors and Design Elements

Before heading to the mockup, i did some research what colors should i use, based on the branding and what company do. Also i compare it to the competitors. Beside colors, i also research what design elements should i use for pages, and i came up with these.

Color palette and design elements
Mockup

After some feedback on the wireframe in figma file and their approval, i continue to the mockup phase. I ended up using most of the layout from the wireframe which means they agree with my design proposal. Filling the images, creating some design elements to emphasize the meaning of the site, adding colors, and refining the layout.

Jala mockup

I told them at the wireframe phase to get the fixed content and layout. The result, in this mockup phase they didn’t ask for revisions, only changing on some images. And they already have the images ready at the time the mockup is done.

Icons

I download free icons from internet, then i modify the color so it match with the Jala brand.


Design Decisions

Hero Section

In the hero section, they wanted to show the product. In the old design, they use video as background, which actually can show the product really well, but the problem is it’s a video that uses a lot of data, and internet connection in Indonesia is not always stable. So, i think it’s better to show the product with an image instead. I am still using the video, but i put it next to “Try for free” button, so visitors still can watch the video if they want to. Besides, the white background can blend really well with the overall clean theme of the brand.

Hero section : before vs after
Features Section

They think this section is too static, and they also want to show more content here especially images that represent each feature. Then we decided to use side tabs on this section. Yes ‘we’ because it’s actually an idea from them and i think it’s a great idea so i implement it. So, the user can click on each tab then an image will appear next to the tabs. Not only that, we use an animated gif so it can show the dashboard interaction.

Features section
CTA

I put the CTA section again at the bottom of every page, so after scan the whole page, the user knows what to do next.

Bottom CTA

Result

With some feedback and revisions, the final design is finally done. Then the next step is the development process by my partner in Duosweb, Ervan. After about two weeks of development the site ready to deploy and now you can see it in action.

Jala website

Visit the live site : Jala Website

Screenshots

Share this study case :

Share on facebook
Share on twitter
Share on telegram
Share on whatsapp

Get in touch

For business inquiry please send email to kukuhaldyanto@gmail.com