A MICROSITE FOR MEMORY POPSICLES — WHEN ONLY TASTE MAKES SENSE

Sonja Reichel
Apr 29, 2019 · 5 min read

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.

Quote from the event’s website at Helsinki Design Week

:-:-:-:-:-:-:-:-:-:
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.

Prototype of the mobile version

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.

The first four popsicles were drawn by me in Sketch

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.

:-:-:-:-:-:-:-:-:-:

Ironhack

Ironhack is a global tech school with campuses in Miami, Madrid, Barcelona, Paris, Amsterdam, Berlin, Mexico City & Sao Paulo. We offer courses in Web Development, UX/UI Design and Data Analytics. With more than 3000 graduates and an extensive global network and partner companies

Sonja Reichel

Written by

Berlin designer & author (my novel “364 Tage” has been published by acabus-Verlag); Art Director at V-Formation GmbH. https://www.grafikstelle.com/

Ironhack

Ironhack is a global tech school with campuses in Miami, Madrid, Barcelona, Paris, Amsterdam, Berlin, Mexico City & Sao Paulo. We offer courses in Web Development, UX/UI Design and Data Analytics. With more than 3000 graduates and an extensive global network and partner companies