Discover lives around us: Animal Center

Software development/UX Design

Role

UX designer
front-end developer

Timeline

13 weeks

Deliverables

mobile application

Contributors

Chang Zeng
Gideon Chia
Sandy Hsiao

Overview

Animal Center is a mobile app development challenge in which two UX designers and three developers cooperate to raise public awareness about stray urban animals. We want to build a platform where people can share the animal they witnessed in commits and learn how to treat stray animals safely.

Context

The cities we live in are actually complex ecosystems. Stray and wild animals are an important part of this ecosystem.

Currently, 30,178 species are in the blink of extinction and 24% of them are living in urban areas.
When encountering wild stray animals, people like to take photos and post them on social media platforms
Well-intentioned activities can sometimes bring harm to stray animals

Field & User Research

We made field research in some of the areas, like campus and backstreets, where stray animals are most often found. We find that people often take pictures of stray animals that appear.
According to our interviews, 87% of the stray animals were found on people's commute to home/work/school, and 54% of the pictures captured were posted to social media, like Instagram and Twitter.

Target User

We chose campus students as the target users for the first iteration because we found that the campus is one of the most preferred living spaces for stray animals and students are more familiar with the technology so we do not need to consider user guidance the early iterations.

User Insights

Problems

· Stray animal information is not centralized on the internet

· Don not know the correct way to help

· Current SNS do not visualize location information

Needs

· A platform focusing on stray animal information shareing

· Learn about different animals

· Having animal witness location information presented in a intuitive way

Persona 

Interviewing 24 people during field research, we identified a persona that represents the common status for people concerning stray animals. Angela will be the supervisor for us during the rest of the design process. Whenever we feel uncertain about design choices, Angela will always be the one we asked for help.

Key Concepts

By analyzing our interviewee and Angela's experience encountering and sharing their information about stray animals, we came up with three key concepts:

01/

Locations

Providing users with the last seen locations informs users of an animal’s roaming radius

02/

Witness Map

Introducing an intuitive point of view showing the animals that share live spaces with us.

03/

Guidance

As most people do not know how to properly treat stray animals, we want to provide guidance so that people can know what help they can offer.

Background Research.

30,178

Species are on the brink of extinction

200-2,000

Extinctions every year

Environmental
Education

Proved to increase people’s awareness, knowledge,attitude towards local biodiversity

According to the IUCN Red List, 30,178 species are on the brink of extinction. Data shows that 200 to 2000 extinctions every year. Given the interconnected nature of every plant and animal, losing any single organism could potentially be devastating to other species which could be dependent on it. Amongst other natural occurring phenomena, human activities are cited to be one of the main reasons why extinction rates have picked up in recent years.

In a study that was conducted in 2018, 220 children aged 7 to 10 were put through a program which taught them to track and learn about birds that could be observed in their neighbourhoods. From the study, it was concluded that urban environmental education can increase children’s awareness, knowledge and attitudes towards local biodiversity, but more importantly, reconnecting them to nature. As a team, we would like to examine ways to reconnect people to their environments, and in the process, protect the diverse flora and fauna in our local communities.

Deciding the Focus.

Leveraging Commutes

Users are enticed to be more aware of local animals during their commutes

Convenient Posting Process

Ease of use in the posting, tagging and sharing process

Location Updates

Providing users with the last seen locations informs users of an animal’s roaming radius

"Those features are all great to have, but with limited development time, we need to consider more."

While the team members were excited about our vision, there was a 10 week time limitation for the development of the app, which means it is impossible to have all the
features well polished.

We decided to publish an MVP with the posting, education, and location features by the end of the quarter and continue to work on this project afterward.

Starting with the Essential Flow

We wanted to make the animal information-sharing experience as intuitive and simple as possible. A clear user flow map gave us a direct view of the interaction process when users want to reach specific features. We started from a minimum map containing only the key features:

The wireframes for these key screens were designed first to set a basic layout pattern for the app. The map helps us keep a clear image of the logical relationship between screens.

Dry, Gray Lo-fi Prototypes

We designed the low fidelity prototypes for the screens according to the flow map. These lo-fi prototypes allowed us to test the feasibility of the layout and the flow map and enabled fast itterations without redo everything from scratch.

Click to enlarge image

Dry, Gray Lo-fi Prototypes.

The early design of low-fidelity prototypes is always where most crazy ideas come from. Those impractical ideas can also inspire us and draw boundaries to the design. When prototyping, we followed the logical relationships provided in the user flow map. Once some specific thoreotical relationship did not turned out not well in practice, the map will be revised.

The wireframes did not touch on the visual designs like the text style, color pallet, and iconography, but showed us how the information and interactive portals layed out on the page. Having these wireframes in hand, we could run minimum user tests and gather feedbacks. The lo-fi design could be altered quickly to respond to the feedback and run a next round of test.

click to enlarge the image

Bring to User Test

We made physical copies of the lo-fi prototypes and used these interactive prototypes for user tests. The physical prototyps mimic real interactions and information showing on device.

After the test, we interviewed testers for direct advices and the test recordings were analyzed to see how the user journey waves during the test.

Feedback

By gathering the feedbacks the testers reported, we learned what experiences the users will actually have when using the app. This is important to improve our user flow map. Testers' opinion of our key features also helped us optimizing the core functions and information distribution of the app.

And this design -> test -> feedback -> design process goes on...

And on...

Until we got our finalized flow and wireframes!

Revision.

Before we were totally pissed by the pixel alignment, we took the advice gathered during user test and revised the prototype.

Tool bar

Some of the testers reported that the bottom tool bar was confusing to use. The "camera" button was designed to be at the center of the tool bar to encourage user creating post. But in test cases, users spend more time browsing posts. Camera was not used as frequenly as we expected.

We simplified the tool bar by moving the "Camera" portal to the top of the home page, where users consume most of the posts.

Map page

The map page was another place that has been complained the most. The old map only shows the location of posts as dots on the map and require additional tabs to see the detail. Users wish to see more information on the landing page of the map.

We capture the image of each post and generate an icon to present on the map. Posting time will also we shown beside the icon.

Upload entry

We first designed "swipe down" as the entry to the camera. But we realized during tests that users expected this interaction to refresh the page, so we changed the design into two upload buttons on the post and map pages.

High-Fidelity Prototype.

Completing all preparation works, designing the high-fidelity prototype is the work that the design team feel most passionate about. After weeks of research, test, and wireframing, we have gained deep understanding about our project and target users' expectations.

We choose a fresh and light art style to convey a lovely feeling. Rounded corners were widely used to ensure this amiable pattern as well. These design choices were also coming from the user test. We asked the testers how they were imaging the visual of the app by just interacting with the card board prototypes. We noticed that most testers mentioned keywords like "cute", "light", "animal crossing", so we decide to design following those idea.

selected pages:

Raise up some Highlights.

There are so many things I wish to share with you. But in order not to make this page unacceptable long, here are some highlights that present the core experience of the Animal Center

Map page

Map is the core of the "find lives around" experience. Posts are presented according to location information. Recent posts will be highlighted on the map for users who want to find the animals. Tapping on the witness report card will lead the users to the post detail.

Animal information page

Animal information page is the center of the education of the app. Users can check basic information of the animal and learn how to properly treat them when encountered.

Witness report page

Comming from the information page, users can get a clear view of the witness distribution of the certain species on the map. Posts about the species will be listed for quick browsing by users.

User profile page

User profile page is the hub of user posts. Users can check how many species have been captured and the thumbnails of their posts. The map is also shown for users to check the post locations they created.

"Time to call developers up!"

Handing the prototypes to developers does not mean we can just AFK for the rest of the time. In opposite, in the development phase, we have more difficult task to do.

Some times when developers are not familiar with the design guildance, we have to explain to the developers how the style is conveyed or get hands on the codes ourselves to see how to fix issues. When developers face technical difficulties implement certain features, we tried to understand what the difficulties are and adjust the design accordingly.

Check our GitHub page for the newest release!

Publish and Reflection!

In June 2021, we launched the first version of Animal Center on the campus platform. The app was well praised among users.

Seeing the pictures people post about the animals around them, we really feel that there are so many lovely creatures around us and living in the steel forests. We hope that more people will start to realize this and care about stray animals around them.

Due to the time limitations, a lot of our thought did not have the chance to come true at the time we release. In the future, we will keep working on this project, optimizing UX, and implement more features. Wish to see you in the next release!