Adogp Mini Program

The goal behind Adogp is to help shelter dogs find their families through adoption. 

The WeChat mini program was designed to connect users with the shelter dogs. Users can easily browse for a dog to adopt, and submit their information to start the adoption process. The dog shelters can easily upload details of their rescued dogs.

My Role

Designing the brand identity. Creating the user flows, wireframes and export-ready assets.

cover-adogp

Process

As this was a brand new idea, I had the creative freedom to explore how the app was going to be designed. After doing some research on similar apps, we wanted to try a playful approach of sharing the shelter dogs.

Since we were "match-making" these dogs with potential owners, we came up with a "Tinder" design which users could swipe to view each dog. I made sketches of the key pages, to figure out what content would appear on each page. We thought about the following:

What do users need to know about the dog? How would they adopt the dog? What do the shelters need to know before deciding on an owner?

adogp-drawings

Wireframes

I made low-fidelity wireframes to share with the team, to discuss about any issues with them. The points that stood out were:

  • The adoption questionaire, while necessary for understanding how pet-savvy is the potential owner, might deter users as it was very long.
  • I thought that only shelters would be able to upload dogs, however we ended up deciding to allow anyone to upload a rescued dog.
  • I designed an "Admin" area which was meant for the shelters to login and upload dogs, but because of the change above it was no longer required.

Once we resolved most of the issues, I converted them to hi-fidelity wireframes.

adogp-wireframes-01

Low-fidelity wireframes of each flow

adogp-wireframes-02

Hi-fidelity wireframes of each flow

adogp-wireframes-03

Adoption and Post Dog flow

adogp-wireframes-04

My Uploads and Sent Requests flow