Website RedLaDA

Introduction

The Latin American Network of Food Design (RedLaDA) is a non-profit organization, headquartered in Uruguay, that brings together researchers, organizations, companies, and individuals from all over Latin America related to Food Design.

The organizers of this network decided to contact me to redesign and migrate their website, which was originally made in Wix and caused them multiple inconveniences.

The main pain points they experienced with the old site were:

• 1.

  Chaotic navigation and information structure

• 2.

  Duplicate information on multiple pages

• 3.

  Inability to keep the site updated

• 4.

  Outdated design and branding

• 5.

  Poor reuse of components

• 6.

  Poor site performance

After quite exhaustive work carried out in multiple stages, the entire website was renovated and re-implemented with excellent acceptance from the RedLaDA community.

Team & Role

-Frontend Developer

-UX/UI Designer

Tech Stack

In this project, I decided to use Next.js to ensure that the website can continue to scale according to the future needs of the organization.

• 1.

  Next.js --> Framework

• 2.

  JavaScript --> Programming Language

• 3.

  Prop-Types --> For type checking

• 4.

  CSS Modules --> To handle component styles

• 5.

  Vercel --> For deployment

• 6.

  react-Icons --> To use multiple icons

• 7.

  react-circle-flags --> For flag icons

• 8.

  Cloudinary --> To manage images and other assets

• 9.

  Figma --> For design and prototyping

• 10.

  Miro --> As a collaborative tool used to work with the client in several workshops

Spotlight

Within the challenges of this project, I would like to highlight two things:

First, the work done with the client, which took multiple collaborative meetings to optimize the site's information architecture and manage the large amount of data they needed to make visible on this institutional page.

Second, the design and frontend work done to provide this organization with a modern site, with its own custom components and without duplicate code, that is easy to maintain and continue scaling.

Lessons Learned

This project was a formative experience for me, as up to this point, I had not worked on a web/app of this size with multiple screens and information at different levels. The realization took several months of development, combining the work prior to the design process + the code implementation of the site.

It allowed me to deepen my technical skills in Next.js and React, in addition to giving me good experiences conducting workshops with multiple people from the core team of the organization. These collaborative meetings allowed me to polish my communication and project management skills.