Amy
Huang

Wandering Terminal

An app that helps bring pets home.

Introduction

This is a UI design for the Asian Association of Animal Shelter Healthcare's Wandering Terminal WeChat mini program - a sub-app which helps owners find lost pets, leveraging the social connections and backend search potential of Tencent's WeChat network.

Team

The team consisted of volunteers from across design, computer science, and management fields. I was very inspired by the skillsets of each member of the team and how we were able to communicate across our different fields and areas of expertise. Between two different languages and many different timezones, with people who's daytime commitments ranged from studying at college to coding at Google, we were able to connect the different stages of app development to create this product.

My Role

This was the first time I worked with such a diverse team where both my Chinese language skills and programming knowledge were put to the test. Being able to communicate in Chinese helped me capture nuances and reach conclusions quickly when talking to the team in China while my programming knowledge helped me with my research in the limitations of WeChat mini programs and with talking ot the frontend and backend teams about the technological capabilities avavailable to our product.

UX

Mingyu, who is the UX designer on the team, created the UX design with input from me. She then documented the flows and intent to make it easily translatable into the final prototype.

I then worked off this document to create the interface and visuals which would facilitate the interactions Mingyu intended.

Brand Aesthetic

Design Elements

Top bar

Bottom menu

Popup

Image blocks

Buttons and options

Search inputs and drop downs

Icons

Hierarchy

A combination of rounded corners and drop shadow were used to indicate which blocks were in the "foreground" of the interface and were hence more important.

Physical layering of certain graphics in front of others was used to indicate what was "on top" or needed the most immediate attention. Addtionally, the typed search bar is "indented" to indicate that it requires the input of information to "fill" the space to function.

The pop color yellow was used to highlight the most important information and subtly lead the user through the flow by accentuating the next step.

Special thanks to Mingyu and Sophie 姐.

Programs used for this project include: