EABA Website Redesign
Collaborated with Tasting Design and the Bydas Development Team on the redesign of the European Algae Biomass Association (EABA) website.
Role
UX/UI Designer
Timeframe
May 2023 – September 2023
Industry
Scientific
Tools
Introduction to the Project
The European Algae Biomass Association (EABA) is dedicated to fostering collaboration and facilitating knowledge exchange within the realm of algae biomass production and its multifaceted applications. However, their website was outdated, lacking aesthetic appeal, and fell short in adhering to many UX best practices.
Goals
The goal was to create a digital platform embodying EABA’s mission and serving as a vital resource for algae biomass stakeholders. This involved enhancing visual appeal, modernizing aesthetics, and adhering to UX best practices.
1.
Evaluating the old design
The previous design, while suitable for a scientific audience comprising mainly researchers and scientists, appeared overly technical and lacked appeal. It appeared outdated and failed to engage users effectively. Furthermore, event promotion failed to attract new users effectively, and event registration suffered due to the process being on a separate page, hindering user engagement and event visibility.
1.
Evaluating the old design
The “Become a Member” page, crucial for user retention, also lacked efficacy in convincing users to join.
Other pages didn’t require significant alterations as they had minimal content or complexity.
Conclusions
The redesign should prioritize visual appeal, modernity, and intuitive design to enhance user engagement. Specific issues, such as streamlining event registration, need addressing, as effective event promotion and registration are crucial for user engagement.
In conclusion while some pages required minimal changes, the homepage, events page, and “Become a Member” page were deemed most critical for redesign.
2.
Researching Competition
This phase involved a search for websites related to scientific and research areas, as well as event-centric platforms, within the realm of algae biomass production and also indirect competition. This included a basic exploration of visual aesthetics and functionalities.
3.
Lo-Fi Wireframes
After the research phase, I began designing low-fidelity wireframes and brainstorming potential pages, as showcased below. Some of these pages were exploratory, serving as initial concepts to experiment with different layouts before finalizing to the final UI design.
4.
Final UI Design
In the final UI, I implemented the typography and colors outlined in the brand guidelines, consistent with the logo crafted by Tasting Design, onto the approved lo-fi wireframe, ensuring responsiveness throughout. Below, I outline the primary adjustments and offer a comparison slide to elucidate the modifications made to each page.
Homepage
To enhance the homepage’s initial impact, I opted for a modern and experimental design while preserving EABA’s identity. Additionally, the rest of the page became visually more engaging, with improved UI cards for event registration, ensuring a more concise and appealing user experience.
"Become a Member" Page
This page required a more compelling layout to encourage user membership. By drawing inspiration from similar websites with membership pages, I implemented industry best practices to enhance its effectiveness.
Events Page
The Events page presented a significant challenge in terms of design and functionality, necessitating an intuitive interface for users to seamlessly navigate both upcoming and past events, while facilitating easy registration. Additionally, statistics from past events, along with videos and comments, were incorporated to enhance user engagement.
Rest of the Pages
The remaining pages, as mentioned earlier, were not as critical as the ones mentioned above. They underwent minor changes primarily focused on UI design rather than functionality and structure, as seen previously.
Mockups
Mockups of some of the pages and sections of the pages, both mobile and desktop.
5.
Implementation
In collaboration with the Bydas development team, I meticulously verified each implementation using Chrome DevTools to ensure that the website was accurately translated from its design in Figma. This iterative process involved multiple revisions until the website closely matched the original design.