Socradev Page - Felipe Felix

The project

Based in Switzerland, Socradev needed to have a website, with its history, services, team and provide a way of contact for its clients.

The company works in the transformation of legacy software of companies or corporations where the entire system is transformed to digital, improving internal processes and organization.

This project’s roadmap followed the design thinking methodology but some changes were made due to the project deadline and information provided.

Discovery

The first contact with the company staff happened through an online call. The main objective was to understand their goals, needs, pains, and the business. During the conversation, important information was organized into boards in FigJam.

Project requirements

Here are some requests and points discussed during the meeting that should be the focus for the design and structure of the project.

A land page with a clean light design.
The page should have a conservative design with elements that refer to digital.
The client didn’t have colors or typography, so I was free to work on them.

Below there’s a reference panel and benchmark that were used in the benchmark process.

Ideation

As the discovery process was concluded, the next step was to build the page structure and information hierarchy.

Using FigJam, I made drawings by hand to build the information hierarchy. I inserted several annotations next to the drawing, putting all the important information in an organized sequence.

Wireframes

Once the drawings were done, it was necessary to talk to the client about the structure created. I always like to bring the client closer to the creative process as it avoids the likelihood of errors or disagreement.

Wireframes Imagens

Design System

As mentioned before, the client had no defined colors or typography, so I had complete freedom to think of something original.

The chosen typography refers to the seriousness of the company – sans serif and with fonts that refer to technology. The font Work Sans was used for titles, and Public Sans for texts in general. The colors were chosen due to the company’s field of activity where blue is predominant as a color that alludes to technology, safety, and reliability.

This is the design system created for the project, color codes and fonts used.

Brand

The brand was created following the group brand from where the company belongs, which is SoCraAgile, an agile training team. The brand should refer to the group, but be of a unique style.

These, below, are some sketches. I united three concepts used by the company: software, crafting and development.

Approved Version

The final version is close to the SoCraAgile group logo and elements, but with some modifications, such as the font and the graphic elements that represent the three pillars of the company.

Versions

Every logo needs color versions, for printing or to be applied on different places. That’s why I made some versions for different backgrounds.

Final design and front-end

After all the elements were defined, I presented the final design to the client. The final step was to move the page to the real world. I used WordPress to create the page.

SEO and optimization

Not only did I create the page, but I also took care of a basic SEO configuration. All images used on the site have been optimized to be mobile-friendly and have a good performance.

The company didn’t require any sort of SEO setup, but at least the basics should be prepared.

Online project

To access the project online, just click on the button below.