Overview

A proposta da brainn é ser uma empresa de desenvolvimento de produtos digitais de escopo flexível.

Nossos designers devem ser capazes de criar soluções que envolvem visual design, branding, experiência do usuário, interface, arquitetura de informação e estratégias de produto. Por isso precisamos de pessoas com perfil multidisciplinar e que sejam focadas em entregas de excelência.

Tecnologias

Na brainn não trabalhamos ferramentas específicas ou obrigatórias. Somos poliglotas e incentivamos o uso de novas tecnologias desde que o time concorde em conjunto e esteja preparado para assumir os riscos de ter que reimplementar utilizando alguma tecnologia mais tradicional em casos de incidentes. Entretanto, nesse momento, temos algumas preferências para o desenvolvimentos de conceitos visuais, interfaces, apresentações e handoof de assets:

Visual Design

• Figma
• Adobe Photoshop
• Adobe Illustrator
• SketchApp

Interfaces

• Figma
• SketchApp

Protótipos e Mockups

• Figma
• Invision
• Craft
• MarvelApp
• Flinto
• Principle
• Framer

Interações e Motion

• Flinto
• Framer
• Principle
• After Effects

Handoff de assets

• Invision
• Zeplin

Desafio

Cenário

O Github é uma rede social de programadores que possui uma funcionalidade interessante que permite curtir o repositório de outros usuários. Trata-se de um botão escrito star encontrado na página de cada repositório.

Persona

Rick é um usuário ativo do Github que está sempre buscando novos projetos curtindo os que acha interessantes. Ele gostaria de poder adicionar um label ou tag para marcar o repositório de modo que ele possa filtrar.

Por exemplo, ele encontrou um repositório chamado react e gostaria de adicionar as tags javascript e frontend. Como o Github não possui essa funcionalidade, Rick precisa de um sistema que consiga ajudá-lo com isso.

Na prática

O desafio consiste em desenvolver uma aplicação web e mobile, o GithubStars, que obtém todos os repositórios que um determinado usuário "curtiu". Além disso, deve existir a funcionalidade de adicionar tags específicas a cada repositório e consequentemente um sistema de busca.

Importante

Os wireframes que serão apresentados abaixo servem como guia para os dados que serão exibidos no front. O designer deve propor soluções de branding, visual, design, interface e experiência.

Há 3 user stories para entendimento sobre o que é necessário fazer:

1. Obter repositórios remotos e cadastrar no banco de dados local

Como usuário, eu quero fornecer meu username e salvar no banco de dados local todos os repositórios que eu curti para posteriormente adicionar minhas tags.

Wireframe

Funcionamento

O usuário informa o username na tela para que o sistema obtenha os repositórios do Github.

2. Adicionar tags para os repositórios

Como usuário, eu quero adicionar tags (labels) para cada repositório para eu poder efetuar uma busca por tag.

Wireframe

Funcionamento

O usuário acessa o sistema pelo browser, visualiza a lista de repositórios cadastrados no banco de dados, seleciona um deles e consegue digitar tags separadas por vírgula para salvar em seguida.

3. Buscar repositórios por tag

Como usuário, quero poder fornecer uma tag e obter os repositórios que possuem essa tag para visualizar na tela o resultado da minha busca.

Wireframe

Funcionamento

O usuário acessa o sistema, digita uma tag e aperta a tecla . O sistema exibe todos os repositórios que tenham a tag definida.

O que será avaliado

• Entendimento do briefing
• O quanto a ideia é inovadora e disruptiva?
• Como você arquiteta informações, prioriza e organiza conteúdo?
• Qual é a qualidade visual da solução desenvolvida?
• Como você padroniza componentes para criação de interfaces consistentes?
• O quanto você contempla a experiência do usuário na sua solução?
• Como você disponibiliza os assets de design para os desenvolvedores?

Requisitos e entregáveis

• A proposta deve ter UI responsiva (Desktop e mobile)
• Explicação da solução apresentada em formato livre. Se preferir, inclua fluxogramas, wireframes, storyboard, grid, etc.
• Explicação breve de como você testaria a sua solução com o usuário (questões de investigação, hipóteses, recrutamento, etc.)

Vale lembrar

• Existem requisitos mas não existem restrições técnicas.
• Crie pensando no melhor cenário de recursos.
• Você deve pensar os atributos e características da expressão/identidade visual da marca.
• Não fique preso às features já existentes, você tem liberdade para repensá-las.

Considerações Finais

Entendemos as dificuldades do dia-a-dia para quem trabalha em ter que dedicar um tempo para resolver esse tipo de desafio. Por isso pedimos para que mesmo que você não consiga completar o desafio, nos envie assim mesmo. Não queremos julgar nossos candidatos, queremos apenas entender melhor a maneira como cada um pensa e age diante de um problema comum.

Qualquer dúvida pode entrar em contato conosco.

Boa sorte!!!