Por Fabiano Tomoda - UX/UI Designer
Na trilha de UX/UI Product Design, a responsabilidade pós discovery, foi a criação da interface do usuário (UI) do aplicativo Pharus, e o desenvolvimento de uma landing page, nas versões mobile e desktop.
Antes de começar, o time definiu o produto, com base nas discussões e decisões feitas durante o Discovery, e que seria um app, nas versões Android e iOS, que faria a interligação entre escola, empresa e aluno, através de gamificação para os alunos (maiores detalhes podem ser encontrados no relatório do Discovery).
Nesse caso, teríamos como público alvo, alunos do ensino médio, adolescentes com idade média de 15 anos. Para criar as telas do app, criei o moodboard abaixo, buscando inspiração nos apps para adolescentes:
https://www.figma.com/embed?embed_host=notion&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FAUWtMGmLaOIPYm2wksSS4D%2FPharus%3Fnode-id%3D552%253A2696
A seguir, tendo em mente o nome do produto (Pharus), parti para a criação do logo: um farol estilizado, que ficou da seguinte maneira:
Depois disso, passei para a criação dos wireframes do aplicativo, resultado de muita conversa e discussão com os desenvolvedores e, principalmente, com o PO.
O resultado está mostrado abaixo:
https://www.figma.com/embed?embed_host=notion&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fk7IXFYDHB0YaJUE2H0BS7A%2FWireframes-Pharus---Ioasys-Camp-2022%3Fnode-id%3D0%253A1
Após montar a estrutura básica para o aplicativo, nos reunimos para discutir a estrutura básica da landing page, lembrando que era necessário criar 2 versões: uma para o desktop e outra para mobile. O resultado está mostrado abaixo:
https://www.figma.com/embed?embed_host=notion&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FAUWtMGmLaOIPYm2wksSS4D%2FPharus%3Fnode-id%3D672%253A9178
Uma vez tendo os wireframes prontos, era hora de criar o Style Guide, com todos os seus detalhes. Foram criados 2 style guides, um para o app e outro para a landing page, pois existem algumas diferenças entre eles.