Coffee
Team: Krystal Sim
Year: March 2024
My role: Creative Direction, Research, UX/UI Design, Branding
About the project
Coffee is a brief history on coffee’s origins presented in an interactive web experience. It’s goal is to educate audiences on the different coffee cultures beginning from its place of origin to its spread across the world.
This is a self-initiated project completed as the capstone for SuperHi’s Visual Design + Branding course. The prompt was to take a print publication in the public domain and turn it into a digital experience.
This was a one week project that spilled into two. There were too many great facts that I had to leave out due to the time constraint including all of the copy to read through.
The publication
We were instructed to find a print publication, preferably a vintage one pre-90’s, to avoid copyright issues. Modern publications were more likely to already have a web presence, not to mention stricter copyrights.
We found a vintage book on this history of coffee titled Coffee from the 1970’s with interesting illustrations from history and old coffee recipes. I found the brewing methods, devices, and recipes really intriguing and it inspired me to shed light on the history with coffee enthusiasts and hobbyists through a website narrative.
For example, the traverse of coffee began to take form as an interactive map experience through Eastern Africa and the Middle East.
This section in chapter 2 turned into a small timeline about coffee in the middle east.
Translating text to web copy
The initial question I had was, should all of the sections in the book be included in the web experience? Are there sections I can leave out? Thinking about the time limit I granted myself to complete the project, I had to condense the text into bite sized pieces and leave out most of the (very interesting!) recipe index.
I decided to keep most of the main points for each section to 2-3 sentences from each chapter so people wouldn’t get tired of reading so much text.
My process began with the analyzing the text and brainstorming/visualizing how the information could be presented through a web experience. Once the text was given headers and body copy, I started to wireframe my ideas into flows.
This process jumped back and forth between pen, paper, Figma, and Notion where I continued to reevaluate whether or not the content was being represented in a way that made sense.
Visual Design
The color palette was taken from the original cover which was quite earthy—rich clay brown and a deep moss green.
For typography, I wanted to play into the digital reading experience so used Tiempos for the headers because it "updates the functionality of Plantin and Times for contemporary use.” I wanted to use Times since it was widely used throughout publishing in the last century to create a classic look and feel.
I included many images and illustrations from the book as there were a lot of descriptions of unique items such as the coffee equipment used by Bedouin. I searched for historical illustrations within public domain to provide context to the descriptive texts.
Challenges & Future Versions
The main challenge was completing the project within a short amount of time which I found difficult to do because I was over-ambitious. I really wanted to include a visually pleasing and easy to use recipe index which would involve a phase 2 in the future as well as finish adding the remaining chapters.
View my Figma prototype for the desktop version here!