UX / UI

Birdwatching app redesign

Interactive prototype

This is a redesign of a Spanish birdwatching app: Aves de España from SEO/BirdLife. The goals of this redesign are to offer a better usability, and to add an interactive feature.

This app is intended to bring ornithology closer to the general population and to help in the identification of birds.

The existing application has a list of the birds that can be found in Spain, with an information sheet for each one of them; and a list of interesting places for birdwatching, also with an information sheet for each one of them.

Work methodology

01 / research

The existing app is tested with different methods (with and without users) to find usability errors.

02 / design

We work on the information architecture, develop wireframes and create an interactive prototype.

03 / evaluation

The redesign is tested with users to evaluate if the goal of improving the usability is met.

01 / research

Heuristic evaluation

The existing app is tested and compared with Jakob Nielsen’s 10 usability heuristics.

Some of the errors that were detected:

Lack of navigation labels

Navigation through the differents sections inside a bird’s sheet is indicated by icons, but there are not text labels, which may cause confusion to users as to what content they will encounter.

search bar is difficult to find

In the bird guide screen, search bar can only be accessed through the menu icon. It’s not visible at first.

Difficulty to compare elements

Some part of the texts refer to images, and to view them, users have to go back to the top of the screen, tap on the image and scroll through the slides until they find the correct one. In addition, these images are not labeled. All this makes it difficult to compare text and images.
It’s also difficult to compare the bird’s distribution map and its legend, which are on two different slides.

Poor contrast

Some texts do not have enough contrast with the background. This presents an accessibility barrier for users with low vision.

texts are too long

Descriptive texts are often very long and are not divided into paragraphs, nor are they formatted with bold words, lists, etc. This lack of formatting makes reading difficult.

01 / research

Survey

A survey is created and published in Facebook groups of ornithology enthusiasts, obtaining more than a thousand answers and valuable insights.
See results (ES)

most relevant information obtained:

59 %

Use ornithology apps

81 %

Use apps to identify birds

67 %

Their favorite features are read information and sound identification

Most frequent request

Would like to have a sound identification feature
After obtaining these results, it was decided that the interactive feature to be added to the app would be the identification of birds by recordings of their songs.

01 / research

User testing

A usability test is performed with users. In addition to confirming the errors detected in the heuristic evaluation, these are some of the errors found during this test:

repeated nav icons

There are two map icons, which confuses users as to what content they will find when tapping on each of them.

integrations that don't work

The recordings of the bird songs are played in an external application, and some users have not been able to listen to them because of errors.

List of places is difficult to browse

The map is not responsive to touch gestures and, in addition, the listing is difficult to navigate due to the alphabetical order of the zones, and it can be difficult to find something for users who are not familiar with the zones.

02 / design

Flow chart for the new interactive feature

02 / design

Sketches and wireframes

To begin with the design, hand sketches and low-fidelity wireframes are made, in order to define the information architecture of each screen.

02 / design

Interactive prototype

go to prototype

bird guide

The bird guide is divided into two tabs: Birds, where all species are shown; and Families, where the birds are divided into families. Both have a search engine and two views: list and gallery.

In the Birds tab we find a filter icon to filter the displayed results.

By default, birds that can be found near the user’s location are shown first in the list, but the list can also be sorted alphabetically.

bird info sheet

The bird sheet has a carousel of images, and information divided into several tabs. These navigation tabs are fixed at the top of the screen when scrolling.

In the Information tab, the user can listen to recordings of the bird’s song directly from the application. The information is presented in a very visual way, and the illustrations are shown next to the text where they’re being referred to.

The user can tap on words that may be unfamiliar for them because they are too technical, and a lightbox will open with a definition of the word.

The map is included in the Distribution tab along with its legend.

bird identification

Bird identification will always be accessible from the bottom navigation, no matter what screen the user is on.

When the recording button is pressed, its state changes to indicate that it’s recording. Once the recording has finished, the button’s state changes again and a link is displayed to access the results screen (results can also be accessed at a later time).

In the results screen, the user will be able to listen to his recording. Several results can be displayed in order of probability. For each result, the user will be able to listen to a recording of the song, access the bird’s info sheet, and confirm the result.

explore

The explore section is divided into two tabs:

Near me: the user can see on a map the places near their location where they can go birdwatching. These places will be added thanks to the identifications that other users make with the app. For each place, the user will be able to see a list of the identified birds, and access the location in the GPS navigator used by default in their phone.

Observation areas: list of all the interesting areas for birdwatching present in the current app, with a search bar and the possibility of sorting them by proximity to the user’s location, as well as alphabetical order by autonomous community. For each area, the user will be able to access an information sheet, similar to the bird info sheet.

menu and secondary screens

Through a side menu, the user will be able to access their account and secondary screens, such as the identification history, where they can see the identifications made previously, as well as see if they have any pending identification.

03 / evaluation

User testing

A new usability test is performed with users, this time using the prototype of the proposed redesign.

Comparison of results between both tests:

6

Critical errors on the original app

0

Critical errors on the proposed redesign

13

Non-critical errors on the original app

5

Non-critical errors on the proposed redesign

* Critical errors: those that prevent the user from completing the task.

* Non-critical errors: those that do not prevent the user from completing the task, but make it more difficult.