A MICROSITE FOR MEMORY POPSICLES — WHEN ONLY TASTE MAKES SENSE
EVOKING MEMORIES THROUGH THE MOST INTIMATE OF OUR SENSES — TASTE
Task 6 -:-:- Week 6 -:-:- Ironhack Bootcamp Berlin -:-:- Individual Project
:-:-:-:-:-:-:-:-:-:
TASK
This time, we were to come up with a responsive microsite for desktop and mobile devices. I decided to create one for memory popsicles, an exhibition at Helsinki Design Week 2019.
:-:-:-:-:-:-:-:-:-:
BACKGROUND
Helsinki Design Week
Founded in 2005, Helsinki Design Week is the largest design festival in the Nordic countries, showcasing design from various fields, as well as fashion, architecture and urban culture. The festival is a platform for new faces and phenomena of design and is aimed at professionals and the general public alike. In 2018, it attracted approximately 170,000 visitors.
Memory Popsicles
This small exhibition will be all about taste. Visual elements will be reduced to a minimum so that nothing distracts the participants from defrosting their memories conjured up by tasting popsicles. Afterwards, they will not only write down and share their memories with the others but will also learn about the original memory the artist has attributed to each taste. These original memories culminate in correspondent recipes in the cook book Cooking from Memory, which will be released that same evening.
The artist is mainly driven by the question whether we can share memories beyond oral tradition and books. He or she (the name is not yet disclosed on the main website) investigates if our own subjective interpretation of taste leads us to different conclusions about the stories we are consuming.
:-:-:-:-:-:-:-:-:-:
DESIGNING THE MICROSITE
With this information at hand, I opted for a minimal, modern design to reflect both the minimalism of the venue and of Scandinavian design. The emptiness of the exhibition space is reflected by the use of white space throughout the sites. The popsicle icons are as neutral as the real ones and consist of black vector graphics. Since all focus is on taste, I have chosen strong colors as visual metaphor for the real taste you savor at the event. Additional freehand shapes add an artsy touch to the site and capture another aspect of the event.
Information architecture, low-fi and mid-fi prototypes and testing
Before prototyping I organized the information to be found on the microsite and labeled the three categories for both mobile and desktop to be About — Popsicles step by step — Helsinki Design Week.
In the low-fi sketch I started to illustrate the visual tasting of the popsicle. Although it was black-and-white I already knew I would want bold colors to highlight the popsicle and provide for a visual simulation of the real tasting of the popsicle.
When testing the prototype, my users asked several questions about the event itself which resulted into adding extensive background information to the About page. I also added more explanatory copy and numbers to the step-by-step tasting of the popsicles to carve out the metaphorical meaning of this part of the website.
High-fidelity prototype
I continued on setting up the visuals for the website. I drew a popsicle in Sketch which diminished gradually by bites being added. I started searching typefaces and liked the filigrane and elegant look of Filson Soft. I paired it with Zebrazil, a unique typeface particularly for headlines. In Illustrator, I designed some cloud-like and pencil-drawn shapes that were to contrast with the white space I had in mind for the website.
In Sketch, I set my art board on responsive web and started with the design for the desktop version.
:-:-:-:-:-:-:-:-:-:
TO PLAY THE DESKTOP PROTOTYPE, PLEASE CLICK HERE.
:-:-:-:-:-:-:-:-:-:
For the mobile version, I rearranged the layout in order to ensure a satisfying user experience across devices. Instead of a top bar for navigation, I inserted a hamburger menu. When clicking it, you get access to the three main categories and are also informed about the venue, including contact details.
The About page comes with quite some scrolling. In order to keep the reader interested, subheadings, quotes and icons add some spice to the mere informative part. You can use the back-to-top arrow throughout the site, and can also jump to the step-by-step tasting of the popsicle from several instances.
:-:-:-:-:-:-:-:-:-:
PREPARE THE FILES FOR DEVELOPERS
Structuring Sketch file and exporting to Zeplin
This week, we were also introduced to Zeplin, a program to help organize the information of a Sketch document for developers. Before exporting, it was important to arrange all fundamental elements, symbols, fonts and colors used so that anyone not familiar with the file would find everything right away.
Zeplin displays everything in an easily accessible way, and added great-sounding names to my colors, which range from golden to dirty-blue and denim to dark-pink and burnt-sienna.
Learnings from this week? Above all — organize your files well! Create atoms, molecules and organisms, maybe even pages and templates. Make sure to turn them into symbols. Why? Because if you later need to change to a symbol, it will automatically be updated throughout the document. Which saves time, precious time.
:-:-:-:-:-:-:-:-:-:
