Vela App:

Elevating birdwatching through

user-centered design

This UX case study revolves around the process of crafting a user-friendly birdwatching app. We'll journey through key phases of understanding the project brief and defining the problem space, empathizing through user research, idea generation, prototyping, and testing and refining the prototype. The final output will be a mobile prototype of the birdwatching app.

Project overview


My Responsibilities:

Mentor: Farley Fernandes

Tutor: Jasmine Abu Sabha


Lo-fi, mid-fi, and hi-fi wireframes of the Vela app.

Lo-fi, mid-fi, and hi-fi wireframes for the dashboard of the Vela app.

Understanding & Defining

This project and case study stemmed from a brief aiming to create a tailored weather app prototype. Driven by my nature passion, I chose to craft an app for birdwatchers, given the intricate ties between bird behavior and weather. Despite the perceived clash between technology and nature, I firmly advocate for their coexistence.

Key aspects of the users:

Target user's interests:

Mission statement

Make birdwatching a more predictable endeavour for birders of all ages.

With the brief as my foundation and a clear audience in mind, I proceeded to define my initial problem space and hypothesis. Not being an avid birder, I researched various aspects of birdwatching and its relationship with weather, as well as data recording practices. This deepened my grasp of ornithology and birdwatching, aiding the formulation of a strong problem statement. This statement served as a guide during design, ensuring a focused solution without unnecessary complexities.

Problem statement:
Our birders need a way to understand what birds can be sighted in different weather conditions in their desired destination because they would like to plan ahead their birdwatching trips.

By the way, "birders" is a cute way that birdwatchers call themselves.


User interviews

I researched existing birdwatching apps but focused mainly on user research. By interviewing birdwatchers, I gained valuable insights into their data collection habits and app expectations. From these interviews with three individuals, I identified a thematic pattern and a high-level birdwatching flow: 

Research -> Prepare -> Observe -> Record -> Share -> Research, forming a closed loop cycle.

"When I make plans to travel to a specific destination for birdwatching, I usually do a lot of research beforehand to make sure I am going to the right place at the right time." 

- User Interview Participant #3

The high-level view flow of birdwatching. Shows a closed loop of research, prepare, observe, record, share actions.

A high-level view of the birdwatching cycle.

User Survey

In tandem with doing user interviews, I ran a survey. I would prefer to run surveys before user interviews, as they are a great tool for filtering out potential interview participants. But for this project we had a tight deadline and decided that running it in tandem would still give us some great quantitative data. In total there were 16 respondents.

One of the highlights for me was when we asked participants "What functionality do you think would be important for a birdwatching app for you?" giving them some options but also a free-text field to provide more input. 

And (as I was anxiously brushing the sweat from my brow), the participants overwhelmingly said that they would expect weather forecasting and bird sighting predictions from a birdwatching app. "We are on the right path!" I thought.


Now that I had a "What?" in the form of the problem statement and the birdwatching cycle, I would also need a "Who?" to make sure I create the design for the future users in mind. For this, I took aspects of the people I interviewed to collate them into 2 different personas.

I made sure to not just create an "average" person but also include unique day-to-day challenges, to make accessibility a priority from the get-go of the design.

I even ended up printing out the personas and hanging them up in front of my work desk to make sure they were front and center during the design process.


User journeys

Armed with the problem statement and personas, I embarked on solving the challenge at hand. To establish a foundation, I initiated the process by crafting user journeys that outline the essential steps users would need to take in order to achieve their birdwatching-related objectives. 

I determined the three necessary features for the app to function are as follows:

User flows

For effective forecasting, historical data plays a pivotal role. This birdwatching app requires a repository of weather, bird movement, and sighting data, with user contributions supplementing the latter. I honed in on the user journey of an experienced birder named Robert. By formulating user stories in the "As a...", "I want to...", "so that..." format, I ensured adaptability in the face of evolving solutions. While avoiding getting lost in the plethora of potential routes, I methodically mapped the primary path and even documented alternative avenues, recognizing the value of past drafts in the ongoing process.


Prototyping already? Weren't there supposed to be ideas? Maybe creating something tangible about the app to already look at???

Slight sidebar: The design process isn't strictly linear. Maintaining integrity and alignment often involves revisiting various stages. Tunnel vision can arise when focusing on preferred aspects, leading to oversight. Yet, I aim for an adaptable 80% completion point—usable for communication and as a foundational stage for subsequent design phases.

The user journeys and user flows were adjusted a number of times when creating the different fidelity wireframes and prototypes too.


Armed with user flows, I mapped the app—creating a sitemap. Drafts for the initial sitemap iterations were made on Obsidian. Starting by listing sitemap components, I organized them by topics.

The very first iteration of the sitemap for Vela.

The very first iteration of the sitemap for Vela created in Obsidian.

Card sort

To validate the core feature placements on my sitemap, I performed a card sort on OptimalSort with 5 participants. 

The initial sitemap was a great start, but some changes to be made were uncovered:

Sitemap "version 1" created on FigJam with Mirko Santangelo's nifty tool.


Building upon the sitemap, we transition from the initial user journeys to crafting wireframes and basic prototypes, which makes way for the upcoming testing. The primary aim is to develop prototypes for evaluating users' proficiency in achieving core feature objectives and comprehending and engaging with the app's concept. Concurrently, secondary objectives involve verifying technical functionality and a coherent logical sequence, while also ensuring visual elements possess cohesion, rationale, and harmony.

Low fidelity wireframes

I began by making basic wireframes to visualize user flows as screens. This involved outlining the necessary steps for users to achieve their goal, determining key information placement, and sketching a rough layout of the content.

An early low fidelity concept of the steps that the user needs to take to identify a bird.

Mid fidelity wireframes

After some back and forth, adding and removing screens from the low fidelity concepts it was time to get started on the mid fidelity wireframes and create a prototype.

These wireframes would be helpful at better conveying the purpose and functionality of the app, giving a first hands-on experience of the different functions.

Mid fidelity wireframes showing parts of the bird identification flow.

Testing & Refining

Usability testing

I crafted a clickable prototype using mid-fidelity wireframes and conducted usability tests with 6 participants. Analyzing the data, I noted issues on cards and performed affinity mapping. By assessing problem occurrence and interviewee emotions, I used Jakob Nielsen's error rating scale to prioritize problems. I then revisited the design, addressing these issues—a process that highlighted my blind spots. Usability testing serves as a valuable audience check-in, ironing out major concerns before detailed development begins.

From a usability perspective there were a number of big and small changes. Here are the biggest changes I uncovered to be made for the core features of the app.

1. "Tracking bird sighting" start page is redundant. 

In an earlier concept it made sense to categorize tracking bird sightings feature to "User knows bird" and "User doesn't know bird". The latter starting the identification process where the user chooses the method for identification.
Fix: Merge with the "Choose method" page.

2. Bird visibility screen is not easily understandable.

Fix: Added tooltips, also making sure the information is coherent and goal-oriented. Bird visibility should show how likely it is that a user comes across birds, what birds, and to show what birds have recently been sighted in the location.

2.1. During the usability tests, users also wanted to navigate from the Bird visibility screen to hotspots near them. I then provided them a gateway via a button.

User Experience and User Interface are tightly bound. With a big part of UI being UX in praxis.

So when creating high fidelity wireframes, there are a number of new guiding principles to keep track of. The colors, padding, grid layouts, making sure the iconography is unified, that the font and typeface of the typography make sense, look good and is readable, illustration, and the buttons! And not to forget, making sure all of these parts go through assessment for accessibility. And the logo...

Design language system

Before creating the high fidelity wireframes, I had to create the visual identity of the product. While creating this I also had to keep in mind what would be appropriate and accessible.

User Experience and User Interface are tightly bound. With a big part of UI being UX in praxis.

Sneak peak of the design language system: the main colors, typography, grid layout, colors rules for icons and enabled-state buttons for Vela.

Click here to view the complete design language system for Vela in Figma.

High fidelity wireframes

Visual design breathes life into mid-fidelity wireframes, elevating them to high-fidelity counterparts. Through meticulous attention to details like color schemes, typography choices, iconography consistency, and precise layout arrangements, visual design transforms abstract concepts into tangible, engaging user interfaces. This process enhances user comprehension, emotional resonance, and overall usability, creating a dynamic and polished representation of the user experience.

The onboarding screen in it's mid-fidelity form versus the version updated with visual design.

The onboarding screen in it's mid-fidelity form versus the version updated with visual design.

Peer reviews

I reached the 80% mark in developing high-fidelity wireframes and interactive prototypes before seeking input from peers. After gathering their feedback, I evaluated and prioritized changes, focusing on usability enhancements. This process has led to the latest version of the prototype.

Here are some of the screens my peers gave critique to and that received refinement:

Consolidated flow of going from the bird identification results to the bird profile to complete more actions. Also updated the styling and created small cards for lists.

A question screen for the bird identification flow was made more clearer by giving each option an appropriate "sizing guide" and fixing the button to be in disabled-state as no input has been given.

Current high fidelity prototype

Without further ado, the current version of the Vela prototype on Figma! 

Further development

There are a number of improvements or features that haven't been implemented yet to the prototype. The next step is to start the design process on the "Share" end of the birdwatching flow. This would entail creating a public profile where the user is able to show off their bird sightings and bird checklist progress, among other elements.

Moreover, there are still design decisions that need to be proven by further usability tests and user research.

Closing words

Thank you for reading the case study and engaging with my prototype! This prototype and exploration in the discipline of UX design happened as part of CareerFoundry's UX Immersion course from April to August of 2023.

If you'd like to get in contact or have any thoughts about the design (or want to send me some great cat memes), I invite you to get in contact.

Vela's logo.

Based on the icon provided by Freepik.