Artboard 1 copy 6@3x.png

Kiwi Website Design and Implementation

Artboard 1 copy 5@3x.png
 

This project was given to our clients as a demo featuring the future weather services developed by BloomSky.

 

My Responsibilities

I was responsible for both the design and implementation of the website within a two-week time frame. After I redesigned the site, I developed the structure of the website in HTML5 and finalized the layout with CSS and Javascript. This site was my first programming project at BloomSky.

 
 

The Design Process

I reconstructed the architecture of the website and redesigned it with Adobe Illustrator and XD.

Original Website Analysis

Since the previous website was used to label sky images for training AI model purposes, so it was in low fidelity. All navigations and buttons were arbitrarily listed on the page, regardless of any information hierarchy.

 
3-research@3x.png

Reconstruction with Wireframe

The purpose of the Kiwi website changed from an internal image label tool to the demonstration of our data services. I got rid of the unnecessary pages and redesigned the labeled image gallery and the image label tools to give our clients a glimpse of how we developed the data services. In addition, I added another page to show our upcoming weather phenomena recognition service in the future.

 

Visual Design

I used engaging weather images to make the website more attractive. I also redesigned the image gallery and the image-label tool to ensure clients a clear view on the image labeling process.

  

 
7-visual design@3x.png

The Development Process

After finishing the design, I developed the website by rewriting the original code in HTML5, CSS, and Javascript. In the following process, I did them all by myself except the Django local server setup and AWS deployment.

 
8-django@3x.png
9-atom@3x.png
10-github@3x.png
11-aws@3x.png

Please email me to access the website.