Fernando Lins

About

I'm a graphic designer specialized in user interfaces and completely addicted to simplifying boring and repetitive workflows.

I believe in graphically minimalistic projects that deliver value, user friendliness and accessibility.
I know that great ideas can be executed by having well-structured projects based on user testing.

2019 - Blue Digital
Head of UX Design
2015 - Tabmedia
Head of UX Design
2014 - Silent Circle
Senior User Interface Designer
2008 - Google
User Interface Designer

Back to the top↑

Case - Design System for Digital Bank

The Problem

The client, a brazilian digital bank, had developed a design system for its mobile apps, but the system did not comtemplate web desktop elements for the internal tools, which are used on computers by the system architecture team. These tools were used through APIs without graphical interfaces, and had no user experience patterns to unify their usage.

The Process

The teams and developers responsible for each tool and their users were interviewed as the first step in the process. They demonstrated how these tools worked and talked about their expectations regarding workflow and usability, and also presented user interface benchmarks.
User journeys and a list of most-needed features where gathered as the result of the interviews and additional research made through user surveys.

Through design sprints adapted to the reality of each team, solutions were designed for each item in the prority list, first in low fidelity wireframes and then with high fidelity interactive prototypes on Figma; then finally a system of atomic, modular components was implemented along with the front-end development team.

Training and feedback sessions of these projects contributed to the selection of tasks for the next sprints in order to implement improvements and to align the software's user experience with the very technical mental model and requirements of the system architecture team, both developers and users.

The Results

  • The projects gained visibility amongst internal projects and allowed the bank to replace third-party tools with first-party tools developed in house.

  • The user interface and design pattern library and design system allowed new features to be implemented in 2 days, from idea to QA testing.

  • Project APIs started to be redesigned to follow the same user-flow and ease of use presented in the user interface, and also contemplating better integration with the front-end.

  • Deploy errors and other issues were diminished substancially due to security and double-checking routines added in the interface through specific user flows based on prior issues.

Low fidelity wireframes were used to gather feedback, translate the APIs into screens and user flow and make sure that the objectives were met: users needed to perform repetitive, complex actions fast.
High fidelity prototype and documentation on Figma: user flows, interface states and interactions were defined with and reviewed by back-end and front-end developers also.
High fidelity prototype on Figma: Developers needed to be able to batch create assets and managem them quickly. The interface allows for many assets to be created at once and be previewed before deployment, feature which reduced errors drastically and created live documentation of deployed assets.
Telas de sistema interno para banco digital
Navigation flow example on Figma prototype
Telas de sistema interno para banco digital

Back to the top↑

Case - UX and UI for Music Production VST

The problem

After a round of personal mockups I had created for the software, I contacted the developer asking about the opportunity to make user experience and interface enhancements to their software, which was met with excitement. VST software are self-contained and live inside other music production software ("hosts"). They generally compete with many similar market solutions and need to translate complex audio engineering concepts to users. The original software interface had information architecture issues and labels that made its operation hard to understand.

The Process

The workflows and user flows for the software were collected from its user manual as a first step, instead of the usual interface analysis. The revision of the user manual revealed confuding operation flows and labels for components on the user interface and general understanding of the software inner workings. This also raised concerns about the technical level necessary to use the software, which should be accessible to newcomers and experienced users alike.

By separating the execution of the project in feature groups, the user journey and screens were redesigned to improve accessibility in a way that similar functions would neighbor each other and full audio manipulation flows could be seen at once, without the need to swap between tabs and try to guess which interface controls were affecting the sound.

So that the interface and experience of all of the suite software were similar, I developed a user interface guide with intelligent components that adapted the screen layout in different screen resolutions and according to enabled features.

The Results

  • The creation of an interface library provided unification of the design style, interface components and behavior patterns between the software suite members.

  • The labels and words that were replaced in the UI clarified the operation of functionalities that were unknown to users, givem that they rarely read the user manual.

    As a parallel effect, the developer also re-worked the code so that the audio flow inside the software followed the path described in the interface, which was user friendly.

  • The visual identity of the project helped increase the perception of the company as current and innovative.

Colors and interface elements guide designed based on the company's identity and contrast studies.
High fidelity prototype on Figma: user testing indicated users preferred to work on dark interfaces in their studios and contrast testing made sure that the interface is accessible.
The interface represents the audio signal flow, going from left to right. In > Processing > Out.
Telas de sistema interno para banco digital

Back to the top↑

Other Projects

Back to the top↑

Back to the top ↑

Contact

Let's talk about new projects and opportunities!

E-mail

+55 11 972097807

Back to the top ↑