Nestatini — Through the Design process

It’s great to see you (again)!

After presenting our project and clarifying some decisions we’ve made, it’s time to talk about our design process.

This year was a little bit different from the usual because the project’s visual identity wasn’t created from scratch since it had already been initialized last summer. So we decided to take their work, give it a personal touch and simplifying functionalities and visual styles. Even though we didn’t have to develop a concept, it’s never really easy to redesign something that wasn’t made by us.

We started by creating mockups for the pages that we were going to develop, using the platform’s main colors that were chosen by last year’s interns.
From there we decided not to include the illustrations that were already on the platform to make our design more intuitive and minimalist.

As for typography, we kept the Rubik font but changed Archivo, because they’re very similar to each other and don’t create the contrast that we intended. We also decided to keep the original color palette and add some neutral colors to create more contrasts.

Figma is a never-ending journey

To better organize our tasks and workflow, we divided the designers into two “teams”: Maria and I were in charge of creating the mockups and only later worked on the HTML/CSS later, while Miguel focused on the frontend development the entire internship. Even though we divided the team, we kept helping each other and sharing opinions.

Creating the mockups seemed simple until we realized the number of details that we missed everyday. Simple things like spacing, incoherences and even some bad UI/UX decisions. We needed to reiterate each task a lot.

Obviously, our perfectionism was not our best friend. 👼🏽

First time using React and SASS

None of the designers had experience with React or SASS before, so it was a learning process for everyone. However the learning curve was gentle due to the workshops from the first week and the consistent help we had from the mentors, everytime we had any questions about the best way to create or adapt a component or even a new page.

Our solutions

The fact that we had to make several changes means that we had to look for various alternatives and solutions to our problems.

Working together allowed us to have open discussions and debates on various subjects, and throughout the decision-making process, the designers always tried to debate different approaches with the developers in order to understand their opinion.

This phase was revealing because we could see that working side by side with developers is super important for the project to move faster because it allows us to prevent issues early on the process.

We essentially learned that the reality of a project inside the company vs. the reality of what we are used to in college is quite different. All of this that was taught by our mentors contributed to the improvement of our technical skills. Moreover, this was a neat way to improve our patience and to experience how it feels like to work on a real-world project where a task is never really finished. 😜