Xiaohan Yu's profile

TrackLantern | UI/UX, Visual Design

TrackLantern

By combining technology, cultural knowledge, and art, I designed the TrackLantern app. The purpose of the app is to convey the cultures of different types of lanterns.
Lanterns all have long histories and have different functions. Lanterns appear in different places, and different times have different meanings. Locating the lanterns and recording occasions can help people better understand the functions and meanings of each type of lantern.
Problem

The symbol of the lantern is a culture. However, fewer and fewer people know and care about the cultures of lanterns, which has a long history. Moreover, people are confused about which types of lanterns appear on which place and which time. Do they represent different meanings? 

Solution

It is a lantern tracking app for lantern enthusiasts. Each lantern has different functions. Some lanterns are used for decoration and modern forms of celebration and worship. Other lanterns are used for illumination. Tracking them and recording occasions can let users know which day they will appear on what kind of typical places.

My Challenge

This project is a responsive mobile app which is self coded by using HTML, CSS, Javascript, JSON . I have used jQuery Mobile and incorporating Google Map API. Moreover, this project was not about coded, but I thought about concept, visual design and user experience. I want to create an application which is not only practical and beautiful, but also useful for conveying a historical culture.
Persona

Primary Target Audience: People who are lantern enthusiasts want to record the lanterns they meet.
Secondary Target Audience: People who want to explore and know the cultures of lanterns.
Information Architecture
Wireframe
Style Guide
Characters

By combining lanterns and the features of each lantern, I designed these characters.
When users see the characters, they can recognize the cultures behind the lanterns or features of them. For example, the Chinese red lantern is from China, so I combined Beijing Opera elements in it to create        the character.
App Design
How to use it
On the Location page, users can see the last place a lantern appear.
On the Lantern List page, users can add a lantern, give it a name, choose a type and add date. Every column can go to Lantern Location page to add a location, edit and delete information.
On the Lantern Profile page, users can see the history of each lantern.
On the Profile page, users can see categories of the types of lanterns and tracking dates. 
TrackLantern | UI/UX, Visual Design
Published:

Owner

TrackLantern | UI/UX, Visual Design

Published: