A partir do Style Guide e Wireframe , foi possível realizar a criação do protótipo, posteriormente testado com usuários. O protótipo foi feito em alta definição e passou por ajustes pós testes com usuários antes de ser programado.
https://lh6.googleusercontent.com/gx4PLf1yBeTKq2SsOFAEr4nD6DYX5wuUTO1UKq0KgJ-wUIzSdwdlrvJqr4HYSEC3DCTOvxsGSTRW2UVUzE2_TPB5q-3X_eWyY8-vEmoBAEbHOv7ew4kr6sNCoXxW3DhgKtsf5Bv3
Figma
Nas etapas finais do desafio, foi prototipada a primeira versão do Bookfolio, o grupo optou pela realização de um protótipo de alta definição, praticamente a interface final, de forma que os usuários, durante o teste, tivessem um contato com um produto mais próximo de sua versão definitiva para realizar sua avaliação. Pouco mudou em relação ao protótipo e a interface final.
Através dos testes, descobrimos que alguns usuários tinham dúvidas em relação as caixas contendo a capa e informações sobre determinado livro, se eram clicáveis. Dado isto, adicionamos setas na parte inferior direita de cada caixa, para indicar que é possível entrar e observar mais informações.
Mais sobre a interface: a landing page conta com uma chamada na parte central da tela que inclui um call to action e a explicação sobre a aplicação se encontra disposta em duas colunas, intercaladas entre imagens e textos. Optamos pela tela de login simples, sem imagens, para que seja mais adaptável no design responsivo.
Para as demais telas no desktop, optamos por um design em três colunas, como na tela de seleção de nível, em “Navegar” e nas informações do livro. Em telas menores, as informações dependerão da rolagem.
A barra de navegação que se encontra na parte superior se mantém estática durante a rolagem. Enquanto no menu navegar, os usuários têm a opção de filtrar por gênero ou autor, e há a possibilidade de busca por palavras.
https://www.figma.com/embed?embed_host=notion&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FxKTdSIOfAhvt5gZNSlEUjh%2FProtótipo-Bookfolio%3Fpage-id%3D72%253A179%26node-id%3D72%253A180%26viewport%3D1569%252C301%252C0.5%26scaling%3Dscale-down-width%26starting-point-node-id%3D72%253A180%26show-proto-sidebar%3D1
https://www.figma.com/embed?embed_host=notion&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FxKTdSIOfAhvt5gZNSlEUjh%2FProt%25C3%25B3tipo-Bookfolio%3Fnode-id%3D72%253A179
<aside> 💡 Link: https://www.figma.com/file/xKTdSIOfAhvt5gZNSlEUjh/Protótipo-Bookfolio?node-id=72%3A179
</aside>
Foram desenvolvidas as seguintes peças para a divulgação do PWA Bookfolio nas lojas de aplicativos mobile:
