Our Earth

Student Project

Tools / Adobe Xd, Illustrator

Roles/ UI

Duration/ 4 Weeks

Year/ January 2020

About Project

This application collects various information related to global warming from different countries. The user can also share their ideas and experiences on this platform in regards to the problem.

The Problem

Global warming is getting a serious problem in the world. We can’t see and know what happens in the world because there is a lot of information are on different websites.

So I created an application that collects various information related to global warming, and we can see the information only on this app.

Design Challenge

It was my third-year student project. Through this project, I understood the basic principle patterns of UI design and got to know well Adobe Xd. 

 

Design Process

The challenge of this project is about understanding the basic knowledge of UI patterns and get familiar with Adobe Xd.
 

  • Firstly, I decide to do a subject that I'm interested in and what kind of application I want to create. The professor wants us to create an application related to a problem with nature. " Global warming" is getting a serious problem for us. We can hear a lot of people talk about it, but we can not see it exactly affect different countries. Therefore, I create an application that can collect all information and the use can see the news from different continents.
     

  • Secondly, I analyze similar applications, such as Instagram, Medium, BBC News application, and define the functions I want in this application. I want to create an application that shows news but also is a blog, hence the user can see the news but also can share their experiences on the application.
     

After I defined all functions I want, I start to do some sketches, wireframes, and Low-Fidelity prototypes. In the end, I decide on the colors and the fonts to create my final design.

IMG_6517.jpg

Analyze Existing Applications

I analyzed some applications about their interaction design and layouts, such as Instagram, Medium, and BBC News. 

  • First, they use the title section to divide the content to clearly indicated the subject of the section.

  • Second, they use a search box and the tag clouds to help the user can efficiently find the article or the subject they are interested in.

  • Third, in the social aspects, they use "like" and a comment function to engage the user interacts with each other on the application. 

//   Feature

01   Collect various information from different

news sources

02​​​​​​​   Allows you to share experiences and

thoughts on your blog with everyone.

APP MOCK UP.png
colors%20and%20fonts_edited.png
 
 
sign-up.gif

On the sign-up and login page, I use Input Hints to help

the user put the right information into the input field. 

earth-turn-explication.gif

I use an interactive map to specify the region that I want to read news about. All news is sorted into 7 groups by different continents. Therefore, we can easily find the news we want to read. 

add-article-with-explication.gif
Artboard 6.png
Artboard 7.png

The user can share their experiences, thoughts, and ideas and add tags to their post. Those tags can help other users easily find their articles. 

APP MOCK UP-all.png