Ayíka Landing Page

The Ayíka Institute collaborated with The Starter School in order to hold a competition to create their official landing page. The Ayíka Institute is a network of young activists committed to the future of the planet through an intersectional agenda, allowing those most affected by climate change and social injustices to amplify their voices in discussions on race, climate, and gender. To further this mission, we were asked to design a landing page to enhance the Institute's reach and social impact.

I participated in this competition back when I was still a junior product designer and am very happy to say that I got first place after two weeks of research about not only design, but also environmental and social issues that I needed to convey throughout my design choices.

One of the first things that I realized as I learned about the institute was that it would  have to be more than just a simple landing page. They have such a strong mission and clear values that I had to make sure everything in their landing page reflected them. It would feel incoherent to make a landing page full of animations or over the top interactions when the people they were talking to didn't have stable data or modern devices. I knew from the start that this page would have to have minimal environmental impact, be accessible to all users, including those with limited internet access or older devices and still have the look and feel of a polished and engaging platform that would effectively communicate the institute's mission.

During my research, I created a list of processes that I would have to follow based on the suggestions I found at the Sustainable Web Design page.

JEDI Practices

JEDI principles consider Justice, Equity, Diversity, and Inclusion in the design process. I wanted the landing page to be accessible to diverse people, whether they have a state-of-the-art computer or an old mobile phone with a small screen. The central goal of the Ayíka Institute is for marginalized people to have access to this information so they can learn and eventually have their voices heard by all.

Designing for Data Poverty

Data poverty occurs when someone has very limited internet access, which can become increasingly expensive if there are many elements on the screen. To minimize this problem, the site should be simple and have few elements to load. One option is to offer a light version of the page that shows only the essential information and avoids pagination. Another option is to use colors and shapes as lightweight elements that do not take long to load.

Limited Use of Custom Fonts

Custom fonts, or web fonts, increase page size. To make the site faster and more efficient, avoiding higher energy consumption and reducing the carbon footprint, using system fonts is the best option. However, the occasional use of custom fonts will not have a significant impact on a landing page—the key is to balance the project's identity with the efficiency and sustainability of the page.

Optimize the Experience Across Different Platforms

The project brief already highlights this issue: the product must be responsive to be accessible on different platforms. This is inherently an accessibility issue since many people can only access websites on mobile devices in landscape mode, for example, and it is essential that the site works well for these people as well as those using a tablet or desktop.

Set a Page Weight Limit

When a page is opened on a person's device, files and information are transferred over the internet, consuming a certain amount of energy and data. The elements on the page, such as images or animations, should be compressed to make them lightweight and avoid energy waste.

Efficient Use of Images

Most of a page's weight comes from the images used. It is crucial to ensure that all images have a purpose and are as small as possible, besides considering using CSS or SVG elements instead of images.

Use Accessible and Energy-Efficient Colors

Dark colors use less energy on OLED screens, and bluish tones end up using about 25% more energy than red or green. At the same time, colors need to have high enough contrast to meet WCAG standards and be accessible to the people accessing the page. It is worth remembering that on LCD screens, there is no significant energy difference between dark or light colors.

Once I had my guidelines set up, I began designing the page. I noticed that the Ayíka logo was an adinkra symbol call Aya, which stands for resilience, perseverance and overcoming. Adinkras are a set of 48 West African symbols that represent concepts or aphorisms that can be seen in patterns of clothing, ceramics or even tattoos. I opted to use some relevant adinkras throughout the webpage as a way to unify all the sections cohesively.

Additionally, I educated myself on the subject of decolonizing design and carefully crafted iterations of the CTAs and texts for the page. This was to ensure that I avoided using ableist language and accurately represented the institute's values and views.

I used images both from Ayíka's own social media pages and from royalty free stock image websites to decorate the page. Finally, even though my proposal was still a prototype, I emphasized that the developer responsible for creating the website should use semantic code to comply with WCAG standards. Additionally, we needed to check the weight of all elements to ensure the page remained as lightweight as initially intended.

Designing the landing page for the Ayíka Institute required a careful balance of sustainability, accessibility, and professional design. By following sustainable web design principles and incorporating JEDI practices, I created a platform that not only amplified the Institute's mission but also aligned with their values of justice, equity, and inclusivity. This project demonstrates the importance of thoughtful, inclusive design in creating impactful digital experiences that can strike a chord with a diverse audience.

This project resonated with Ayíka, leading them to choose it as their favourite among all the proposals from other designers. Although it was a short project for a simple landing page, it remains one of my favourite experiences. It made me realize that there is much more to design than what is visible in a final product.

The prototypes can be seen here for desktop, here for tablets and here on mobile devices.