Design Process — Summer Internship 2020
Hello again, buddies! This time the greetings are coming from the designers 💻✏️
After presenting the developer’s side of this project, we will show you all the design processes we went through, in order to achieve the desired result and accomplish our main goals.
Baixa — Visual Identity 🎨
Before we start talking about the visual identity created for this project, let’s remind you of the context of our platform.
The Baixa App aims to group information about the services that Coimbra’s downtown may offer. We want to show the location, history, and details of all points of interest.
To start, we focused on users’ needs. For that reason, we tried to keep in mind all the advice obtained during the Design Sprint week. We want the user to have easy access to all the information (s)he needs, to facilitate the trip through Coimbra’s downtown while promoting the return to repeat the experience. If we succeed, Coimbra’s downtown will get more visibility and new visitors.
After a retrospective, we wanted to find the best UI/UX solutions and make the app easy and enjoyable. We discussed possible solutions, performed sketches, researched features on existing platforms, and read several articles about the theme.
After outlining all the objectives, we started by creating a visual identity coherent with its values.
We made several proposals and tests until reaching the final image. These examples were discussed later on with everyone involved in the project so we could get more opinions to help us decide which path we should choose to follow. We focused on the Portuguese sidewalk, the typical “calçada” pavement, presented in Coimbra’s downtown, as the base concept for the visual proposal. With three shapes, color examples, and typography we reached the final visual identity.
After a couple experiences, we chose salmon because it brings dynamism and a positive spirit, something we wanted to keep present in the project. Combined with this color, we also chose variations of salmon, gray, and white for the necessary contrast. This color palette was used in the identity and later on the platform.
What about typography? We chose Teko because its narrow and straight lines remind us of the streets of Baixa.
Our permanent work partner — Figma 😎
Thinking about the platform structure with ideas coming from the Design Sprint, we started to develop wireframes in Figma. We chose it because it’s a stable platform that allows you to prototype easily and work simultaneously with other colleagues. As the design process evolved we got to know Figma better than before. It allowed us to 1, 2, and 3. It also allowed us to develop our skills and to try a bunch of different tools, which was very useful and enriching.
The wireframes sketch process helped us structure the screens and arrange the various sections.
After this phase, we created a Design System. In the first version, we developed all the components we needed to start our mockups: grid, color palette, typography and icons. As the mockups progressed, we were creating new components such as inputs, buttons, cards, images, and other important details.
This document was always being updated and improved during the project.
Moving on to the mockups, we split the desktop screens between me (Carolina) and João. So we could work at the same time on different tasks and then do a quick review on each other’s screens. At a later stage, João started helping developers on the frontend and I kept working on mockups so the platform development continued to flow. When I finished the desktop version it was time to think about and design the mobile version of the platform.
Iterating the mockups was a long journey because we realized that certain choices could be simpler and improved each day. For this reason, we always had small details to correct to reach a desired final result. Among the mentioned corrections, there were simple things like size, errors, spacing, and choices of UI/UX in general.
In all these stages, the daily support and experience of Rúben Silva and Andriana Peresta were essential to improve our work.
Frontend 💻
As aforementioned, after some work on high-fidelity mockups, João started helping developers on the frontend. It started as a code review process, to improve the project organization and promote HTML and CSS best practices.
Even though it’s a long and boring process, realizing what we should or shouldn’t do is always a learning process. The important thing is to learn how to solve these errors and learn practical and professional techniques.
After that, he started to develop pages with our friends (or not 😏) — developers.
Although it was his first time to use SASS, the adaptation went very well.
The learning process was guided by Rúben Silva, as well as the entire design monitoring and support throughout the project.
Happy conclusion 🤩
Throughout the internship, we learned design techniques and ways of working that we were not aware of until now. It is very useful for our personal and professional evolution. We realize that unforeseen and small errors appear and we learn to deal with them practically and professionally.
Another good experience was working with the developers. It is a very positive experience from discussing ideas to making decisions that helped us to achieve more practical results way faster. 🙏🏼
Although this year’s internship is about to end, we feel that we can continue for months working on the Baixa platform improving it and creating new features.
