I was commissioned to design an efficient platform for teachers to access updated environmental information and relevant educational resources, thereby facilitating their ability to integrate this knowledge into their lessons and promote environmental awareness among their students. Additionally, the goal was to provide an intuitive and accessible user experience, addressing the specific needs of users with diverse capabilities and preferences.

Through an intuitive design and user-friendly features, my goal was to provide users with easy access to a wide variety of environmental information. From interactive learning modules to real-time updates on environmental news, the platform serves as a comprehensive resource for educators, students, and environmentally conscious individuals. With a focus on accessibility and engagement, the platform aims to empower users to take proactive measures in caring for our planet.

User Research

I conducted thorough user research through interviews with teachers and specific users, initially addressing information overload as the main issue. It was assumed that the need for relevant information was universal; however, the research revealed a critical need for accessibility for users with visual and hearing impairments. This insight reshaped the design direction, prioritizing the implementation of accessibility adjustments, such as a specific needs section. The research highlighted the diversity of content preferences and needs among users, guiding iterations to create an inclusive and functional design that would meet various demands.

Insights from research

Information overload

To address the issue of information overload on the web, I will design an intuitive interface with clearly defined categories and a transparent navigation structure. I will implement a content preference system to tailor information according to users’ specific interests, focusing on the relevance of the content.

Difficulty finding accurate data

To address the challenge of finding specific and up-to-date data online regarding environmental topics, I will design a “Latest News” section that will help users stay informed about advancements in the environmental field. This section will provide a reliable and regularly updated source of information.

Accessibility challenges

To address the various accessibility challenges experienced by users, sections will be designed to customize the experience according to individual needs. This will include options to adjust text size, contrast, among other aspects. Compatibility with assistive technologies will be ensured by providing detailed descriptions of images, subtitles, and transcriptions for multimedia content. Additionally, the option to choose languages will be implemented to enhance accessibility.

Difficulty accessing technical data

To enhance interactivity, it was decided to implement forums that would provide a space to discuss technical topics among experts, share experiences, and collaborate on projects related to the environment.

First design ideas

After thorough reflection and analysis of the research findings, I began designing a potential website map. I decided to implement a hierarchical structure combined with a database to provide users with the ability to customize content according to their individual needs. The homepage would serve as a starting point, from which the main categories would branch out. Each of these main categories would be linked to associated subcategories, representing additional pages that users could explore. The interconnection between these subcategories and their respective main categories would ensure a coherent and organized navigation, enabling users to access relevant information and personalize their experience according to their specific interests in environmental topics.

Wireframe papers

Next, I sketched out various options for the homepage on paper. From the outset, I took into account the users’ needs to ensure smooth and organized navigation. As I progressed with the designs, I removed more elements, aiming for the cleanest design possible.

Digital wireframes

During the transition from paper wireframe sketches to digital ones, I remained constantly mindful of the users’ pain points identified in the research. My primary goal was to enhance the overall user experience. In my design process, I prioritized smooth yet effective navigation while striving for the cleanest design possible.

Low-fidelity prototype

To create a low-fidelity prototype, I linked all screens involved in the main user flow to enable customization of content preferences and address the findings from the research conducted. At this stage, I received further feedback from users on various aspects, such as page layout. I made sure to listen to their input and implemented many of their suggestions in areas addressing identified user pain points.

Usability studies

Upon completing my low-fidelity prototype, I felt the need to conduct a usability study to identify potential challenges users might encounter when seeking specific information. Therefore, I conducted the study remotely with the participation of five users. Among the participants were: a 35-year-old biology teacher working at a high school, a 46-year-old environmental consultant with mild visual impairment, a 26-year-old university student studying marine biology, a 50-year-old farmer with mild hearing impairment, and a 34-year-old environmental engineer.

Main results

Accessibility

Some users encountered accessibility difficulties, specifically related to text size, contrast, and the need for subtitles for videos.

Usability

Some users experienced difficulties in locating certain topics

Interactivity

Some users needed to share knowledge and expressed the need to collaborate on projects related to environmental protection.

Relevant and up-to-date content

Users primarily sought specific information related to their interests and occupations.

Mockups

Based on the usability study findings, I implemented modifications to enhance accessibility. One of them was adding the option to customize each user’s needs, resulting in a more tailored user experience. Another measure was to include the language selection option.

Before the usability study

After the usability study

To improve navigation, I added a Search bar to the platform. In addition, to respond to the need to access relevant and updated content, I developed a “Latest news on environment and biodiversity” section, which is updated periodically..

Search bar

Section: “Latest News”

To enhance interactivity, I added discussion forums to encourage interaction among users and facilitate the exchange of knowledge related to the environment.

Discussion forums

Web page menu

Home page with video

Documentaries

Mobile version

In my mockups, I included considerations for different screen sizes based on my previous page schematics. Since users access the platform from a variety of devices, I considered it crucial to optimize the browsing experience for different screen sizes, aiming to provide the best possible experience to users.

High-fidelity prototypes

Accessibility considerations

WCAG accessibility


Design decisions were made to ensure that the platform is accessible to all users, including those with visual and auditory impairments. All of these decisions comply with WCAG accessibility guidelines.

Configuration customization options


Offers the possibility to customize the following options:
• Video subtitles
• Audio transcriptions
• Sign language interpretation
• High contrast options
• Adjustable font size
• Screen zoom
• Mouse navigation
• Keyboard navigation
• Voice navigation
• Disable animations
• Size adjustment according to user preferences

Subtitle presence


was ensured for multimedia content, along with alternative text for images.

Reflections

The result of my designs is an improved and more accessible user experience, with positive feedback from participants in usability studies. Thanks to the implementation of accessibility settings, customization options, and relevant and updated content, users have praised the effectiveness and usability of the design, noting a significant improvement in usability and overall satisfaction.

Each phase of this project has been a valuable learning opportunity that has paved the way for the implementation of design improvements. I have observed how user feedback and constant iteration of the design have significantly improved the usability and consequently the effectiveness of the platform.

Next steps

More usability testing

To identify and address any issues or areas for improvement that may not have been previously detected

Further research

Conduct additional research to better understand user needs and expectations, as well as emerging trends in design and technology, and apply this knowledge to the platform design.

Metrics analysis

including conversion rates, time on page, and bounce rate, to better understand user behavior and determine specific areas that need attention.

Accessibility optimization

Continue improving the platform’s accessibility by implementing more customization options and adjustments.

Design iteration

Based on the results of usability testing and metrics analysis, make additional iterations to the design to optimize the user experience.

Follow ME
LinkedIn
Contact
Benidorm
+34 610 28 28 44
Chat on WhatsApp
hello@gerygantois.art