East Van Roasters

Not your typical bean-to-bar experience

TASK

Design a User Interface website that is responsive (mobile to desktop), collaborating with User Experience designers.

TEAM

Jenny Cho, UI designer

Renato Vieira, UI designer, case study

Andrea Lin, UX designer, case study

Gabriela Matey, UX designer, case study

TOOLS

Hand drawing, Sketch, Illustrator, Invision

CLIENT BRIEF

Key problem/opportunity

East Van Roasters (EVR) is the first cafe in Vancouver to make their own chocolate and coffee in house. The cafe is well loved in the local community for their high quality taste and unique atmosphere. EVR is a non profit social enterprise that provides employment opportunities to women that are in treatment.

EVR wants to increase awareness of their product as well as their social enterprise. It is important for the website to have an easier flow for the users to navigate. EVR also wants to create more engagement and interaction with its audience through their website by promoting:

  • Volunteering
  • Classes and workshops
  • Donating
  • Sign up for monthly newsletters

Keywords

  • Bean-to-bar chocolate
  • Social-enterprise
  • Coffee roaster
  • Vancouver coffee/chocolate shop

Target Audience

  • 25–40 male and female
  • Working professional, office in Gastown
  • Wants to support local businesses
  • coffee and chocolate connoisseur

PROCESS

_Client Kick-off

Similar to the earlier project, the UI and UX designers sat together and decided on the material that we needed to discuss with the client during the kickoff. A gut test was conducted to figure out the client’s design wishes. Unfortunately, the client wasn’t thrilled with a lot of the slides that were provided and so provided websites that had a similar look to the way she saw EVR doing.

Client’s website inspirations

Based on the websites the client sent over, it was clear that she wanted her website to have high quality photographs, ones that illustrate the products being made, as well as a close up shot of the product. She also wanted to have a simple colour scheme of black or white. So based on this finding, we created a design inception.

WHY-

Showcase high quality ethically sourced chocolate and coffee through website.

MOOD-

  • Unrefined
  • Crafted
  • Considerate
  • Welcoming
  • Rustic

COLOUR-

warm colours are chosen as main colour palettes to have a welcoming and rustic feeling. The colours also represent the different colours of the Cacao pod as it ripens.

MOOD BOARD

Based on the design inception above, the mood board was created. The far left image with the sun shining into the room represents the welcoming environment EVR provides. The image of the hand holding a plant represents the in-house process of creating the products.

_Logo Creation

This is the initial logo East Van Roasters had before the project. My UI partner and I wanted to create a new logo based on the our design process we had so far.

So, we dedicated 30 minutes of logo creation where we sketched out all of the logo ideas on the board without discussing with each other. These are some of the logo creations we came up with.

Some of these were then digitized to get a feel for the logos.

These logos were brought to the client to see how she felt about them. Upon discussion, we came to the conclusion that the current logo is very well loved and recognized by the clients and business alike. So instead of creating a logo, some UI elements were added to tidy up the old logo.

The kerning and spacing was adjusted with the letters to have a more uniform feel. The cacao pod was expanded and placed closer to the letters so that it is easier on the eyes. The same colour of the pod was incorporated to the ‘Artisan Chocolate + Coffee’ for a more seamless feel. These were small adjustments made to the original logo that give it a more modern feel.

DELIVERABLE

When coming up with iconography designs, it was very important to have a consistent theme throughout the website to make the user experience seamless and inviting. As the cacao pod is such a distinct feature of the logo, we decided to incorporate the pod with different elements of the website.

The process section of the website is a page we wanted to shed some light to, as it goes over the production of the chocolate from the origin of the beans, as well as the process of making different chocolate bars.

First, we wanted to incorporate the different cacao pod origins in to the icons. So we looked at the flags of the different origin countries.

Guatemala, Dominican Republic, Peru, Madagascar

Then, we incorporated the flags on to the beans.

This adds an element of surprise to the origins of the chocolate as well as sticking with the the theme.

Next, we wanted to illustrate the process of chocolate production.

Based on the image above, the hand drawn sketches were created. And then, these images were digitized.

The sketches were created in colour, and then outlined roughly in grey. It was decided that the grey icons have a more uniform feel and showcase the craftsmanship of the chocolate making process.

_STYLE GUIDE

This is the Style Guide created based on the design direction. This incorporates the new logo, and icons that were created.

Some of the buttons are listed that give the website a similar feel to the client’s website inspirations.

MOBILE vs DESKTOP

While creating a responsive website, it was important to keep the material consistent so that the transition from mobile to desktop (or vice versa) is smooth. Most of the screens are kept very consistent, and the biggest distinctions were in the menu bar.

Desktop and mobile Menu Bar

The website relied heavily on photographs to show the users the behind the scenes process of EVR and familiarize the users to the environment. It was both challenging and exciting working with photographs and making sure it was telling the right story in the right page of the website.

These were some of the screens that were created. The invision links contain all of the screens that are clickable for both mobile and desktop.

Mobile Invision: https://invis.io/WKDAIH3QD#/251505993_Home_Page

Desktop Invision: https://invis.io/QHD95W8FC#/250907059_Landing_Page_1

REFLECTION

This was the first time working with another UI and it brought so many interesting challenges. I appreciated having someone be on my side and be on the same page with my design process. I had underestimated the amount of work it takes to combine two heads for one consistent design direction. I am happy with the final product, and feel that the product was able to make the client’s inspiration come to life.

For the future, I would like to have had more high quality and consistent photography to work with. Overall, it was a great learning experience.