East Van Roasters
Social enterprise bean-to-bar chocolate and coffee handmade in Vancouver BC and operated by PHS Community Services Society.
1. The Problem / Opportunity
My fourth project was to design a responsive website for desktop and mobile. The client was chocolate and coffee shop EastVan Roasters (EVR).
Apart from being able to showcase their product offering and space, EVR wants more engagement and interaction with its audience by promoting their programs and activities:
- Volunteering
- Classes and workshops
- Donating
- Signing up for monthly newsletters
Through their site, EVR would also like to create a dedicated section wherein wholesalers can signup, get more information about the products, and be able to order online.
2. Project Goals
- Increase awareness of our product
- Easier flow through the website
- Promote activities, programs and workshops
- More information about cacao and process on the website
- Further elevate and explore existing or new brand/logo directions
- Create a signup/login for wholesalers that can access their wholesale product catalog
Keywords
- Bean-to-bar chocolate
- Social-enterprise
- Coffee roaster
- Vancouver coffee shop
- Vancouver chocolate shop
Target Audience
- 25–40 male and female
- Working professional, office in Gastown
- Wants to support local businesses
- Coffee and chocolate connoisseur
3. My Excellent Team
Renato Vieira, UI designer
Jenny Cho, UI designer (case study)
Andrea Lin, UX designer (case study)
Gabriela Matey, UX designer (case study)
4. Tools
Hand-drawing, Photoshop, Illustrator, Sketch and InVision.
5. Process of Creation and Execution
Client Kick-off
At our first meeting, we did the gut test to try to absorb the client’s design wishes, but we didn’t get a meaningful result and so we asked the client to show us some websites that she appreciates the design.
Design Inception (Why)
To showcase high quality ethically sourced chocolate and coffee through website.
Mood
Considerate, unrefined, grafted, welcoming and rustic.
Colour
Moodboard
A relaxing and cozy environment that represents EVR place, hands showing the rustic process beginning, the beauty and simplicity of cacao beans, the amazing feeling of a hot coffee and craft packages that reminds a something very unique.
Logo
The client already had two strong logos well-recognized by customers. She told us that she wouldn’t like to change it especially because they already invested considerable money printing Christmas materials.
We didn’t accept this idea very well because we were not comfortable with the current logo and we really wanted to build a whole visual identification.
My amazing partner Jenny and I were committed to changing the client’s main logo and we were already running this idea.
The following is a showcase of all the different possibilities we came up with.
At our second meeting with EVR, we had the perception that it would be very difficult to change the existing logos because the walls and windows of the place were full of these.
Even so, we have made some changes on kerning, making the bean colour to the stronger “Artisan Chocolate + Coffee” colour. These changes will not result in financial loss to the client that have invested printing materials for the coming months.
Below is the evolution of the main current logo. It will be used on the new website currently being developed by RED’s web dev team. It will also be used on the next round of EVR’s materials printings.
6. Deliverables
Icons
To make the user experience very inviting and exciting we took the challenge to build beautiful, strong and unique web elements.
We designed icons with the characteristics of each country where EVR sources their cocoa.
We created icons that reflected the beautiful process that a cocoa bean goes through to become chocolate.
We also created cute icons to represent the coffee, the chocolate menu, and the donation icons.
Style Tile and Style Guide
After creating our icons and UI elements, we placed all of them on our Style Guide in a simple, elegant manner.
Mobile vs Desktop
Creating a responsive website for Desktop and Mobile requires consistency because the transition from one to another has to be smooth and seamless. They have to speak the same language in different sizes and screens.
On this project the biggest distinction between desktop and mobile is the navigation. Even so, there is consistency between both and they provide the same feeling and direction.
The website contains photographs on all screens to show coffee, chocolate, and the people behind the scenes . It was a challenging and beautiful process to have to work with photographs. It was necessary to chose the right one for each navigation step.
Desktop Invision: click here
Mobile Invision: click here
7. Conclusion and Reflection
This project, so far, is the best showcase of my work in my beautiful, intense, lovely and extraordinary journey at RED Academy.
We designed this responsive website with passion, focus, discipline and engagement.
Working with other UI Designer is not easy in terms of direction. The biggest challenge was to have everything consistent, and sometimes, some steps took longer than I expected. I also enjoy the experience of working with other people because it challenges me to grow as a designer and as a person. It was a great experience really contributed to my personal and professional developement.
I was an important piece of a great and professional team. I was working side by side almost the entire time with my UI partner Jenny who became a great friend.
This project was awesome and will stay close to my heart. More than that, I really need to say that people are more important than everything because they always represent a beginning of something. I’m extremely happy with my experience with these three unique individuals that helped make me a better person.
I don’t want to forget this project! Never! I will carry all the stories, feelings, hugs, lunches, conversations, retrospectives, hard work, feedback and everything related to this project in a very special place inmy heart.
Thank you very much Andrea, Gabi and especially Jenny! I do like you guys a lot and I will carry you all in my heart always.
