Bee Protectors Website
Case Study | Kelly Santos | 2023
This case study details the step-by-step development process of Bee Protectors Website, using the Design Thinking methodology, which resulted in a website to inspire, educate, and empower individuals in bee protection.
Table of Contents
keyboard_arrow_down closeProject overview
About the project
This project aims to develop a website that raises public awareness about the crucial role bees play in our ecosystem and the alarming consequences of their decline, while ultimately strengthening community connections.
Key objectives
- Provide visually engaging and user-friendly access to conservation resources (guides, articles, and educational materials)
- Provide clear opportunities to engage individuals and motivate them to take action for bee conservation.
Project Details
Scope of Work
- Apply a Human-Centred Design (HCD) approach, utilising the Design Thinking methodology to drive the project from discovery through to execution.
- Conduct user research and analysis to understand user needs, pain points, behaviours, and refining the problem statement.
- Design user flows, wireframes, prototypes, and animations.
- Test the app to ensure usability and iterate the designs based on feedback.
Methodology
Design Thinking is a human-centred methodology that uses a five-stage process, Empathise, Define, Ideate, Prototype, and Test, to understand users and solve problems, resulting in solutions that are desirable, feasible, and viable.
This project employed the Design Thinking methodology, guiding the process through user research, ideation, prototyping, and testing to produce the final Bee Protectors Website design.
Empathise
Empathise is the first phase of the Design Thinking process, it focuses on employing a variety of tools to uncover and understand the feelings, thoughts, and experiences of users, gathering data and insights to guide the design solutions.
To ensure a deep understanding of users and their experiences, ten key methods were utilised to gather and structure data:
- Organisational Assessment
- Internal Discovery
- Observations
- Preliminary Project Goal
- User interviews
- Closed-end Survey
- Personas
- Empathy maps
- User journeys
- Pain points
Organisational Assessment
An organisational assessment provides a foundational understanding of the business context, helping to gather data to identify the essential components that shape an organisation’s identity, strategy, and actions.
At this stage, the project was defined only by its core topic: the development of a website for the Bee Protectors community.
To gain a deeper understanding of the organization’s objectives, structure, and values, an organisational assessment was conducted.
This process was supported by structured stakeholder meetings, face-to-face interviews with internal users, and direct field observations.
Internal Discovery
Stakeholders meeting internal user interviews
The stakeholder meeting and, face-to-face interviews with internal users revealed strategic and cultural details about the organization by answering key questions, as listed below, which ultimately shaped the preliminary picture of its identity and the future website.
| Category | Details Revealed |
|---|---|
| Goal | Create a website to educate the public about bees’ importance and the risks of their decline. |
| Expectations | Amplify their bee conservation message, increasing awareness and inspiring more people to join their cause. |
| Community Structure | Farmers, ecologists, and enthusiasts unite as volunteers, easing access to conservation resources and events. |
| Mission | Engage individuals and motivate them to take action for bee conservation. |
| Vision | Increase the number of initiatives and volunteers for bee conservation by 100% until 2026. |
| Values | Collaboration, sustainability, education, and community engagement. |
Observations
Observation is a method that involves systematically watching and recording behaviours, events, or phenomena. It is a qualitative research approach that allows to gather data in a natural environment, without directly interacting with participants, to better understand the user experience.
An observation session was conducted on Saturday, 28 October 2023, during a visit to the Community Centre. The visit aimed to better understand community engagement and participation in bee-related activities.
Observation Note
The community centre offered diverse activities, attracting visitors of all ages. Many were interested in bee-friendly flower planting, reflecting growing awareness of pollinator support. The atmosphere was enthusiastic and collaborative.
Insight
The community centre's diverse activities demonstrate their commitment to providing opportunities for both education and hands-on involvement in bee conservation. This approach is likely to attract a wider audience and foster a stronger sense of community.
Preliminary Project Goal
A project goal is a clear, concise statement that describes the desired outcome or result a project aims to achieve. It guides the project team, aligns stakeholders, and ensures that all efforts are focused on meeting user needs and business objectives.
The outcome of the Organisational Assessment helped shape the preliminary project goal:
Develop a website to raise public awareness about the crucial role of bees in our ecosystem and the alarming consequences of their decline. Additionally, the website must serve as an online extension of the community, providing easy access to initiatives, events, groups, and resources to engage individuals and motivate them to take action for bee conservation.
User Interviews
User interviews is a method used to gather qualitative data and insights; it involves conversations with participants to understand their thoughts, feelings, and experiences.
Semi-structured, face-to-face interviews were conducted mostly to identify the users' (general public this time) needs, motivations, and pain points related to bee conservation.
User Interviews Planning
User Interviews Notes
The answers were organized into categories to guide the project's development, such as Pain Points, Behaviours, Who, Awareness, Interest, Goals, Motivation, Expectations, Barriers, Preferences, and Needs.
User Interviews Outcome
The user interview analysis successfully identified a diverse segment of target users and outlines their varying levels of bee conservation awareness and interest.
This diversity is evident in the following quote extracts:
| Quote Extract | Category / Analysis | Implication |
|---|---|---|
I didn't know there were things I could do to help protect bees. |
Awareness / Barriers | Highlights a low level of awareness and a significant barrier to action (lack of practical knowledge). |
I'm curious to learn more about bees and their role in nature. |
Interest / Knowledge Gap | Represents a moderate level of interest and a need for foundational educational resources (the why before the how). |
I'm a retired beekeeper with over 20 years of experience. |
Expertise / Motivation | Confirms a high level of awareness and expertise, requiring advanced resources, community, or mentorship opportunities. |
In summary, the project should cater to a wide spectrum of users, ranging from absolute beginners needing basic awareness and clear, easy steps, to seasoned experts looking for community, advanced knowledge, or volunteer opportunities.
Closed-Ended Survey
A closed-ended survey is a method used to collect specific qualitative or quantitative data about a determined subject, providing clarification and detail through the use of predetermined answers.
A closed-ended survey was conducted to collect data and clarify some tendencies related to bee websites.
Closed-end Survey Planning
Closed-end Survey Questions
| Research Theme | Interview Questions |
|---|---|
| Interests | What are the users' primary interests in bees or beekeeping? |
| Expectations | What users do find most valuable on websites about bees? |
| Needs | What areas would users like to see expanded or improved on websites about bees? |
| Behaviours | How often do users visit bee-related websites? |
| Awareness | How can websites about bees better engage and inspire users to take action to support bees? |
Closed-end Survey Results
The survey results are presented in the bar charts below:
The survey reveals that most users are primarily interested in supporting bee conservation efforts, followed by learning beekeeping as a hobby. Educational and ecological interests are also significant, highlighting diverse motivations.
Most users visit bee-related websites weekly or daily, showing strong ongoing interest. Occasional and monthly visits are less common, while very few participants never seek bee information online.
Most users value connecting with other bee enthusiasts, followed by practical tips and informative resources. Fewer prioritize advocacy or other features, highlighting the importance of community and actionable content.
Users most want beginner-friendly resources, but also value advanced techniques, local events, and bee health information. This highlights the need for diverse, accessible, and practical content improvements.
Users want more interactive content, personalized recommendations, and opportunities to volunteer or donate. Stronger calls to action and engaging features can better inspire action for bee support.
Closed-end Survey Outcome
The survey revealed a user base that is passionate about conservation, values community and education, and seeks both accessible and advanced resources. To best serve this audience, bee-related websites should offer a mix of community features, practical guides, interactive content, and clear opportunities for action.
Personas
A persona is a method used to create a fictional character that represents a group with common characteristics, such as their demographics, behaviours, motivations, and goals, clearly informing the project's target users.
Four distinct personas representing our target users were identified: nature enthusiasts, retirees, busy urbanites, and educators.
Personas Outcome
The outcome of this phase informed the goals, frustration and pain points shared across all personas:
- Shared goals: Access bee material resources, fundraise, donate, learn about bees, get involved in conservation, and make a positive impact.
- Common frustrations: Lack of time, difficulty finding reliable information, feeling overwhelmed and limited opportunity for hands-on activities.
- Pain points: Difficulty accessing bee educational methods, lack of urban bee-friendly material on bees, lack of concise information about how to contribute to the cause and lack of hands-on activities.
Empathy Maps
An empathy map is a method that visually explores a user’s sayings, thoughts, actions, and feelings to build a shared understanding of a specific group of people, highlighting their unique needs and pain points.
The following four empathy maps reveal the personas' most common feelings, thoughts, actions, and words.
Empathy Maps Outcome
Considering the empathy maps, the website's tone should be warm, supportive, and community-focused, with a clear, actionable, and educational voice that promotes impact and connection.
User Journeys
A user journey is a method that visually maps the path a user takes to achieve a specific goal, highlighting their actions, thoughts, feelings, and pain points at each stage to identify opportunities for improvement.
The following four Journey Maps track the personas paths to achieve their goal.
Alex's journey map illustrates his path from hearing about the bee cause to trying to engage with a volunteer group and trying to find ways to share this abilities to the cause online.
Margaret's journey map illustrates her path to getting updated resources on sustainable beekeeping practices, engaging with the community, and taking action to support bee conservation.
Ryan's journey map illustrates his path from searching for urban bee-friendly and safe garden resources to sharing his guide material via e-mail.
Emma's journey map illustrates her path to searching for bee conservation material to creating her bee conservation lesson plan.
User Journey Maps Outcome
These journey maps highlight a critical gap between user intent and digital execution. While personas begin their journey with high motivation, the lack of a centralized information architecture leads to cognitive overload and "search fatigue." To bridge this gap, the solution must prioritize consolidated resources and streamlined navigation paths.
Pain Points
Pain points is a method used to identify and declare specific problems or frustrations that target users experience while interacting with a product, service, or system, providing critical focus for the design process.
These four key pain points highlight the primary barriers that prevent users from achieving their goals.
Alex | Nature Enthusiast | 28 yo
Pain points:
Alex, a nature enthusiast, struggles to find information about bees and ways to get involved in the cause. He needs a simple way to find information about bee conservation and get involved in the cause.
Margaret | Retiree | 65 yo
Pain points:
Margaret, a retired beekeeper, struggles to find an avenue to engage and contribute her skills and resources. She needs a way to engage and contribute her skills and resources.
Ryan | Busy Urbanite | 30 yo
Pain points:
Ryan, a busy urbanite, struggles to find practical information on how to create a bee-friendly garden in a limited urban space. He needs guidance on creating bee-friendly urban spaces.
Emma | Educator | 30 yo
Pain points:
Emma, an eco-conscious teacher, finds it challenging to compile a bee-themed lesson plan. She needs a readily available, pre-compiled lesson plan on bee conservation to save her time.
Emphasise Outcome
The Empathise phase concludes with a definitive list of pain points: Information Challenge, Engagement Barriers, Urban Spaces Guide, and Educational Hurdle friction. These pain points serve as the foundation for the Define phase.
Define
Define is the second phase of the Design Thinking process; it involves taking the information gathered during the Empathise phase to clearly establish the users' needs and problems.
To establish a clear project direction, this phase focused on four core outcomes:
- Problem Statement
- Storyboard
- Goal Statement
Problem Statement
A problem statement is a method that takes the raw data of user pain points and structures it into a clear, actionable, and concise definition of the problem intended to be solved.
The following problem statements clearly define the key areas of friction identified, Information Challenge, Engagement Barriers, Urban Spaces Guide, Educational Hurdle, providing a focused foundation for subsequent design solutions.
Storyboard
A storyboard is a visual representation of a user's journey, illustrating key moments, interactions, and emotions to communicate the narrative and context. It is used to understand, address, and clarify user experiences
The following storyboards visually illustrate the user experience and articulate pain points informed by the problem statement.
Alex's Storyboard (Nature Enthusiast)
Alex struggles to find reliable and accessible information about bees and ways to get involved. If Alex finds concise information on bee conservation, then he can quickly take actionable steps to contribute to bee protection, aligning with his busy schedule and sustainable living values.
Margaret's Storyboard (Retiree)
Margaret struggles to find an accessible avenue to engage and contribute her skills and resources to the bee cause. If Margaret gains access to a centralized platform for bee protection and community engagement, then she can actively contribute to bee protection, donate, and stay connected to her passion in retirement.
Ryan's Storyboard (Busy Urbanite)
Ryan struggles to find the resources to implement his ideas effectively on creating bee-friendly urban spaces. If Ryan obtains accessible guidance on creating a bee-friendly garden, then he can implement practical and sustainable practices in his limited urban space, contributing to a healthier urban ecosystem.
Emma's Storyboard (Educator)
Emma finds it challenging to compile a bee-themed lesson plan. If Emma can easily access engaging educational resources on bee conservation, then she can deliver up-to-date and captivating lessons to her students, fostering a deeper understanding and appreciation for the environment.
Goal Statement
Goal statement is a clear and concise articulation of the desired outcome of a project, guiding the design process and ensuring alignment with user needs and business objectives.
The following goal statement was defined based on the observation, insights, data, and feedback gathered through the user research:
The Bee Protectors Website, will empower users to access comprehensive bee conservation resources, facilitate the engagement in community, and contribute to fundraising and donation initiatives.
This will positively affect educators, nature enthusiasts, gardeners, and beekeepers by fostering environmental education, community connections, and sustainable practices.
Ideate
Ideate is the third phase of the Design Thinking process; it focuses on generating and exploring a wide range of potential solutions to the users' needs and problems identified during the Define phase.
The Ideate phase transforms problem definitions into actionable solutions; for this case study, it resulted in three core outcomes:
- Hypothesis Statement
- Need-Solution Framing
- Information Architecture
- User-Flow
Hypothesis Statement
A hypothesis statement is a method that informs educated, testable assumptions. It translates user insights or needs into actionable design solutions.
The following hypotheses were developed to address key pain points uncovered during research. These 'If-Then' statements serve to predict how specific design changes may impact the user and their experience.
Need-Solution Framing
Need-Solution Framing is the process that bridges user needs and solutions, clearly stating problems alongside refined and prioritized ideas that will guide the project toward its desired outcome.
Design process led to refined solutions addressing user needs, seeking to enhance their experience.
Alex | Nature Enthusiast | 28 yo
User-needs:
Alex needs a simple way to find information and get involved.
Potential solution:
Create user-friendly Articles and Get Involved pages showing clear, accessible information about bee conservation and volunteer opportunities.
Margaret | Retiree | 65 yo
User-needs:
Margaret needs a way to engage and contribute her skills and resources.
Potential solution:
Create a webpage with volunteer options for beekeepers, plus separate pages for donations and community fundraising initiatives.
Ryan | Busy Urbanite | 30 yo
User-needs:
Ryan needs a guide on creating bee-friendly urban spaces.
Potential solution:
Create a dedicated webpage offering comprehensive, user-friendly guides to help users design and maintain bee-friendly spaces in cities.
Emma| Educator | 30 yo
User-needs:
Emma needs a readily available, pre-compiled lesson plan to save time.
Potential solution:
Create a webpage offering engaging educational resources for kids, including lesson plans, quizzes, activities, and printable coloring pages.
Information Architecture
Information Architecture is a structural map of a digital product, illustrating how content is organized, labelled, and navigated to ensure clarity and usability for users.
This information architecture showcases key sections of the Bee Protectors Website, such as Resources, Get Involved, Donate, About Us, Contact, and their respective sub-features, such as Practical Guides and Fundraise, illustrating content organization.
User-Flow
User Flow is a visual representation of the pathways a user takes to complete tasks within a digital product, illustrating each step and decision point.
This user flow outlines the path to the website pages, a process designed to enhance user guidance and content discoverability. It clearly highlights available choices, accessible via the main menu.
Prototype
Prototype is the fourth phase of the Design Thinking process; it transforms ideas that emerged during the Ideate phase into a tangible, cost-saving, and low-risk model of a product used to validate its design and concept.
The Prototype phase demonstrates a systematic approach to design, translating concepts into tangible, testable representations. This phase produced five key outcome:
- Sketches
- Low-Fi Prototypes
- Wireframes
- Mockups
- Hi-Fi Prototypes
Sketches
Sketches are rough, visual representations of design ideas, illustrating early concepts for layout, features, and user flow.
Sketches of the Bee Protectors’ key webpages were created to visualise the layout, content hierarchy, and navigation structure prior to developing the digital wireframes.
This image presents six hand-drawn wireframes representing key pages of the Bee Protectors website.
Each sketch outlines layout elements such as headers, content blocks, images, and footers, corresponding to the Home, Resources, Get Involved, About Us, Contact, and Donate pages.
Wireframes
Wireframes are digital visual outlines of a digital product's layout and structure, illustrating the placement of content, features, and navigation elements.
Wireframes were created for Bee Protectors' website, defining layout, content hierarchy, and navigation.
Each wireframe outlines layout elements such as headers, content blocks, images, and footers, corresponding to the Home, Resources, Get Involved, About Us, Contact, and Donate pages.
Low-fidelity prototype
Low-fidelity prototypes are early, simplified representations of a digital product, illustrating basic functionality and user flow to facilitate quick and inexpensive testing of core concepts.
A low-fidelity prototype of the Bee Protectors’ website was developed. This initial interactive model allowed to quickly test core user flows and gather early feedback on navigation and functionality before investing in hi-fidelity visuals.
Figma: Low-Fidelity Prototype of Bee Protectors WebsiteThe low-fidelity prototype above demonstrates the user flow of the Bee Protectors’ website, allowing users to navigate between key pages such as Home, Resources, Get Involved, About Us, Contact, and Donate.
Mockups
Mockups are detailed visual representations of a digital product's design, showcasing layout, color, typography, and branding elements to provide a realistic preview of the final product.
To visualize the final user interface of the Bee Protectors' website, such as the intended visual style and branding, a comprehensive set of initial digital mockups was created.
The mock-ups presented above illustrate the layout, color scheme, typography, and branding elements, offering a detailed preview of the six key pages (Home, Resources, Get Involved, About Us, Contact, and Donate) of the Bee Protectors' website.
Moving to the Resources page a set of mockups was created to visualize the final user interface.
The mock-ups presented above illustrate the layout, color scheme, typography, and branding elements, offering a detailed preview of the six key pages (Resources, Articles, Practical Guides, For Teachers and For Students) of the Bee Protectors' website.
Moving into the Get Involved page a set of mockups was created to visualize the final user interface.
The mock-ups presented above illustrate the layout, color scheme, typography, and branding elements, offering a detailed preview of the six key pages (Get Involved, Volunteer, Share Your Skills including Volunteering option, Fundraising, Fundraising Form, path to start a new fundraiser team, and Join a Fundraising Teams including the option to engage to an existent team) of the Bee Protectors' website.
Hi-fidelity prototype
Hi-fidelity prototypes visually and functionally mimic the final product, illustrating realistic interactions, visual design, and user flows to facilitate thorough testing.
A Hi-fidelity prototype of the Bee Protectors Website was developed, incorporating visual design into a more detailed and interactive model. This aimed to further refine user flows and gather feedback on the near-final user experience.
Figma: Hi-Fidelity Prototype of Bee Protector WebsiteThe hi-fidelity prototype above demonstrates the user flow of the Bee Protectors’ website, allowing users to navigate between key pages such as Home, Resources, Get Involved, About Us, Contact, and Donate.
Test
Test is the fifth phase of the Design Thinking process; it actively evaluates the prototype’s concept, user flow, design, and functionality through real user interaction and feedback, identifying usability issues and driving refinements.
In this phase, designs were assessed to identify usability issues and directly inform further refinements. The key outcomes of this phase includes:
- Usability Study
- Refinement
- Accessibility
- Final Prototype
Usability study
Two rounds of usability studies were conducted to evaluate the prototype with users, identifying pain points and friction to inform design refinements for an intuitive website.
Findings from the first study guided the transition from wireframes to mock-ups, while the second study utilised a hi-fidelity prototype to identify specific flows and elements that required further refinement.
Low-Fidelity | Usability Study
An unmoderated usability study was conducted using the Low-fidelity prototype of the Bee Protectors website.
Low-fidelity Usability Study Outcome
The test results from the low-fidelity prototype showed that the navigation was intuitive, and users found the information they needed.
Hi-Fidelity | Usability Study
An unmoderated usability study was conducted using the hi-fidelity prototype of the Bee Protectors website.
Hi-fidelity Usability Study Outcome
Following the hi-fidelity usability study, seven key areas for website improvement were identified: Homepage Refinement, Where Am I? (Orientation and Location Awareness Cues), Navbar Structure, Articles Clickable Elements, Image Perception, Article's Scanning Difficulty and Task Completion with Card.
Homepage Findings
Finding: Users reported no clear interaction cues in the Homepage.
Where Am I? (Orientation and Location Awareness Cues)
Finding: Users felt lost when arriving at the site because the navigation bar’s active state did not sufficiently communicate their current location.
Navigation Bar Structure
Finding: Users questioned the navigation bar's structure, specifically why Students and Teachers were separate menu items instead of being consolidated under a single Educational or Resources heading.
Articles Clickable Elements
Finding: Users reported difficulty locating clickable elements on the Article Page.
Image Perception
Findings: The current bee image on the website evoked fear among users, highlighting a critical need for a more positive and welcoming visual experience.
Article's Scanning Difficulty
Findings: Users had difficulty scanning and understanding content when paragraphs lacked clear headings, indicating that titles are crucial for guiding text navigation, enhancing readability, and improving information retrieval.
Task Completion with Card Options
Findings: Users successfully completed tasks when information was presented in card-based options, indicating this format is highly effective for guiding choices and facilitating task completion.
Hi-Fidelity Prototype | Action Plan
Action Plan is prioritized list of design changes and tasks based on usability feedback, aiming to improve the usability of the product.
For each one of the seven key findings identified a corresponding action was developed, as listed below:
| Hi-Fidelity Finding | Action |
|---|---|
| Homepage Refinement | Homepage Redesign |
| Where Am I? (Orientation and Location Awareness Cues) | Implement Wayfinding Features |
| Navigation Bar Structure | Navigation Structural Redesign |
| Articles Clickable Elements | Articles, Lesson Plan, and Practical Guides Portal Adoption |
| Image Perception | Imagery Update |
| Article's Scanning Difficulty | Articles Page Redesign |
| Task Completion with Card | Card-Based Portals |
Action Plan Detail: Findings and Design Solutions
Action Item: 01
Finding: Homepage Refinement
Users reported no clear interaction cues in the Homepage.
Solution: Homepage Redesign
The Homepage will transition from an expository style to a more interactive one. It will feature a prominent hero section displaying a compelling tagline and clear call-to-action (CTA). Additionally, it will include interactive sections and cards for key options of Get Involved (Volunteering and Fundraising), Resources, and a simplified Donate card.
Action Item: 02
Finding: Where Am I? (Orientation and Location Awareness Cues)
Users felt lost when arriving at the site because the navigation bar’s active state did not sufficiently communicate their current location.
Solution: Implement Wayfinding Features
Breadcrumbs and interactive section labels will be added to help users understand their location within the site.
Action Item: 03
Finding: Navigation Bar Structure
Users questioned the navigation bar's structure, specifically why Students and Teachers were separate menu items instead of being consolidated under a single Educational or Resources heading.
Solution: Navigation Structural Redesign
Navigation Bar: The separate For Students and For Teachers navigation menu items will be consolidated into a single, clearly labeled parent menu item named Educational.
Footer: The footer will be enhanced by including a shortcut menu mirroring the main navigation to improve findability and interaction.
Action Item: 04
Finding: Articles Clickable Elements
Users reported difficulty locating clickable elements on the Article Page.
Solution: Articles, Lesson Plan, and Practical Guides Portal Adoption
The Articles, Lesson Plans, and Practical Guides pages will each gain a portal displaying cards containing an image, title, publishing date, and estimated reading time. This will aid in scanning the available resources and making a selection.
Action Item: 05
Findings: Image Perception
The current bee image on the website evoked fear among users, highlighting a critical need for a more positive and welcoming visual experience.
Solution: Imagery Update
The imagery will be updated to focus on positive and welcoming visuals, directly addressing the negative emotional response evoked by the current bee image.
Action Item: 06
Findings: Article's Scanning Difficulty
Users had difficulty scanning and understanding content when paragraphs lacked clear headings, indicating that titles are crucial for guiding text navigation, enhancing readability, and improving information retrieval.
Solution: Articles Page Redesign
For the content/reading pages such as Articles, Lesson Plans, and Practical Guides, a summary with a table of contents and author information will be implemented. Crucially, all paragraphs will include headings to facilitate easier scanning and comprehension.
Action Item: 07
Findings: Task Completion with Card Options
Users successfully completed tasks when information was presented in card-based options, indicating this format is highly effective for guiding choices and facilitating task completion.
Improvement: Card-Based Portals
Key pages such as Get Involved, Resources, Educational, Practical Guides, and Articles will display their internal options using an interactive card-based portal system.
Refinements
Refinement is the stage in the Design Thinking process where identified usability issues found during the Test phase are improved.
The improvement process was executed in two distinct stages, aligning with the Low-fidelity and High-fidelity Usability Studies. This systematic approach ensured that user pain points were addressed and implemented at the appropriate point in the design lifecycle.
Low-fidelity | Refinements
The Low-fidelity Usability Study findings indicated that the overall structure and navigation of the website were effective, with users successfully completing tasks and finding information. As a result, no significant changes were necessary at this stage.
Hi-Fidelity Prototype | Refinements
The Action Plan phase resulted seven points for improvements and refinements of the Hi-Fidelity prototype, which were implemented in three steps, first the Information Architecture was refined, followed by the user-flows refinements and improvements closing by the Design Implementation
Information Architecture Refinement
Information Architecture is a structural map of a digital product, illustrating how content is organized, labelled, and navigated to ensure clarity and usability for users.
The website's Information Architecture was refined accordingly to the action plan. Key changes: Top-level pages were reorganized/re-prioritized; For Teachers and For Students these contents were consolidated under Educational; and the Fundraise option Join a Team was rename to Join a Fundraiser for clarity.
User-Flow Refinement
User Flow is a visual representation of the pathways a user takes to complete tasks within a digital product, illustrating each step and decision point.
This step involved updating existing user flow processes and developing new, detailed flow diagrams for the five critical areas: Articles, Volunteer, Practical Guides, Lesson Plans, and Donation. These flows will serve as the blueprint for the subsequent design and development updates.
Articles Page Access Diagram | User-Flow
This user flow diagram illustrates the proposed paths for accessing Articles content, a new process developed to enhance content discoverability and user guidance based on usability testing.
The diagram details access points from the main menu and the homepage's Resources section, culminating in the ability for users to efficiently read or print the final content.
Volunteer Process Diagram | User-Flow
This user flow outlines a proposed strategy to guide users to the volunteering page, leveraging the existing, efficient email-based system to minimize development costs and streamline internal user adoption.
It clearly outlines opportunities and how to get involved, accessible via the volunteering page or homepage volunteer section.
Donate Process Diagram | User-Flow
The donation user flow was structured for efficiency, allowing users to access options via the main menu or the homepage Donate shortcut card.
The existing system (donate.com or direct deposit) was retained to minimize costs.
To facilitate mobile contributions, a QR code linking to the donation website was added, guiding users to complete their payment or continue exploring.
Practical Guides Page Access Diagram | User-Flow
This diagram outlines the proposed user path to Practical Guides, a new process developed in response to user research findings to improve access and discoverability.
Users can now access the guides quickly and intuitively via the main menu, the homepage Resources section, or a direct shortcut, highlighting various efficient entry points and available choices.
Lesson Plan Access Diagram | User-Flow
This user flow outlines the proposed path to Lesson Plan options, a new process developed in response to user research findings to streamline user access and navigation.
It highlights various entry points and available choices, such as the main menu, the homepage Resources section, or a direct shortcut, making materials quick and easy for users to find.
Design Refinements
Following the action plan, we implemented refinements for all seven key areas: Homepage Redesign, Wayfinding Features, Navigation Structural Redesign, Article Portal Redesign, Imagery Update, Articles Page Redesign, and Card-Based Portals.
Homepage Redesign | Design Refinement
The homepage was redesigned to feature a hero section with a compelling tagline, a clear Call-to-Action (CTA), and an image depicting bees in their natural environment.
Below this, interactable sections allow users to navigate to dedicated pages featuring interactive cards for key actions, including Volunteering, Fundraising, Resources, and a simplified Donate option.
Finally, the footer was enhanced with a shortcut menu mirroring the main navigation to improve overall findability and interaction.
Wayfinding Features | Design Refinement
Breadcrumb navigation was added to pages for enhancing orientation and improve navigation.
Navigation Structural Redesign | Design Refinement
Breadcrumb navigation was added to pages for enhancing orientation and improve navigation.
Articles, Lesson Plan, and Practical Guides Portal Adoption | Design Refinement
The Articles, Practical Guides and Lesson Plan Pages utilises a portal layout that serves as a central gateway to all available content.
This Content Portal features a filter tool and a set of horizontal content cards.
Each card provides users with a quick overview, including an image, title, publication date, and estimated reading time.
Imagery Update | Design Refinement
The imagery was updated to focus on positive and welcoming visuals, depicting bees in their natural environment, highlighting the mission of Bee Protectors.
Articles Page Redesign | Design Refinement
The Articles Page utilises a portal layout that serves as a central gateway to all available article content.
This Content Portal features a filter tool and a set of horizontal content cards.
Each card provides users with a quick overview, including an image, title, publication date, and estimated reading time.
Card-Based Portals | Design Refinement
Key pages such as Get Involved, Resources, Educational, Practical Guides, and Article will display their internal options using an interactive card-based portal system.
Accessibility considerations
Accessibility in digital products focuses on ensuring usability for individuals with diverse abilities, visually representing features that accommodate various needs and promote inclusivity.
This website prioritizes accessibility for all users, including those with disabilities, through design adherence to WCAG 2.1 AA contrast guidelines and providing meaningful text alternatives for images. Its clear navigation and actionable sections (Volunteer, Fundraise, Resources) ensure easy engagement.
Final prototype
This hi-fidelity prototype is the latest version, representing a more polished and refined rendition of the user interface and interactions, closely resembling the intended look and feel of the final product
Takeaways
Impact
The impact of the Bee Protectors website is accessibility, since it connects users with the information and tools they need to drive conservation efforts:
-
The General Public: By providing easy access to educational resources, the platform increases public awareness and offers practical ways to contribute to bee conservation through financial support and direct action.
-
Internal Users & Community: The site acts as a central mobilizing platform, fostering collaboration among volunteers, ecologists, and farmers to amplify conservation efforts and accelerate community growth.
Emmas’ quote"As a teacher, the Bee Protectors website is an essential resource. I can easily access engaging, up-to-date lessons on bee conservation, which helps me deliver captivating content and truly foster a deeper appreciation for the environment in my students."
What was learned
The initial project goal—to merely expose content to the public was reshaped by user needs. The community sought interactive, low-cost, and engaging ways to act, not just information. This pivotal insight directed the development effort toward creating an essential tool focused on practical contribution and mobilization, not just awareness.
This comprehensive visual representation, using clustered, colourful sticky notes, maps the diverse user insights and perspectives on bee conservation. It serves as a valuable reference, directly guiding and inspiring the project's next developmental steps.