02

/

WOOF WOOF

01

Idea

Tools

Sublime
Github
Adobe Illustartor
Adobe Photoshop

Role

Development
UI Design

Heading

Time Period

Spring 2021

Photoshop
‍

Overview

WOOF WOOF app helps lovers track the dogs in the city. Woof
Woof app connects with Google Maps to show the location
associated with each dog, and updates when a dog appears.
This app is implemented using HTML, CSS, Javascript, PHP,
and jQuery.

Problem

How to easily find the cute dog in the city?

Design Goal

WOOF WOOF app will provide the location and information
about the dog breed, age, and description and exactly where
they live. This app also provides a user-friendly page for dog
lovers to report a newfound dog’s location, details, and
upload pictures.

02

Color

03

Logo

04

Font

Cabin

-Bold 24px/12px

Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

05

Iconography

06

User flow

To get a general representation of my app, I have drawn out an IA map. This can help me understand the flow and features of my app easier.

07

SKTECH

Sign in/Sign up

Recent Map

Add New

User Profile

Dog Profile

Dog List

08

Functions

Location/ Google Map

Using Javascript API from Google Maps to establish a tracking map. Users can know how many dogs in specific area.

Dog Profile

Setting up a template for Javascript and gathering information from database to display to the front. Users can know more information of the dogs.

Dog Search/ Sort

Using search, sort, and delete functions through form.js. Users can view all dogs and use search or color filter to find the specific one.

09

Final

Try this WOOF WOOF app on your phone (OPEN APP)
username: user0 / password: pass

Other Works

Previous Project

Chinese Hotpot

Next Project

Collaboration

COPYRIGHT © TIANHUA HUANG 2021