Native: A Case Study

I made an app for watching animals

The changing health of our planet remains a polarising subject. The impact of carbon dioxide emissions are still in debate. For many of us, the loss of species is a more tangible metric. Why? We’re empathetic by nature. And it’s much harder to empathise with something we can’t immediately see — e.g. rising sea levels. Sure, we can’t attribute every extinction to climate change, but we can link the majority with our massive footprint.

What’s my audience?

In the pursuit of spreading effective awareness, this is an app for anyone who likes animals. In an ideal world, it would be a cinch to get an app like this in front of those calling the shots on climate. It’s not that they don’t read their DMs - their secretaries do… Even so, those who are older are more likely to have resigned themselves to the idea that climate change is a non-issue. The message is more likely to have an impression on the younger generation. The people who may one day succeed those secretary wielding climate deniers.

Let’s pretend that an effective experience managed to engage a thousand users. The first would probably be those who just watched an episode of Blue Planet II — the curious ones. The second; budding zoologists. Closely followed by biology students, and avid environmentalists.

What potential did I come up with?

This is Native. A take on what that experience could be. It focuses on conservation, and attempts to show the collective health of our neighbours (that we know of). It also filters creatures by the month in which their status changed.

Psychology tells us that making users feel enough guilt to take action never works by itself. What if we showed people that what we do already is actually keeping some animals from the brink? This combined with a dose of reality could be the motivation we need. So I added a tab view that shows the animals whose numbers have restored. And a ‘Discovered’ view — describing newfound species. When a new discovery hits the list, users get a notification. This helps with user retention.


When you see an animal go from Threatened to Restored…

It also makes it more of a pleasant experience — no one wants an app that makes them hate humanity.

Learning more about a creature is a tap away. In the reading view, users can bookmark an animal (they’ll get a notification if it changes status), swipe through images and share with others. Reading view also allows a continuous scroll through species, like a browser. Much like the two-mode interaction model Instagram uses. It’s the interactive equivalent of getting lost in a Wikipedia journey.

As it’s not often for an animal to move between statuses, other user retention strategies include search.

The design process

To my surprise, in my research I hadn’t stumbled upon any sort of contender for organising species based on conservation. It was even difficult to find a concise list of animals that belonged to a particular status. It was in this process that I found Wikipedia to be the most reliable source of information (I know). I then concluded that the app should pull live data from their web API. Then it was time to ideate.

Some initial interface sketches

As ideas do, my ideas evolved during this process. I found myself widening the project scope with new features. The first was a feed of real-time climate change data, made possible by NASA’s numbers. The second — a news feed, featuring any stories related to climate change. When I’d decided on a direction, I produced some blockframes. Before moving on to high-fidelity versions.

A main, scrollable view of species with ‘vitals’ and ‘news’ views, 2015.

The first ideation was a valuable lesson. After some closed feedback, I came to the realisation that it was too much. A classic case of over-ambition. These extra features, while good intentioned, were a distraction. And, from a build perspective, they could only ever be conceptual. So I canned them. I reminded myself of the goal, and devoted more attention to the card feed I created. The animals that should be front and centre. With the original scope back on track, the visual identity developed, alongside my personal tastes.

Redesigned cards with three filter buttons. Conservation type, animal type, and date. Early 2016.

I felt the second ideation was a clear improvement. A cleaner look, with redesigned cards. With the removal of the extra views, there was a lot more room to play with. It also featured filter button operations that would allow the easy finding of species. Best of all, we reduced the navigation to one instead of two. On reflection, there was still work to do from a usability perspective. So I developed this further.

Information architecture and navigation

An enduring idea I had carried from the very beginning was using colour accents to represent types of species. Red for mammals, green for reptiles, purple for birds and blue for fish. It was here that I found myself asking the long overdue question:

Does this global filter really add to the experience?

[whispering] Also… what about amphibians?

This question is something I would be able to answer with user testing, but I wanted to give it the best start I could. So, the concept of filtering results was refined and moved to within search, instead of a global feature. This shift in information architecture had two benefits. The first, was a less intrusive interface. The second was that it was now necessary to redesign the filter-based navigation.

Tabbed navigation allows quick access to dedicated conservation status views. One interaction, instead of two that you’d need on the filter-based navigation — easier and more accessible. Instant, visible feedback.

The icon colours are more muted — they’re less of a distraction and help keep the content front and centre. They darken to indicate the active page. I wanted to add some subtle interaction animations, but intentionally don’t have any animation for ‘Extinct’, keeping in with the utterly lifeless species idea.

Cards

Each card took up a lot of space, and while this was good for helping the user focus on species, the rectangular shape might make the length feel a bit too much for larger screen sizes. So the cards evolved to a much more flexible, square shape. This decision was to help make the Native experience as consistent as possible across multiple screen sizes. It also meant that we could present more species on smaller devices — instead of a single column we could have double. Expanding a card now prompts an entirely new view. This feels much more immersive and gives the user another way to navigate through species (swipe down at the end of the scroll view).

What’s to come?

The icons need a bit of work. I’d like to make them feel a bit more intuitive and recognisable. While feeling like they belong to the almost ‘sterile’ visual feel.

Once the prototype is ready, I’ll get another round of online testing and feedback. Twenty or so people giving their thoughts and answering questions. If it calls for another round of iteration, I’ll do that until I’m happy with the result. Then I’ll reach out to environmental charities and ask if they want to get involved. If they could boost Native’s reception with a platform, a thousand users would be more attainable. I’ll also see if I can make a live data prototype using the Wikipedia API.

As much as I’d like to attempt to build the experience myself, in the interest of quality I’d most likely outsource development and future updates. If the app goes well I’d think about creating a web version using what I’d learned with the app. I’ve heard that React Studio is great, so it might be fun to create a web experience with that.

How might I measure success?

In the short term, measuring success would start with download statistics. Looking at the number of related social media impressions. Recording the average time users spend in the app. As for long term, that might prove a bit more difficult. If the experience has a good reception, an option would be to set up a focus group for feedback. After a few months, we could also send a short Typeform questionnaire asking for thoughts. Or send a non-intrusive app notification. We could ask people how they feel about climate change based on their experience using Native. If it inspired someone enough to become an environmentalist or specialise in a related field, that would be the holy grail.

Why am I proud of this?

It’s an accessible experience that carries a message. It’s a passion project that has the potential to drive significant awareness. And an experience I developed over the years. At the beginning I was too ambitious and made something overcomplicated as a result. I was then able to look at the project in an objective way. Realising I had set unrealistic expectations, I set about reassessing what it should be.

Since then, I dropped the rose-tinted glasses in favour of a microscope. I’ve learned, adapted and streamlined the experience. I iterated some more with feedback from peers and Slack communities. As I grew and experienced more as a designer, this reflected in the product. It aligns with my own values.

In the interest of being as objective as possible, I’d be super interested in your thoughts. I’d very much appreciate any feedback. Even if you think it’s terrible and that I’m barking up the wrong tree.

Thank you for reading.

🎉