Twenty years ago, a little deli called Alimentari popped up on Brunswick St. Named after traditional Italian delicatessens, Alimentari charmed the locals with its rustic, 50s aesthetic and delicious, fresh food and coffee (and, of course, their deli and international groceries).
These days, it’s a true Fitzroy institution and the place to go for a tasty, healthy meal. Liquorice staff members are counted among its regulars and, in fact, many a staff meeting has been held there. You’d be surprised how much easier it is to make decisions over Portuguese tarts.
Eventually, Alimentari’s reputation and customer base outgrew their Brunswick St store and they opened a second Alimentari on Smith Street.
Seeing double
After the opening of the Smith St store, web traffic increased and Alimentari’s existing website began to struggle to keep up with demand. Users found it difficult to navigate and cumbersome to use. It was time for something fresh and new.
On the wish list for the updated site were sections distinguishing the two separate stores, promotion of their new cookbook, a section devoted to take-home meals and more user-friendly, editable order forms.
The overarching goal was to create a space that really showcased the Alimentari brand and gave customers an online experience that mirrored the in-store experience.
Getting started
Our talented designer, Annie MacInnes, took the lead, exploring ideas with the aid of her sketchbook before fleshing them out digitally.
Annie knew immediately that she wanted photography to have pride of place on the new site. After all, it’s the food that keeps customers going back there day after day. Luckily, she was spoilt for choice, with a stunning folio of images supplied by the client.
Looking fresh
Another big job on our to-do list was refreshing the Alimentari brandmark. The existing logo was housed in an awkward oval shape and included a lot of fine details which simply didn’t translate online. We redrew the brandmark, using the beautiful script of their neon sign as inspiration. By freeing up the letterforms and simplifying the typography, we were able to make the brandmark more readable and versatile.
Like the brandmark, our overall approach to site typography was inspired by the bricks-and-mortar stores as well as the popular cookbook. Our heading style was inspired by the blocky, condensed text featured on the building exteriors as well as the section headings throughout the book. We also mirrored other details in the book such as the icon style, line devices and type details so that every piece of Alimentari collateral felt like members of the same family.
Going digital
When it came to the design and build of the website, everything was smooth sailing. We took a “less is more” approach to the site map, using clear information hierarchy and a carefully considered use of colour and animation to create a simple and straightforward journey for the user.
One of the hero elements of the website is the gorgeous logotype animation featured on the home page. Executed by our excellent developer, Michelle Chan, it quickly became one of our favourite parts of the website.
Another important focal point was the cookbook. We included a promotion on the home page, page previews, an overview of the recipes inside and the ability to purchase the book through the site.
The two stores had subtle colour themes (particularly noticeable in their awnings) and we used these colours to differentiate the two stores on the site. Smith St was represented by green and Brunswick St by blue. We also designed a tab-like device with a simple animated transition to make it easy to alternate between the two stores.
We continued this colour coding throughout the site, using coloured overlays, typographic elements and iconography to celebrate the unique personality of each store. You’ll also notice that the two stores have opposite page layouts for further contrast.
Easy breezy
If you’ve ever visited an Alimentari store, you know how friendly and easy the experience is. It was important to make the online experience equally smooth.
For ease of use, jump links were added to mobile and tablet to take the user to specific sections of the menu. Convenient links are included at the bottom of certain pages to encourage users to continue moving through the site.
We added a filtering feature on take-home menus to make it easy to see what’s available at Smith St and Brunswick St stores, and made the process of ordering online simple and clear. Customers can edit their order as they go and always see an up-to-date summary below.
Still, the Alimentari project wasn’t without its challenges. The Liquorice team reported persistent and severe feelings of hunger and food envy on a daily basis.