Bernoulli Play | UI Design e UX Design
Bernoulli Play | UI Design and UX Design
Contextualização
A empresa necessitava ampliar sua plataforma de acesso aos seus recursos digitiais chamada "Bernoulli Play", que agora ofereceria acesso a mais recursos com a inserção das Realidades Aumentadas e solicitaria cadastro de usuário, além de estar aberto a novas propostas de melhorias.
Contextualization
The company needed to expand its platform for accessing its digital resources called "Bernoulli Play", which would now offer access to more resources with the inclusion of Augmented Realities and would request user registration, in addition to being open to new improvement proposals.
Analisando
Após análisei de interface e de fluxo de navegação registrei alguns pontos de melhoria como:
- Função "Dúvidas": Acesso presente na tela de home e nas telas das ferramentas direcionam para tutorial de todas as ferramentas presentadas no inicio da navegação e fazem o usuário rever todas elas independente de estar buscando uma específica.
- Tutorial: É exibido todas as vezes que o usuário acessa a aplicação sem opção de pular ou desativa-lo.
- Icone ”Busca por código” - Precisa de um ícone específico uma vez que a "Lupa" utilizada é muito genérica e associada a busca no geral.
- Busca por código: Após pesquisa o resultado não deveria apresentar opções não disponíveis (exemplo apresentar o acesso a resolução em imagem sem que haja imagem disponível).
- Galeria de imagens: Possibilidade de colocarmos a navegação por carrossel para otimizarmos a navegação entre as imagens de uma galeria.
- Função "Últimos acessados": Exibição de mais de 10 códigos ou endereços sem referências claras não é interessante uma vez que o usuário dificilmente irá se lembrar do que se trata os códigos mais antigos.
- Identificação de recursos na "Busca por código": Idenpendente do recurso eles são identificados como "Resolução".
- Ferramenta "Quero saber": Interessante remover a animação de leitura (barra horizontal em movimentos) pois o funcionamento diferente do "Leitor de QR code" é por fotografia, o que pode induzir o usuário a esperar uma leitura que não aconteceria.
Com estes e outros diversos aspéctos levantados montei a seguinte proposta de navegação que sofreu alguns ajustes e acréscimos no desenvolver do projeto.
- Tutorial: É exibido todas as vezes que o usuário acessa a aplicação sem opção de pular ou desativa-lo.
- Icone ”Busca por código” - Precisa de um ícone específico uma vez que a "Lupa" utilizada é muito genérica e associada a busca no geral.
- Busca por código: Após pesquisa o resultado não deveria apresentar opções não disponíveis (exemplo apresentar o acesso a resolução em imagem sem que haja imagem disponível).
- Galeria de imagens: Possibilidade de colocarmos a navegação por carrossel para otimizarmos a navegação entre as imagens de uma galeria.
- Função "Últimos acessados": Exibição de mais de 10 códigos ou endereços sem referências claras não é interessante uma vez que o usuário dificilmente irá se lembrar do que se trata os códigos mais antigos.
- Identificação de recursos na "Busca por código": Idenpendente do recurso eles são identificados como "Resolução".
- Ferramenta "Quero saber": Interessante remover a animação de leitura (barra horizontal em movimentos) pois o funcionamento diferente do "Leitor de QR code" é por fotografia, o que pode induzir o usuário a esperar uma leitura que não aconteceria.
Com estes e outros diversos aspéctos levantados montei a seguinte proposta de navegação que sofreu alguns ajustes e acréscimos no desenvolver do projeto.
Analyzing
After analyzing the interface and navigation flow, I recorded some points for improvement such as:
- "Questions" function: Access on the home screen and tool screens directs you to a tutorial on all the tools presented at the beginning of the navigation and makes the user review all of them regardless of whether they are looking for a specific one.
- Tutorial: It is displayed every time the user accesses the application with no option to skip or disable it.
- “Search by code” icon - Needs a specific icon since the "Magnifying Glass" used is very generic and associated with the search in general.
- Search by code: After searching, the result should not show unavailable options (example showing access to image resolution without an image available).
- Image gallery: Possibility to add carousel navigation to optimize navigation between images in a gallery.
- "Last accessed" function: Displaying more than 10 codes or addresses without clear references is not interesting as the user will hardly remember what the older codes are about.
- Identification of resources in the "Search by code": Regardless of the resource, they are identified as "Resolution".
- "I want to know" tool: It is interesting to remove the reading animation (horizontal bar in motion) as the different way the "QR code reader" works is by photography, which can induce the user to expect a reading that would not otherwise happen.
With these and other various aspects raised, I put together the following navigation proposal, which underwent some adjustments and additions during the development of the project.
O projeto
Com a proposta de navegação aprovada desenvolvi a interface do aplicativo em um estilo minimalista para valorizar a diversidade de recursos (seja videos, jogos, simuladores, realidades aumentasdas e etc) através de imagens que são exibidas em plano de fundo, o que ajudou a dar mais vida a tela de home por exemplo, em que tecnicamente só temos ferramentas que majoritariamente não apresentam caracteristicas visuais a serem trabalhados de forma visual na sua apresentação, sendo dois leitores coma a camêra e outro um boxe de inserção de códigos.
The project
With the navigation proposal approved, I developed the application interface in a minimalist style to enhance the diversity of resources (be it videos, games, simulators, augmented realities, etc.) through images that are displayed in the background, which helped to give more life to the home screen for example, where technically we only have tools that mostly do not have visual characteristics to be worked on visually in their presentation, with two readers like the camera and the other a box for inserting codes.
Para os elementos iconograficos foi utilizado uma coleção que já é usado em outra plataforma da empresa, porém desenvolvi o novo ícones de "Busca por código" que era uma necessidade apontada na análise e também o ícone de "Realidade aumentada" que é uma ferramenta exclusiva desta plataforma.
For the iconographic elements, a collection was used that is already used on another company platform, but I developed the new "Search by code" icons, which was a need identified in the analysis, and also the "Augmented reality" icon, which is an exclusive tool. of this platform.
For the iconographic elements, a collection was used that is already used on another company platform, but I developed the new "Search by code" icons, which was a need identified in the analysis, and also the "Augmented reality" icon, which is an exclusive tool. of this platform.
Além disso como ponstos de destaques no na plataforma destaco:
- Layout responsível
- Layout responsível
Additionally, as highlights on the platform, I highlight:
- Responsive layout
- Responsive layout
- Modo escuro e claro.
- Dark and light mode.
- Galeria de imagens com visão em tela cheia, legenda, navegação carrossel e rotação.
- Image gallery with full screen view, caption, carousel navigation and rotation.
- Galeria de Realidades Aumentadas com ferramenta de filtro, favoritos, área de destaque e ferramenta de pesquisa.
- Augmented Reality Gallery with filter tool, favorites, highlight area and search tool.
- Imagens de divulgação para as lojas.
- Advertising images for stores.
- Arquivo desenvolvido e organizado de forma a facilitar o escalonamento com todas as definições de paletas, estilos e regras e formatos.
- File developed and organized to facilitate scaling with all definitions of palettes, styles and rules and formats.
