A Jquerey mobile prototype for tree nerds to track its info and locations in SF.


This project is the first time I learned how write codes with Jquerey to design an actual mobile interface. It is assigned to be a tracker app to record location and genres of the subject. With what I have learnt in this course, I have a chance to know better how front-end designers should be aware while implementing from flat wireframes, and also to realize how important the communication betweens designers and coders.


Basic HTML & CSS

Jquery mobile


Visual Design

Trees + Trip

Treep SF : a tracker app for SF trees lovers.

Have you ever noticed how diverse the trees SF have when you walk in this city, or have you ever felt sad when a tree you passed by is sick or being removed? Are you a type of person like to take photos including trees? Maybe you are a tree lovers and care about trees?

Design requirement

A tracker app

The design goal is to use Jquerey to have a tracker app interface, and the app must have to help users to track a single subject with different genres, for example: Dog is the subject, and genres could be the breeds of different dogs. In this case, I choose SF trees as my target.


1. A tree takes 10-20 years to grow.

Tree takes time and faith to grow, it is sad to see trees got logged or swallowed by wildfire, we can pay more attentions to our trees in environment even in city. Also, a tree planted in front of the door is sometimes a topic you can talk with your lovely neigbors. So I hope I can use this idea to track trees that leave me good memories and inspirations.

2. SF canopy took up less canopy coverage rate than other big city.

Tree purifies air. While SF citizens seems to have less protections by this benefits, according to current online data, some organizations have been planing to assess current tree canopy conditions and how much rate they cover in the city,here is a link on canopy coverage of different cities in the states, the recent plan by the city seems to focus on caring transplanted trees. Ten years after, why not we took initiatives to collect tree data and guard our street trees together.

Click on the image to enlarge it, it's quite interesting.

Sketch out


Click on the image to enlarge it

Visual direction

Click on the image to enlarge it

Ui prototype

Click on the image to enlarge it

User story


People who lives in the city of San Francisco can use this tracker app to track the location of any tree they recognized by tree name, type, or even just a customized name after edit, they can also add image in the data, delete, and also see the traces in the map, either for whole tree collection page or for each single tree profile.

Final Design

Logo on app
Prototype demo

Made with Adobe Xd, without actual implementations of front end languages.

Final link recorded demo

Made with HTML/CSS/Json(Data)/Js/Jquery, with actual implementations of front end languages. Since it is also responsive, it could be tested via link on the left.

  • username:user
  • password:pass

What I have learnt:

If given more time, I'd like to think more about:

Polish UX/UI with codes

This is such a fun class, I have also learnt UX through another communication tool.I still want to get more testing and refine my visual to have my interface works more user-friendly by using front end languages, even it is not the tools I use habitually, I feel I have learnt skills with different perspectives.

Back end support

After more refinements, I would like to see if I can coorperate with engineers to have back end support.

Think further

I have more ideas to make this concept more completed, but I will still use what I've learnt and improove to another level, maybe I will try to expand the range of tracking and make it socialized.

Next Project >>