Ad Tracker
A simple, easy,location-based app for advertisement lovers.
Overview
Ad Tracker is an ad tracking mobile application that allows users to record and manage the advertisements inspirations they would like to keep tracking in their neighborhood in the Bay Area.
The goal of this project was to create a new mobile web app interface develop use HTML & CSS, and javaScript.
Role
UI Design
Web Development
Duration
Feb-May 2020
Languages
Tablet app
HTML, CSS, PHP, javaScript
The Look and Feel
Before we jump into IA, workflow, and other stuff, create a solid & clear visual style guide is helpful to emphasize the overall look and feel about the product interface, and then we could follow along the guidelines to make the frame of our app.
Map Information Architechture
Now it's time for an overall content structure mapping, which like we build a framework or a template to display and organize our web app. Effective IA makes the product easy to use but only united with design thinking the product has a powerful user experience.
In Ad Tracker, the concept is a map-based saved pins database, we have 3 major sections which are:
Map(See pins around you on the map)
Ad List(All your ad inspirations, search, and filter)
Profile(User information and logout)
Design & Wireframes
Development
In this project, I used Sublime Text to write and sync code to my server. To have a clear mind while working, I created a well-structured folder structure, as well as weekly backup to track the history of each step, I found it's extremely helpful to keep files safe, and make the working process efficient.
Play with Ad Tracker
Use the following information to log in and explore the app, or create an account for yourself, you could upload your pic too, it's fun : )
Username: user0
Password: pass
What I Learned
1. Before make it beautiful, make it works.
Ad Tracker was the first mobile app / second web app I coded by myself. It let me know how much effort it needs to build a simple function app, fix bugs, find bugs and fix it again. Like my favorite coder Hamilton said:
2. Wear developers' shoes to collaborate.
This project allowed me to get involved in deeper javascript and jQuery mobile, as well as HTML5 & CSS, which helps me in further projects to collaborate with front & back end engineers, believe it or not, because of this project, I was able to help our developer debug during my next internship. Know a little bit about coding like me helps a designer to wear engineers' shoes and communication.
