tiagopesce

[tiagopesce]

[tiagopesce]

Strokmatic Design System

Justificativa

A equipe de desenvolvimento da Strokmatic é constituída de colaboradores originários da engenharia de produção e mecatrônica, então sempre se viram com uma grande dificuldade para implementar soluções de front. Como dito por eles em algumas entrevistas iniciais "o backend é front demais para nós, imagine o front".

Guidelines internas para esse projeto

Aumentar a confiança do time de engenharia como um todo nas condições para implementar soluções voltadas ao usuário.

Otimizar processos internos diminuindo o tempo e o retrabalho dos projetos de front.

Aumentar a velocidade de prototipagem rápida e direcionar as dicussões para usabilidade.

Implementar boas práticas de UIUX focando na acessibilidade para resultar em sistemas com baixa carga cognitiva por parte de usuários sobrecarregados na linha de produção da indústria.

Criar condições favoráveis para inserir soluções de design diretamente na indústria através dos produtos Strokmatic.

Métodos

Adoção da Biblioteca Material 3 para Angular pela Strokmatic.

Revisão de telas de produtos operando em clientes.

Construção de design tokens e testes em:

-> Simulações de produtos conceituais aplicando o Design System.

-> Novos produtos.

Resultados de Curto Prazo

Ao longo dos 3 meses de construção do Design System ele alimentou:

40+ telas conceituais com produtos variando indústrias, personas, funcionalidades basicas, tipo de produto

2 produtos completos em estágios diferentes de implantação.

15 materiais para a área comercial como telas exemplo para provocar reação nos hot-leads e poderão fazer parte de produtos.

Áreas da empresa que receberam impulso pelas ações ou componentes do Design System:

-> Desenvolvimento Front/Backend -> Comercial/Marketing -> Engenharia -> Ciência de Dados

Resultados de Médio e Longo Prazo

Aceleração do processo de conversão de leads.

Diminuição dos retrabalho na construção de fronts permitindo manter a equipe de front enxuta e focada.

Linha gráfica e institucionalização do estilo nas telas cria harmonia visual e pregnância facilitando a ampliação do tiket médio de cada cliente pela expansão e compra de novos produtos.

Curva de aprendizado interno de boas práticas de design facilitada para desenvolvedores sem conhecimento de front.

Argumentos visuais para a engenharia implementar soluções mais arrojadas nos clientes, gráças a correlação entre o material e o imaterial da iconografia , typeface e paleta de cores adotadas.

[tiagopesce]

UI Vision King

Telas para interface de um sistema de inspeção para aços longos. inclui:

inspeção em tempo real em 2 pontos diferentes da linha de produção

login de usuários, gestão de cargos

telas de manutenção e saúde do hardware

relatórios em CSV e PDF (com layout padronizado)

[tiagopesce]

Final Corporate Identity for Jog Scan App

LogoType building grid. Concept: Explosive conection between the movement and information. The arrange in the symbol is dymamic and it vibes in a flowing state, it is off-centered to propiciate the skeweing gained from running. The symbol replicate the letter "S" from "Scan" and resembles a track between one point and another, the sinous shape also represent the Graphs showing realtime data.

AppleStore Iconography for the App

Some screens from Figma, created to set the visual guidelines and combined with the wireframe propiciate a demo which the developer can understand the navigation Experience and replicate it in Swift.

Check the Demonstration!

About: Jog Scan is an easy tracker for jogging and hydratation in WatchOS, it links with HealthKit from Apple and provide information realtime thru Applewatch and Iphone user.

Developed by Erick Yamato and Cecilia Pesce. 2023

Check the App: https://apple.co/46IS5h1