Onboarding Components
— LAUNCH PROJECT
Style guide
— TYPE
Plataform
— MY ROLE
Product Designer
— CASE
UI Design
CONTEXT
Qconcursos was doing onboarding experiments in your education platform and it required a new components interface which addressed the technical needs (easy to use by developers) and usage needs (solving the product team current issues).
Informações confidenciais (Non-disclosure agreement)
Para cumprir meu contrato de não divulgação, omiti informações confidenciais neste apresentação As informações a seguir são minhas e não refletem necessariamente as opiniões do Qconcursos.
Solution
After reviewing some options in the market, the developer team and the product team chose Shepherd JS (an open source tool with customizable components) to build the onboarding flows.
Depois de analisar algumas opções no mercado, o time de desenvolvimento e o time de produto escolheram o Shepherd JS (uma ferramenta open source com componentes personalizáveis) para criar os fluxos de integração (onboarding).
My role // Main tasks
In order to facilitate its application by others designers, I designed a fully componentized interface framework based on the rules of our design system. Basic elements were built based on the 4-point grid, set up (size, spacing, ect.) and used as a basis for more complex elements, from step indicators and buttons to entire flows.
Buscando facilitar a aplicação por outros designers, eu projetei uma estrutura de interface totalmente componetizada com base nas regras de nosso design system. Os elementos básicos foram construídos com base na grid de 4 pontos, configurados (tamanhos, espaçamentos, ect) e utilizados como base para elementos mais complexos, desde indicadores de passos e botões a fluxos completos.
