project overview

The Canadian Advanced Air Mobility Consortium (CAAM) needed a new website to fit their new organization goals. I was hired as the principal designer to lead the complete redesign of their website, from user interviews to visual design.

project brief

what: A website for the Canadian Advanced Air Mobility Consortium (CAAM) that acts as an education and advocacy tool.
‍
role: UX/UI Designer

deliverables: project strategy, UX research (interviews), persona development, experience mapping, user stories, design system, and website redesign of: landing page, about, members, projects, events, learning hub, learning journey, and resources.

case study contents

1. the problem space

2. project strategy

3. ux research

4. product management

5. featured designs

6. key learnings

what is AAM?

Concept image of EmbraerX eVTOL in Paris

Concept image of EmbraerX electric vertical takeoff and landing (eVTOL) aircraft in Paris.

Advanced air mobility (AAM) is the future of aviation. AAM encompasses everything from drone deliveries to air taxis to hydrogen-fuel cell airliners. Getting this industry off the ground takes a lot of collaboration among industry, government, and academia to develop the technology and ensure flights are safe above all.

CAAM's challenge

CAAM is a federal not-for-profit that is leading the national strategy for AAM in Canada. Started in 2019, in just a few short years CAAM has made incredible strides as a leader of the AAM movement, backed by powerful partners in government and industry.

But as the state of the industry changes, so too must CAAM. CAAM’s flexibility has allowed it to pivot with their industry’s needs. They needed a designer to help them determine those needs and align their website and digital strategy. And along the way, they learned UX provided tremendous value to their business strategy as well.

design challenge

How might we encourage more stakeholders to create and collaborate in industry-led projects so that they are advancing the AAM industry?

writing the strategy

To align on expectations for this project, my first task was creating a Project Strategy. This included an overview on who CAAM is and what values CAAM provides to stakeholders, the problem space, CAAM’s intended goal or outcome of this project, How Might We statements, constraints, design objectives, and success metrics.

Building this Project Strategy was a highly collaborative process among myself, CAAM’s CEO and COO to ensure I was understanding the organization’s needs and purpose clearly. Not only did this fast-track the onboarding process, but it also ensured everyone at CAAM was moving in the same direction and aligned on outcomes.

project objectives

Build robust and validated user personas that represent CAAM's target audiences

Iterate or build on CAAM's existing website design to boost engagement among CAAM's priority personas

Restructure content hierarchy according to user needs and web design standards

research strategy

CAAM’s COO had already begun to organize stakeholder engagement into personas, but they needed help determining persona categories and refining them into workable assets. After reviewing the existing engagement data, I drafted research objectives to outline what was missing and what we still need to know to design an effective product.

research objectives

Learn how our personas feel about the AAM industry and CAAM as an organization.

Understand what barriers are preventing our stakeholders from engaging with AAM projects.

Explore what our stakeholders need to overcome those barriers.

user interviews

Based on the research objectives, I decided to conduct interviews with a number of key stakeholders to validate existing assumptions and discover any new data. While qualitative research methods don’t indicate scale or causation like quantitative methods, it does allow designers to undercover behaviours and attitudes and understand why they exist.
‍
Due to limited time, I was only able to conduct 1-2 interviews per persona category (7 total). Ideally, I would have conducted 5-10 interviews per persona category, but given the amount of data already known about stakeholders and the length of this project, CAAM’s senior leadership and I made the strategic decision to forgo additional interviews.

Image of data synthesis from research project. The synthesis includes pain points, motivators and behaviours organized into themes.

Image: interview data synthesised using "sticky note" cards with quotes. Cards are colour coded into pain points, motivators, and behaviours. They are then grouped around themes which are used to create insight statements.

personas

Once the research was complete, I returned to the original personas to make revisions. Since we did not interview enough people to confidently remove existing insight statements, I separated them into validated data vs. assumptions. Anything that was completely refuted was deleted or adjusted.
‍
In an effort to be more inclusive and equitable, I also decided to not include any demographics. Since psychographics are more important here for CAAM, the benefits of including demographics did not outweigh the potential bias or stereotypes that might be introduced.

While many personas had only slight adjustments, our government personas changed dramatically. Almost immediately, we saw the validation of our new government persona as CAAM began engaging in a government project in a manner that matched with the type of engagement described in the persona.

5 persona types listed which read government, industry, academia, not-for-profit, and general public.

CAAM’s 2022 strategy pivot

In the first week of January, 2022, CAAM’s senior leadership met for a week-long strategic planning session. Using the abbreviated research report among other information, CAAM’s senior leadership settled on three major outcomes that shifted the scope, intention and constraints of the design project.

CAAM is shifting to be more hands-off for R&D projects. Industry needs to lead the innovation, CAAM will lead the vision and values.
CAAM is prioritizing education on AAM for audiences that are unfamiliar.
CAAM needs to produce evergreen content that is lightweight and can last for a few years.

These changes shifted the primary audiences of the website, the style in which content was written, and the primary function of the website. While this could have been seen as disruptive to the project, I found it provided much-needed constraints on the project and helped us further align our vision.

product management

As the principal designer on the team, I was tasked with leading design efforts with support from CAAM’s COO and web developer. I have never worked under an official product manager, so the role was completely new to me. In response, I learned the basics of product management via online courses to better understand how to lead an agile design project.

methodology

After learning about product management styles, I settled on doing a mixture between scrum and kanban for the design team. This meant that we would work in two-week sprints on different sections of the website. Each sprint would roughly follow a pattern of a design sprint: map, sketch, wireframe, test, prototype. At the end of each sprint, we’d have a working prototype for a portion of the website that was ready for development. This translated into an agile design roadmap of design and development over the course of the next 12 weeks.

Three side-by-side screenshots of the designs for the "learn" feature.

product strategy

With the outcomes of CAAM’s strategic planning session in mind, I developed the Product Strategy. Different from the Project Strategy covered earlier, the Product Strategy included:

product concept

What will our website do
Why will we have this website
Benefits our website provides to users

stakeholder needs

Persona needs
Business needs

constrains

Content Requirements
Function Requirements

design deliverables

Based on this strategy, we decided to redesign and add the following sections:

Landing Page
About CAAM
Learn about AAM (New)
Projects
Events
Stay Updated

While most of the above pages already existed and would be redesigned, the “Learn About AAM” section was added to address user needs. For the remainder of the case study, I will look at the design process for the Learn About AAM, About CAAM sections and the landing page to highlight some of the key decisions I made during this process.

featured design: "learn"

the "learn" pages

The “Learn” portion of our website was created to primarily satisfy our government and general public personas who know little about AAM but are interested to learn more. Based on CAAM’s organizational needs and the needs of our personas, we split the “Learn” section into two core functionalities:

A “Learning Journey” - three designed informational pages explaining the foundations of AAM.
A “Learning Hub” which contained all our resources, blogs, videos, and reports in one place with easy search, sort, and filter functionality.

the learning journey

The Learning Journey covered the following questions, each with its own page:

What is AAM?
Why does AAM matter?
When will AAM be here?

The challenge here was building these pages entirely from scratch. While CAAM’s COO worked on the informational content, I wireframed the layout and structure using filler content.

I needed to build three web pages with the following constraints:

educational

Information needed to be clear and easily understood

engaging

Content needed to be presented in a digital story with striking visuals

interactive

Users should have control over the story and feel involved without it becoming annoying

slightly animated

Keep the user reading without feeling too playful, informal, or casual

wireframe iterations

After viewing inspiration, I sketched out a few variations of different features I could build on the website. Once I had a number of variations available, I wireframed the most promising options.
‍
I relied on common design patterns for certain features (such as card designs for blog posts) but balanced that with more creative solutions. These creative solutions, such as the “AAM Operations” section, went through many iterations to find engaging ways to display content while still creating a comprehensive user experience.
‍
The hardest challenge here was designing something new to a user (and thus unfamiliar) that provided enough context, labels, and affordances to help the user quickly learn and understand how to use it. To validate usability, I conducted quick user testing and found that users greatly enjoyed this section.

design iterations

Throughout the design process, I made a number of changes to the content, structure and layout of the pages based on feedback from the team and from user testing. In the image below, you can see four distinct areas that changed dramatically on the "What is AAM" page.

1. Local Nav: The original design included a local navigation bar that would float on the screen during scroll, indicating where the user was located in the page. This was removed in the final design, as the content on the page was reduced and so there was no longer a need for navigational assists.

2. Animations: To keep the page engaging and animated, I planned to include a small animation that was triggered upon scrolling. However, discussing with CAAM's COO, we decided to have all visual assets convey the tangibility of AAM through real images and videos.

3. AAM Operations: CAAM believed it was crucial for users new to AAM to understand the different operations for AAM. This section would show images of the different types of operations, and then upon hover, a description of the operation would appear. We moved away from this design since it was visually difficult to convey operations when many operations were still conceptual. The final product combined AAM operations with types of aircraft.

4. Types of Aircraft: This is an example of an interactive design, where I had to ensure users understood how to operate this feature. I considered removing the interaction entirely, so that important content was not hidden behind interactions, but user feedback suggested that the interaction broke up the reading on the screen.

the hi-fidelity challenge

When designing the hi-fidelity wireframes, the primary challenge was finding images, videos, and graphics from our partners that fit the design while being visually consistent.

This delayed the project and ended up taking the entire 12 weeks to finish (in tandem with other sprint projects). But it was worth it, as the visual assets were one of the most important components of these web pages to express the tangibility of the AAM industry.

Image: styled "use cases" section on the "Why does AAM matter?" page. The images are meant to convey tangibility, which is difficult when not all use cases have developed aircraft, such as Helijet's Air Ambulance concept.

Screenshot of the design for the use case portion of the "Why does AAM matter?" page.

featured design: about & projects

the "about" pages

When working on the About section, I worked closely with CAAM’s COO to evaluate the content needed for these pages, and how the IA should change based on content. The final pages to design during this sprint included:

"Who we are"
"Team and board"
"Members"
"Projects"

Considering our government and industry personas were the most important for this section, we opted for using navigation drop-downs to separate pages so that busy professionals can find the information they are looking for as fast as possible.

the projects page

On the original projects page, I knew a few users had missed the regional projects section entirely when viewing CAAM’s work.

My theory as to why is that regional projects were styled significantly different than the national projects, so users did not recognize that the two sections described projects. The regional projects showed a timeline first (national projects had no timeline), the project details were hidden behind a dropdown, and the section was a dark colour (contrasted with the national projects in white) which made this section feel like a footer.

Image: the original design for the projects page, showing the national and regional projects.

The original projects page on CAAM's website.

projects redesign

For the redesign, I styled all projects similarly and pulled the important timeline content to the front of the regional projects.

I kept the card design simplistic as the primary users of this page are looking for content quickly, not flashy designs.

Finally, I added a section that showed how members could engage in a project, which ties back into the original design challenge of “How might we encourage more stakeholders to create and collaborate in industry-led projects so that they are advancing the AAM industry?”

Image: the redesign of the projects page.

featured design: landing page and stay updated

the landing page

In the product roadmap, I saved the Landing page for last. Since the landing page serves as a summary of the website and helps entice users to explore deeper, I wanted to design all the other pages first to know what exactly needed to go on the landing page. In doing this, the landing page only took a few days to design.

lo-fi wireframes

I created numerous variations of the wireframe and received feedback before moving forward. Many of the differences are subtle and pertain more to to layout and content order.

Image: three lo-fi wireframe options for the landing page. Click the image to open in a new tab.

hi-fi prototype

Creating the hi-fidelity prototype required new UI techniques I had not used before. In particular, the second section with three cards "What is AAM?", "Why does AAM matter?" and "When will AAM be here?" took some time to figure out proper styling.

In the end, I used neutral clouds with a heavy brand green overlay as the background. I added the white line between the hero video and this section to better transition between the colour and style differences.

Image: Four frames in the Landing Page prototype showing the different states in the Intro to AAM section (section 2) and the Testimonials section (section 5). When users hover over the question cards, they turn white and a discover button appear. In user testing, I found that users expected to hover over the card and see the answer, but upon seeing the discover button, they realized the answer would need to be found on another page. Users reported that this helped them understand what to expect on the next page.

Click the image to view in a new tab.

mobile responsive

Almost 80% of CAAM's web traffic is visiting from desktop, so I created the designs in desktop first. But 20% of mobile users is still a sizable amount, so it was crucial our website responded to all viewports.
‍
The developer coding the website was able to create components that automatically adjusted size according to the view port. However, this "automatic responsiveness" didn't always work (a surprise to designers nowhere).

In the cases where designs needed to be created specifically for mobile, I also created responsive layouts. In certain cases, I created designs that were specifically optimized for mobile functionality.

Image: the mobile responsive frame for the landing page. On desktop, the three question cards change state while hovering. Since there are no hover interactions on mobile, the cards act as static buttons instead. While it is disappointing to lose some of the animation on mobile, it does not impact usability.

Screenshot of the landing page designed for a mobile viewport.

CRO Optimization

While doing the landing page, I also worked with CAAM’s COO to evaluate our conversion goals and what our primary CTAs should be.

Since CAAM was transitioning from a membership-generation website to an educational website, we needed to remove the old “Join Us” CTA and replace it with a CTA that aligned with an educational goal.

In the end, we determined that encouraging users to “Stay Updated” on the status of the industry best represented CAAM’s organizational goals while also serving the needs of our personas.

Image: "Stay Updated" page, with a newsletter signup form and our social media links.

We deliberately removed the contact form from this page, as most of the AAM industry is already connected with us, and we wanted to reduce the amount of spam emails. "Contact" can still be found under "About Us".

Screenshot of the newly designed "stay updated" page

key learnings

I continue to grow and expand on my technical and soft skills with every design project I complete. Thanks to the supportive team at CAAM, I was able to dedicate 5 hours a week to learning, whether that was UX & UI related, or a part of our team's personal growth to be more equitable and understanding of diverse perspectives.

Vulnerability leads to innovation:
‍
CAAM’s workplace culture focused on building a safe and helpful environment, where we knew we could push ourselves and take strategic risks and rely on each other if we failed. It led to more innovation, more passion, and more confidence in our teammates.

A good leader empowers their team:
‍
‍While at CAAM, I got to work under two of the most intelligent, thoughtful, and revolutionary leaders I have ever experienced. They embodied CAAM’s values and lead by example, fostering an incredibly close-knit company culture. The bar has been set high by these two and I can’t wait to see where they take CAAM.

Education is powerful:
‍
‍To "walk the talk", CAAM's team completed two Coursera courses to broaden our perspectives and make a more inclusive workspace and industry. These were Indigenous Canadian History, and Feminism & Social Justice. Every two weeks, we had powerful group discussions on our learning, which opened my eyes to new perspectives. I deeply realized that if I didn't understand someone's perspective, it can help to learn the historical context for their identity.

I'm a natural leader:
‍
‍‍I never thought of myself as a leader, but this project showed to me that I am one. It was easy for me to see the big picture of the project and envision how an interdisciplinary team (marketing, content writing, development) could come together and make this website a reality. I now aspire to be in leadership positions and help motivate my team to create amazing products.