GhosTown

GhosTown is a ghost tracker app that brings a little delightfulness to people's daily life.

type

Individual Mobile App Design & Development Project

focus
  • Mobile App Design
  • Web-based Mobile App Development
  • Illustration
Tools
  • HTML
  • CSS
  • jQuery Mobile
  • Java Script
  • Adobe Illustrator

Overview

Whenever you see a ghost, you can pin its location, upload and/or take a photo. This photo will be layered with the ghost you just found!

They’re Everywhere, It’s Up to You to Find Them…

1.1 Wireframe

Basic Structure

First, I started to create the wireframe in order to have an overview of the whole app flow.

2.1 Coding

Get to Know the jQuery Mobile

Created the basic structure of the app in jQuery Mobile's structure with very basic CSS. This is in order to understand the page structure before getting into a more specific design.

Coded Prototype

At this stage, there is no real data yet and the map is just an image. I’ve also defined the root color and typeface. This process is to make sure the app flow is easy to follow before moving into real data and real map.

Add Data & Use of the Google Map API

Once the flow of the app is defined, I moved on to apply data to the app with a data set. Google Map API is also embedded in order to have a real map.

JS
JSON
2.1 key screens

GhosTown

GhosTown is an app that brings delightfulness to people's daily life. Users will able to explore ghosts anywhere and record their locations. Find more ghosts and customize them to expand your ghost collections!

2.2 app highlights

Engaging Experience

01
  • Delightful graphic elements and fun interaction
  • Ghost will cover its eye when the user fills in the password

Easily Navigate Through

02
  • To easily see the latest reports of all ghost at the home page
  • Directly go to the ghost profile page with the thumbnail on the home page

Easily Navigate Through

02
  • To easily see the latest reports of all ghost at the home page
  • Directly go to the ghost profile page with the thumbnail on the home page

Customizable Adventure

03
  • The user can easily edit the existing ghost's name, background color, foreground design and even the ghost type

Be a Shutterbug

04
  • With the user taking photo of the pinned location, the photo will be layered with the ghost they find
  • The ghost will move around with taps on the location icon

Be a Shutterbug

04
  • With the user taking photo of the pinned location, the photo will be layered with the ghost they find
  • The ghost will move around with taps on the location icon

Expand Your Collection

05
  • User is able to create a new ghost and pin its location right away
  • Choose any type and decoration you want and name the ghost to claim it

Capture the Moment

06
  • Upload a photo or take a photo with your phone, it will be layered with your new ghost

Capture the Moment

06
  • Upload a photo or take a photo with your phone, it will be layered with your new ghost

Light or Dark? It's Your Call

07
  • Switch between dark theme and light theme
  • Map color theme will also be consistent with the app's theme

Play with the Prototype

Username: user0

Password: pass

Or sign up for a new account if you wish 🤗

3.1 color system

Color System

The default app has a dark theme with dark colors and neon accent colors to match the ghost town feeling.

Group Created with Sketch.
3.2 iconography

Fun Icons

App icons have a default style of line icons, filled icons are used for the selected stage. Every type of ghost has a unique icon with its special elements.

3.3 Typgraphy

Hind Gunter

The primary typeface is Hind Guntur which is a clean geometrical typeface. The Righteous is used for some header text to create contrast.

04. conclusion

Summary

GhosTown is a fully coded web-based mobile app design project. It used HTML, CSS, JavaScript, and jQuery Mobile. It creates an interesting user experience to help users pay attention to their surroundings.

Reflection

This was a challenging yet fun project. Unlike developing a website where I would primarily focus on the grid system and responsive design, this project was meant to develop an app.

During this project, in order to create a more interesting user interaction, I pushed myself further with JavaScript for functions such as customizable ghost profiles and layering the user’s image with the ghost. I am glad that I did not give up on my concept and with the help of others, I am able to have an app that I’m proud of.

View the Full Case Study

Wanna See More?