Dogma Cafés

dogmacafés. Interactive experience of purchasing and customizing blends of coffee capsules.

Dogma Cafés
Scope of work: Identity, UI/UX, Web Design
 
 
Recently I attended a course of User Experience & User Interface Design, in EDIT – School of Interactive Design and Technology. This project that I present, shows part of the process of the project that was proposed in this course. Throughout the course, I learned new design methods, more agile and iterative, applying some concepts of User-centered design, Lean UX and Mobile First.
 
Recentemente frequentei um curso de User Experience & User Interface Design, na EDIT – Escola de Design Interativo e Tecnologia. Este projecto que vos apresento, mostra parte do processo do projecto que nos foi proposto. Ao longo do curso aprendi novas metodologias de design, mais agéis e iterativas, aplicando alguns conceitos das metodologias de User-centered design, Lean UX e Mobile First.
PRODUCT SCOPE
 

The purpose for this project? 
 
This project has a necessity as its starting point. This need is to create an online platform for the sale of coffee capsules without intermediaries. It is intended to add value through personalization of coffee capsules, creating new concepts of coffee appreciation. Other needs that this platform helps to bridge, is enabling to share the service, making the users ambassadors of the coffee by sharing experiences of the blends created on the online platform.
 
Create its own brand 
 
The proposal developed aims to maximize the brand, visual perception and interpretation of the public. A good identity is articulated around a good narrative – its concept. In this sense I created a visual identity and a name based on the concept ‟Don't hold in beliefs.” The ideas inherent to this concept are irreverent, melodic and contemporary. Through this narrative is intended to provide to all coffee lovers a melodic experience, awakening the joy, humor and well-being.
 
Users/Target
 
The audience defined for this project are enthusiastic young urban coffee aged 25-35 years, with a liberal attitude, trendy, contemporary and seeking new concepts of coffee appreciation.
 
O propósito deste projecto?

Este projeto tem como ponto de partida uma necessidade. Essa necessidade passa por criar uma plataforma online de venda de cápsulas de café sem intermediários. Pretende-se acrescentar valor através da personalização de cápsulas de café, criando novos conceitos de apreciação de café. Outras necessidades que esta plataforma ajuda a colmatar passam por potenciar a partilha do serviço, tornando os utilizadores os embaixadores do café através da partilha de experiências dos blends criados na plataforma online.
 
Criar uma marca própria
 
A proposta desenvolvida tem como objetivo elevar ao máximo a marca, a percepção visual e a interpretação por parte do público. Uma boa identidade articula-se em torno de uma boa narrativa – o seu conceito. Neste sentido criou-se uma identidade visual e um nome com base no conceito «Não te prendas a crenças.» As ideias inerentes a este conceito são irreverência, melódico e contemporâneo. Através desta narrativa pretende-se proporcionar a todos os amantes do café uma experiência melódica, despertando a alegria, o humor e o bem-estar.
 
Utilizadores/Target
 
O público definido para este projeto são jovens urbanos entusiásticos do café com idades entre os 25–35 anos, com uma atitude liberal, trendy, contemporânea e que procura novos conceitos de apreciação de café.

CONTENT PROPERTIES
In this project we started with a brainstorming session and card sorting. After we reached some concepts of the structure of the website, we get together them in various areas (that made sense for our individual project in question). The decisions were based on creating simple navigation flows, keeping the guidelines requested by the client in the briefing. This was a useful approach that helped me to create the information architecture, the structure of the main menu, flows and navigation of the website in its entirety.
 
Neste projecto começamos com uma sessão de brainstorming e de card sorting. Depois de termos chegado a alguns conceitos da estrutura do website, agrupamo-los em várias áreas (que fizessem sentido para o nosso projecto individual em questão). As decisões tomadas foram com base na criação de fluxos de navegação simples, mantendo as directrizes pedidas pelo cliente no briefing. Esta foi uma abordagem útil que ajudou a criar a arquitectura de informação, a estrutura do menu principal, os fluxos e a navegação do website na sua totalidade.
SITE MAP
It was intended to create a simple and lean structure. Based on the above assumptions, four main areas are defined.
 
Pretendeu-se criar uma estrutura simples e magra. Com base nas premissas anteriores foram definidas quatro áreas principais.
These areas are: 
 
Gallery Capsules – Where the user search and made ​​the purchase of products/capsules. These are created by the brand or the users. 
 
Interactive Mixer – Where the user customize and creates the coffee capsules within a catalog of blends. 
 
Login Area – This is the personal area of the user. In this page the users can save their creations as well saving is favorite products. When the user have an active account he also has the ability to share the products that he like with their friends and also is able to score the capsules that he like. The personal area also allows the user to track the order.
 
Cart – This is the page where the user see what he already added to buy and where he finalizes the purchase procedure. 
 
This approach is really useful and allow's me to construct a 1st level navigation without redundancies and allowing users to quickly identify what they need without wasting time.
 
Essas áreas são as seguintes:
 
Galeria de Cápsulas – Onde é feita a pesquisa e a compra dos produtos/cápsulas, sejam estas criadas pela marca ou pelos utilizadores.
 
Misturador interativo – Onde é feita a personalização e a criação das cápsulas de café pelos utilizadores dentro de um catálogo de blends.
 
Área de Login – Esta é área pessoal de cada utilizador, nesta página os utilizadores podem guardar as suas criações, bem como guardar os seus produtos favoritos. O utilizador com a conta activa também tem a possibilidade de partilhar os produtos de que mais gosta com os seus amigos, e também a capacidade de poder pontuar as cápsulas de que mais gosta. A área pessoal também permite o controle da encomenda e do seu estado.
 
Carrinho – É a página onde o utilizador observa o que já adicionou para comprar e onde finaliza o procedimento de compra.
 
Esta abordagem foi-me útil para construir um 1º nível de navegação onde não houvesse redundâncias, permitindo aos utilizadores a identificação rápida daquilo que procuravam sem perder tempo.
PERSONAS

The personas are especially useful to help making decisions, balancing the user needs with business needs.
Two personas were created in this project: 
— Main buyer, Joana 
— Mixologist, António
 
As personas são especialmente úteis para ajudar a tomar decisões, equilibrando as necessidades dos utilizadores com as necessidades de négocio.
 
Foram criadas duas personas neste projecto:
— Main buyer, Joana
Mixologist, António
JOURNEYS, TASKS, FLOWS
User journeys and flows are a method for conceptualizing and structuring a website's content and functionality.
 
This is the choosen one's to create the navigation flows:

Main Buyer 
Buying a product from the list of capsules created by other users and/or promoted by the brand. Entering in the platform and finalize in the Buying Process.
 
Mixologist
Creating new capsule, entering in the tool until the moment of publishing/buying.
 

As user journeys e os flows são métodos para conceptualizar e estruturar os conteúdos e a funcionalidade de um website.

Estas são as journeys escolhidas para criar os flows de navegação: 
 
Main Buyer
Comprar um produto da lista de capsulas criadas por outros utilizadores e/ou promovidas pela marca. De entrar na plataforma até entrar no Buying Process.
 
Mixologist
Criação de nova capsula, desde entrada na ferramenta até momento de publicação/compra.
WIREFRAMING & PROTOTYPE
Wireframes are good to communicate ideas and reduce scope creep, enabling great upfront usability and functionality testing. After made some decisions through wireframes an interactive prototype was created to test the hypotheses and assumptions made in design. The prototype was created in Axure but without the intention to replicate the whole website, to not expend to much time and effort were created only the critical areas of this online platform. With this prototype was intended to test the design choices as soon as possible in the hands of users, to value the made choices and realize if they corresponded to their expectations and needs.
 
Wireframes são bons para comunicar ideias e reduzir o aumento de escopo, tendo como premissas a funcionalidade e usabilidade. Depois de se tomarem algumas decisões através dos wireframes, um Protótipo interactivo foi criado para testar as hipóteses e as suposições feitas. O protótipo foi criado no Axure mas sem a intenção de replicar todo o website. Criaram-se apenas as áreas críticas da plataforma online para que não se dispende-se muito tempo e esforço. Com este prótipo pretendia-se testar as escolhas de design o mais rapidamente possível nas mãos dos utilizadores, para valorar as escolhas feitas e perceber se estas correspondiam às suas expectativas e necessidades.
 
Adaptive layout prototype in Axure: http://lm46od.axshare.com
IDENTITY
The naming works as an antithesis of the concept brand – Don't hold in beliefs. When I choose the typography for the logo, the intention was that as to be modern, geometric, utilitarian and boldness. I started with the ‟o” in lower case, to create the graphic symbol. Initially the letter was desconstructed on the format of a coffee bean, evolving in its deconstruction I realize that this would have much more impact and would be in better agreement with the concept if the pieces were reversed, creating the initial brand ‟DC”. To raise the idea of experimentation I cut the dogma word in order to convey the message that ‟dogmacafés” isn't related to the status quo and the experimentation is the watchword. The colors are key elements in this identity and, after several studies I choose shades of brown and yellow. The shade of yellow represents Joy, Optimism and Energy, and the shade of brown represents the Earth, Natural and Simplicity.
 
O naming criado funciona como uma antítese do próprio conceito de marca – Não te prendas a crenças. Ao escolher-se a tipografia do lógotipo, havia a intenção de que esta fosse moderna, geométrica, utilitária e boldness. Partiu-se do «o» em caixa baixa, para se criar o símbolo gráfico, descontruíndo inicialmente a letra para o formato de um grão de café. Evoluindo na sua descontrução percebeu-se que esta teria muito mais impacto e estaria em maior concordância com o conceito se as peças fossem invertidas, criando as inicias da marca «DC». Para elevar a idea de experimentação cortou-se a palavra dogma, com o intuito de passar a mensagem de que o «dogmacafés» não se prende ao status quo e que a experimentação é a palavra de ordem. As cores são elementos fundamentais nesta identidade e, após vários estudos, escolheram-se tons de castanho e amarelo. O tom de amarelo representa Alegria, Optimismo e Energia, e o tom de castanho representa a Terra, o Natural e a Simplicidade.
VISUAL DESIGN
Concluding to sum up…
All the work done at an early stage helped really much in all other stages. The entities and the taxonomic tables allowed me to think in content first and then on wireframe and prototyping stage. The User Research stage proven to be the most valuable phase and shouldn't be neglected. This stage really helps to make important decisions. With this project I also learned that all stages are important and they all help the process.
 
Concluíndo e resumindo…
Todo o trabalho desenvolvido numa fase inicial ajudou em muito todas as restantes fases. As entities e as tabelas taxonómicas, permitiram que se pensasse primeiro nos conteúdos, ajudando depois na fase de wireframe e prototipagem. A fase de User Research provou que não se deve descurar desta fase e que esta ajuda em muito na tomada de decisões. Com este projecto também aprendi que todas as fases são importantes e que todas elas ajudam no processo.
“You cannot hold a design in your hand. It is not a thing. It is a process. A system. A way of thinking.”
Bob Gill

You may also like

Médicos do Mundo
Choice – Comunicação Global
Annual Report 2014 Square A.M.
Pensar Angola Agora Book
DMG – Duarte, Mármores & Granitos
CVE website
Quercus Ambiente Newspaper
Back to Top