“Sibiul Verde” was an idea which appeared during a hackaton in 2016, and was expended upon during another hackaton in 2019. The main purposes of the project was to inform Sibiu’s inhabitants about waste collection, the importance of recycling and responsible consumption.
The project was initiated by Fundația Comunitară Sibiu, together with wenglor.
The customer wanted to present the inhabitants of Sibiu with a single source of information, where every information about recycling and waste collection would be easily available.
Our task was to provide such product, as well as envisioning all the visual branding. However, at this stage, the request was for the product to only be designed for mobile. The desktop design was to come at a later stage.
The project started with an in-person meeting, where we got a better picture about who “Sibiul Verde” was and begun establishing the brand identity.
Our role was to understand the customer, create a filter that fits their vision of the end-product and run everything through that filter to have a cohesive result.
After our initial discussion, we narrowed down the brand’s visual focus points to the following:
- round shapes – closed to how nature does it
- formal, yet non-conventional style
- care for the environment should be a primary theme
- high number of saturated colors
- focusing on pictures rather than on illustrations
With these in mind, we went on to the next step.
To make sure we understood the customer’s vision and more importantly, for the customer to make sure we understood their vision, we had to portray everything through a visual medium. The chosen medium was a stylescape: collage of pre-existing media (e.g. fonts, images, graphics, colors) from different sources. The 4 directions we offered were graphic, nature, city and contrast.
The first one’s design was centered around pastel colors, as these convey a feeling of coziness and relaxation, with a large number green shades. The containing elements are based on round illustrations and simple geometric shapes.
The second one contains fewer graphical elements, giving it a more aired look and feel. There are also fewer colors, more corners and overlapping images.
The city stylescape focuses on a large number of base colors, all derived from the main colors of Sibiu. There is less space between elements, text is overlapping with other elements and the main graphical theme is drawn from the city itself.
Circles and curved lines are the main topic of this last stylescape. Together with a larger number of main colors and eco-city focused images, the end result is a clean combination of high contrasting elements on an airy slate, fitting for the main target audience.
The chosen stylescape was the last one, which was taken as a starting point for the logo and styleguides.
Having a clear picture of the general branding direction, we continued with designing the logo.
We presented 3 different logo directions, all on-brand but unique in their own ways:
1. The first option was a stylised modern city skyline, with an encompassing branch with leafs, bringing forward the idea of care for both the city and the environment.
2. Secondly, we continued with the idea of encompassing, but this one was focused on a familiar element from the medieval buildings of Sibiu – the eye
3. Lastly, our third option was to use the tower shapes of the 3 main buildings of Sibiu together with a leaf, which symbolises the care for nature
The second and the last option went on to the next round, but after fierce battle and slight alterations, the winner was declared:
Starting from the chosen logo, we designed a loading animation which would welcome the visitor on the website:
Style guide & brand guide
Putting everything together from the previous steps, a few different options for styleguides were created, out of which we ended up using the one visible in this section.
At the end of the project, when everything was in place, we put together a more comprehensive brand guide, detailing all aspects of the “Sibiul Verde” visual brand identity.
Site map and wireframes
To provide a clear view on how the website was going to be structured and what features would be available on specific pages, we provided both a site map for the website, as well as detailed wireframes for each page.
Since the website was designed to be mainly used on mobile, the design was similar to those of modern mobile applications, so the user would feel a certain familiarity when using the website.
A dark mode was the perfect addition for the Sibiul Verde website, as it fit with the overall eco theme.
We implemented a button that would toggle between the light and dark modes, as well as a setting which would automatically set the website to the dark mode if the operating system the visitor used would have such mode selected. Of course, everything is GDPR compliant, including the setting which remembers the user’s selection.
Since the entire purpose of the project was to provide information to visitors, the main feature of the website was the site-wide search.
There are different types of content available on the website (waste, FAQs, articles and myths) where a visitor could search in. The search would then be performed through all, and the results grouped accordingly. All this is done without the page have to refresh, keeping in tone with the app-like fell the website goes for.
Other notable features
To enhance the powerful site-wide search, we added the following notable features, requested by the client.
Since french fries and chips refer to the same thing, searching for either those terms should results in the same information being displayed to the visitor. We provided a “synonyms” section for every key search term, so the administrators could decide what keywords should return the same results.
To make sure the website provides relevant results, we offered a way for administrators to see what users actually search – GDPR compliant!
Administrators have at their disposal a dedicated dashboard, where the most searched terms will appear, giving them the possibility to create new content, in-line to what the public searches.
Social media elements
For the product launch, we provided some different social media elements, with different designs depending on the platform for which they were intended for.
Website management guide
Due to the website becoming quite complex, a comprehensive guide was put together. As a result, everything that could be done on the website’s administration dashboard was written out in a simple and easy to understand PDF document.