Mistral logo

The Sarajevo Food Dictionary Design System

28.07.2018 - READING TIME: 5 minutes

The Sarajevo Food Dictionary Design System

Author: Vildana Lojo

Sarajevo Food Dictionary Mobile App Screens


Mistral gladly supports innovative ideas and startups. Such partnership was made with a local startup from Sarajevo, Bosnia and Herzegovina, called Sarajevo Food Dictionary (SFD). SFD is the first and only culinary guide through Sarajevo.

The product is originally designed as an alphabet displaying all meals and food offerings that can be found in Sarajevo. When SFD reached out to Mistral in order to design and create a mobile experience, the project was already providing web experience as a WordPress website.

When discussing what the mobile experience for Sarajevo Food Dictionary should look like, several key parameters were defined:

  • The app should be available for both iOS and Android and built with React Native

  • Mobile experience should focus more on the map and navigation context rather than an alphabetical search

  • Users should be able to select a specific location and get relevant information about that specific site and meals that are offered

  • The app should be multilingual, supporting 4 languages: Bosnian, English, Turkish and Arabic

  • And finally, the app should offer the offline mode possibility.


The planned date for the first app release was the end of June, before the beginning of the tourist season in Sarajevo. Taking into consideration the tight deadline and the fact that SFD did not have many defined digital brand and visual guidelines, we decided to implement the Design System.

Design System Main Features and Characteristics


The decision for implementing the Design System for Sarajevo Food Dictionary was based on the following reasons and benefits:

  • A well-defined design system enables the creation of platform agnostic UI

  • Implementing the Design System enhances the solution modularity and components reusability

  • It is easier to maintain and track design-development changes

  • A well-defined design system is a definitive source of truth for all people included in the product development process

  • It helps clearly articulate the brand message, guidelines, and visual identity

  • It can serve as a uniform and clear design language


In order to define and create a new design system for SFD the four main steps were:

Step 1: Analysis — Brand Image and Visual Design

Sarajevo Food Dictionary had only two main logo variants that they have used in print and on the web. The brand image was not well defined and the client only had a general idea of the colors: yellow as a must and other vibrant colors.

Step 2: Visual Language Design

Colors

After the extensive briefing with the SFD founder, we opted for 3 main brand colors: yellow, teal and magenta. The base monochrome palette with 5 shades was also defined along with the 2 primary gradients (teal and yellow).

Monochrome Color Array and Gradients


The main rules and principles for colors were that the contrast ratio should be 4:5:1, the number of the colors and shades should not be too big and most importantly; the main color function was to emphasize the actions and help accessibility.

Typography

As for the typography and due to the uniformity and multi-language support (including the Arabic language) we chose to use the open source Google Roboto font.

Typography and Semantics


Generic parameters

Generic parameters were defined to support the layout, sizing, paddings, margins, radiuses, shadows and units.

Border Radius Generic Parameters
Shadows Generic Parameters


Icons

The icons library was defined to support the navigation and content patterns and accessibility. The icons used to create the SFD icon library are Feather Icons.

Icons Library

Step 3: Components Design

Navigation

Since React Native was used to develop the mobile app, the concept of components was adopted when defining this Design System. The main navigation components follow the native GUI guidelines both for Android and iOS.

Native UI Components — Tabs and Navigation/Tool Bars


Bottom Sheet (Widget)— Product Detail

One of the main features and UX patterns was the introduction of the bottom drawer sheet which displays all relevant data about one specific site. These drawers were designed in a modular way from smaller UI components: headers, content cards, meal cards etc.

Bottom Sheet (Widget) Header
Meal / Offer Cards


Step 4: Documentation

When all of the necessary analysis and design is done, it is very important to store and document the design system to be easily accessible to all project participants. If the design system is well defined and agreed on, it helps produce consistent digital products while articulating the specific brand image and keeping the product user-centered.

At the end of the creation process of the SFD design system, and at the finalization of the first app release, we gathered some key takeaways regarding the designs systems and working with them:

  • If well set and if there is time to analyze and design the system, this is a great way to conduct quality and consistent product design

  • In order for one design system to be successful and to live, it is important that all people involved in the process are aware of its benefits and possibilities

  • Design system is something that evolves, grows and changes all the time, but its main purpose should always be to be user-friendly

  • And last but not least for every project to be successful, good teamwork is essential.

The first official release of the app was on June 27 in the Mistral offices and it was very well received. The first app release provides relevant culinary content to its users, both local and foreign.

User testing is already been conducted for the first release, so the second release will integrate the feedback and make necessary improvements to the SFD mobile app experience.

The app can be found on Play and App store.