Landing page for Pollinator Partnership Canada

Designing a landing page that leaves an impactful impression to achieve the non-profit’s call-to-action.

Roles: UX/UI designer, visual designer, UX writing, research
Tools: Figma, Procreate
Timeline: 2 weeks
Team: Individual
Challenge

The global decline in pollinating organisms is presenting a significant threat to both our food supply and the environment. In response to the issue, Pollinator Partnership Canada (P2C) has dedicated itself to the preservation and repopulation of these vital species. As a non-profit organization, it relies on volunteers and donations. My goal was to increase user engagement to help the organization to fulfill their mission. With that,

How might we raise awareness about this issue and to encourage website visitors to donate and join the team in supporting the cause?
Solution

I put myself in the audience's shoes, and a question became apparent: Why should I care about pollinators? I let this question become the guiding principle in my design process. My solution for increasing user engagement was to answer this question through a landing page, effectively using visuals and language to provide impactful responses.

Design Process Overview
Discover
P2C's mission

I searched for Pollinator Partnership Canada's mission on their main website to get to know the organization better. Their objective is to practice the "protection and promotion of pollinators and their ecosystems through conservation, education, and research".

Enlarge image
Discover
Website analysis

The following areas of improvement were identified on their main website.

01. The missing WHYs

The page mentions threats to pollinators but does not connect these risks to potential consequences for people. Without mentioning the impact on individuals, visitors may be less inclined to invest in the cause.

02. Poor button visibility

Some buttons had low contrast against the background due to their lack of colour fill. This was especially true for buttons against busy backgrounds, limiting accessibility.

03. Lack of credibility

While the page provides a description of their mission and tools that visitors can use, it does not articulate what they have achieved as an organization. Offering details and examples of the organization's activities in conservation, education, and research will help viewers gain trust in the organization.

Discover
Empathy maps

Empathy maps were created to represent and better understand users' thoughts, feelings, and experiences. Two user groups were considered: the first representing the general public with a mild interest in environmental issues, and the second representing a more specific group, consisting of farmers who depend on the prosperity of their crops for revenue generation.

Enlarge image
Define
Call-to-actions

I explored the existing privacy interface and found issues like lengthy paragraphs, absence of graphics/icons, and the use of technical terms (e.g., "nr-data.net" and "Inspectlet") which introduced ambiguity for average users unfamiliar with these terms.

Enlarge image
Under construction ...
Discover
Demographic research

Users’ age, gender, and geographic location were discovered to gain context and a better understanding of the users.

Gender

Around 46% of users are male, 54% female.

Age

25 - 40

Millennials are the largest user group at around 60%.

Location

Europe has the highest demand for Airbnb.

Define
Narrowing down problem areas

After identifying areas for data transparency improvement through policy examination, in-app privacy features, and user flows, I chose to concentrate on enhancing privacy practices in host-guest chatrooms. This area required the most attention as these chatrooms often mistakenly convey a sense of privacy unlike open spaces like host reviews.

Define
User persona

A user persona was created based on the collected information about user demographics. The persona emphasized the primary frustration among users: difficulty in locating privacy policies and challenges in comprehending lengthy paragraphs of information.

Enlarge image
Develop
Mid-fidelity wireframes

I explored four different methods of informing users about their privacy in the in-app messaging system using mid-fidelity prototypes, labeled as A, B, C, and D, followed by design iterations indicated by numbers. Each of the iterations were given feedback

Prototype A

Prototype A features a small information icon (i in a circle) at the top right corner of the chat room. Upon tapping, a pop-up shows that covers the privacy policy in more detail. Different placements of the icon were explored.

Enlarge image
Prototype B

Prototype B features a short statement outlining that Airbnb has access to user chat info, which sits above the text input box. Users are given the option to reveal more details about how and why Airbnb might review and scan their messages by tapping "Learn more." Minor design iterations, such as exploring different icon placements, were made.

Enlarge image
Prototype C

Prototype C features a new tab labeled "Information" on the inbox page. The red dot beside the inbox icon at the bottom navigation bar acts as a visual prompt to direct users to review Airbnb's privacy policy on messaging systems. The notification is cleared once the user taps "Done."

Enlarge image
Prototype D

Prototype D is similar to prototype C, but reduces a step in between. Now users can directly access the detailed outline of the privacy policy in the messaging system by tapping on the information tab. Icon size and placement were further explored.

Enlarge image
Develop
High-fidelity wireframing

Prototype B was chosen to be developed into interactive high-fidelity wireframes. What sets prototype B apart from the others is that the design is deeply attached to the contents of the message. Prototypes C and D sit outside of the chat room, while prototype B can be accessed right inside the chat room. Users have access to the message content and a reminder that Airbnb has access to this message content at the same time, making it the most accessible and straightforward way to remind and inform users of this policy.

Enlarge image
Deliver
Final Design
Enlarge image
Deliver
Reflection

I started prototyping with mid-fidelity designs in this project because I wanted to make it easier for others to interpret and understand the designs during feedback sessions. In hindsight, this approach slowed down the ideation process as my focus and energy shifted towards making things neat and accurate, rather than getting many ideas out fast. I also noticed myself becoming attached to designs that took more time to create mid-fidelity wireframes, eventually forming biases towards certain designs.

I learned that creating many low-fidelity wireframes quickly works better for my personal workflow as it helps me get into the flow state where I can explore a wide range of possible solutions without feeling blocked.

Challenge

Airbnb's lengthy, complex privacy policy often goes unread as it overwhelms its users. Consequently, the practice of reviewing and scanning their messaging platform is overlooked. This practice deserves more attention as chatrooms between hosts and customers mistakenly convey a sense of privacy unlike open spaces such as host reviews. With that,

How might we convey Airbnb's messaging platform scanning and reviewing to users without overwhelming them?
Solution

I added an optional pop-up that informs users of their privacy in the chatroom. The guiding prompt for the popup is located above the message input box, offering a constant yet subtle reminder without overwhelming users with excessive information. The language is kept plain and minimal. Icons were used for faster recognition of information.

Design Process Overview
Discover
Airbnb privacy policy exploration

Airbnb’s privacy policy and terms of service were reviewed to discover potential areas where data transparency could be improved.

Enlarge image
Discover
In-app privacy feature exploration

I explored the existing privacy interface and found issues like lengthy paragraphs, absence of graphics/icons, and the use of technical terms (e.g., "nr-data.net" and "Inspectlet") which introduced ambiguity for average users unfamiliar with these terms.

Enlarge image
Discover
Demographic research

Users’ age, gender, and geographic location were discovered to gain context and a better understanding of the users.

Gender

Around 46% of users are male, 54% female.

Age

25 - 40

Millennials are the largest user group at around 60%.

Location

Europe has the highest demand for Airbnb.

Discover
User flows

Two user flows were created to further identify areas of improvement in data transparency from the perspective of new users. The first flow focused on the onboarding process of the app, including the initial agreement of terms and services and privacy policy, with particular attention given to how these policies were made accessible to users. The second flow focused on the process of requesting a personal data report, clarifying how this feature could be found and the steps users needed to take to obtain their report.

Enlarge image
Define
Narrowing down problem areas

After identifying areas for data transparency improvement through policy examination, in-app privacy features, and user flows, I chose to concentrate on enhancing privacy practices in host-guest chatrooms. This area required the most attention as these chatrooms often mistakenly convey a sense of privacy unlike open spaces like host reviews.

Define
User persona

A user persona was created based on the collected information about user demographics. The persona highlighted the main problem of not being aware of the type and extent of information collected by Airbnb, and emphasized the need for clear communication regarding data privacy policies.

Enlarge image
Define
Problem definition

Three problems were identified in how users find and understand Airbnb's privacy policies and terms of service agreements. These problems became the guiding principles in the prototyping phases.

01. Lengthy, complex legal language

The privacy policy and terms of service agreement are written in complex legal language that the average user may not understand. They are also quite lengthy, requiring users to scroll extensively to find the specific section they are seeking.

02. Lack of visuals

Using images and icons to convey information is an effective way to simplify complex concepts and facilitate quick and efficient understanding. However, in Airbnb's legal documents, images and icons were rarely used, which slowed down the interpretation of information.

03. Out-of-reach legal information

Putting the Privacy Policy in the "Legal" section within the "Profile" tab is a good idea, but it's quite a long route for users who want to know about chatroom privacy. They'd have to go through "Profile," then "Legal," then "Privacy Policy," and scroll down to find the chatroom privacy section. And that's if they even know or care about the legal stuff.This hidden location of legal documents makes it less likely that users will be curious or engaged with the chatroom privacy practices.

Develop
Mid-fidelity wireframes

I explored four different methods of informing users about their privacy in the in-app messaging system using mid-fidelity prototypes, labeled as A, B, C, and D, followed by design iterations indicated by numbers. Each of the iterations were given feedback

Prototype A

Prototype A features a small information icon (i in a circle) at the top right corner of the chat room. Upon tapping, a pop-up shows that covers the privacy policy in more detail. Different placements of the icon were explored.

Enlarge image
Prototype B

Prototype B features a short statement outlining that Airbnb has access to user chat info, which sits above the text input box. Users are given the option to reveal more details about how and why Airbnb might review and scan their messages by tapping "Learn more." Minor design iterations, such as exploring different icon placements, were made.

Enlarge image
Prototype C

Prototype C features a new tab labeled "Information" on the inbox page. The red dot beside the inbox icon at the bottom navigation bar acts as a visual prompt to direct users to review Airbnb's privacy policy on messaging systems. The notification is cleared once the user taps "Done."

Enlarge image
Prototype D

Prototype D is similar to prototype C, but reduces a step in between. Now users can directly access the detailed outline of the privacy policy in the messaging system by tapping on the information tab. Icon size and placement were further explored.

Enlarge image
Develop
High-fidelity wireframing

Prototype B was chosen to be developed into interactive high-fidelity wireframes. What sets prototype B apart from the others is that the design is deeply attached to the contents of the message. Prototypes C and D sit outside of the chat room, while prototype B can be accessed right inside the chat room. Users have access to the message content and a reminder that Airbnb has access to this message content at the same time, making it the most accessible and straightforward way to remind and inform users of this policy.

Enlarge image
Deliver
Final Design
Enlarge image
Deliver
Reflection

Check out my other projects!