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

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.

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.

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:

1. Birds & weather forecasting (The Unique Selling Point of the app!)

2. Bird identification

3. Search

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.

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:

• Users were confused by the wording of some of the sections. To bring more clarity, they were renamed as follows:

  1. "Forecast analysis" to "Birds & weather forecast"

  2. "Log bird sighting" to "Bird data entry"

  3. "(Local) Bird sightings" to "(Local) Bird movement forecast"

• All Settings and Help sections were moved under the the Birder profile section. Per the card sort, users expected everything to do with personalization and help under their profile.

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.

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.

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.

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.

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.

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.

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:

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.