Botìa Cantoni

Redesign and implementation of the website botiacantoni.it, related to a century-old shop

Project features

Scope:
communication, UX/UI design, web design
Type:
university project; project for private clients
Team:
individually developed project
Year:
2021-2022
Tools:
Figma, WebStorm
Languages:
HTML, CSS, JavaScript

Overview

Botìa Cantoni is a historic and century-old shop, located in the famous mountain context of Livigno. The commercial activity was founded in 1923 by the enterprising Bernardo Cantoni and Emilia Bormolini, becoming over time a reference point for the town, its inhabitants, and tourists.

The founder Bernardo, a pioneer and tireless man with long-term vision, in the first half of the twentieth century tried to improve the situation of the town in every way, isolated from the rest of the world in the winter months. First of all, his goal was to renew the road system. Thanks to his determination and his snowmobile, patented in 1941, in the following years he managed to create a connection with the rest of the world and to start winter tourism.

The modernization of the communication aspect is certainly a central theme today, just as the road connection was seventy years ago. The parallelism may seem absurd, but if on the one hand the goal was to attract tourism by renewing the road system, ultimately the digital counterpart has the same purpose: to attract further customers to the shop. The process described here can therefore be seen as the first step towards the renewal of digital connectivity.

The focus of this project is related to the company website, although this is only a part of the entire communication picture, the ultimate goal of this renewal process.

Bernardo Cantoni in sella alla sua motoslitta

Bernardo Cantoni riding his snowmobile

Need to communicate

The motivational drive towards improving communication is driven by the need for an update of the communication means, which up until this point have been either meager or very limited.

Numerous studies have shown that in recent years, the majority of people, before making a decision to purchase goods or services, consult the web in search of reviews. Although these are the most commonly used and immediate evaluation tool, the same fate applies to websites and social media pages. Nowadays, there is no physical place that does not have its digital counterpart. And this is precisely the first showcase that consumers look at.

Following the trend of digital communication is mandatory, especially considering the available data that supports the idea that it is tremendously necessary. In this context, the website is certainly the first choice to focus on, if not the foundation on which to build the entire subsequent digital communication component.

There are various and diverse intervention methods aimed at this goal. In this regard, it is extremely important to try to convey the values from which the family business was born and on which it has grown. To achieve this goal, in conjunction with graphic, architectural, and content redesign, the best option has been to focus on corporate storytelling.

Storytelling allows for establishing a bond infused with emotions, meanings, memories, and values between the storyteller and the listener. Consequently, through this communicative mode, it will be easier to be understood, recognized, and remembered.

The translation of "storytelling" is "communicating through stories." Stories must be defined, elaborated, sought, and found. Storytelling is not just about telling stories. Stories and narratives are not in opposition to each other, but rather reflect two aspects of a broader reality, and this is where narration comes into play: it connects these two components. Narration then becomes the process of sense-making that links the events of our existence with the representations that we cannot help but make of existence itself.
- Andrea Fontana

The process aimed at redesigning the website through the storytelling component essentially follows two strands (one communicative and one design) destined to merge in their final phase. The first branch involves a search for useful communication information, the definition of an effective communicative identity that will be the basis for storytelling, and an analysis of the communication components present on the website to be re-evaluated or eliminated. The second flow involves a graphic analysis of the current website and research aimed at creating mood boards for graphic redesign. The last component, common to the two branches, is precisely the combination of the communicative and graphic parts.

Processo volto al redesign

Redesign process

Research and analysis

To deduce the Botìa Cantoni profile, interviews were initially conducted with those who have led the store's evolution over the last sixty years and who continue to contribute to its growth. Subsequently, thanks to the help of these same people, a thorough search for historical photographs was carried out. Finally, the last useful means for information research was the web.

The Values
After gathering information, the next step was to critically establish the motivations, goals, and values that the company should focus on to express itself to the public. The qualities towards which the company tends and refers are extremely rooted and consistent values, such as the centrality of the store in the city, continuous innovation, constant renewal, the family component at the base, being a point of reference for both tourists and citizens, and above all, the historical significance of the point of sale.

To go beyond and move from history to storytelling, the company's personality was first identified, referring to the 12 archetypes of Jungian psychology.
The main and representative archetype of the foundational values on which Botìa Cantoni relies is the Guardian Angel (or Caregiver). It represents the one who cares and strives for the well-being of others. It is compassionate and generous, and fears selfishness and ingratitude.
I 12 archetipi della psicologia junghiana

The 12 archetypes of Jungian psychology.

The audience
In reverse, given that the ultimate purpose of storytelling is to be read, it was imperative to also identify the audience to address. The golden rule followed to express oneself in the best way is to become the reader to whom one is telling the story, immersing oneself and empathizing with the audience, and then telling the story for him, her, or them.

To this end, the so-called buyer personas have been defined. Essential artifacts to understand and comprehend the audience to whom one is addressing. In-depth knowledge of these models is essential to match the values-based narrative with the people who will then grasp those values.

Current communication
The final step of the communication thread is focused on analyzing the current website. This investigation allowed for the study of all the components that make up the means of communication, in order to become aware of these factors, and finally deciding critically whether to re-evaluate, replace or eliminate them, in light of the final purpose and values aimed at corporate storytelling.

Design choices
Moving on to the design thread, the graphic analysis of the current website was a complete failure, as no element was deemed sufficiently suitable for re-evaluation or maintenance. Creating mood boards and analyzing websites and styles to draw inspiration from allowed for the conception of a solid and well-formed design idea.

Vecchio sito della Botìa Cantoni

Old homepage of Botìa Cantoni

Implementation proposal

At the intersection of the communicative and design components, various choices were made for the definition of an implementation proposal, which will be put into action and shown in the next phase of actual implementation.

Storytelling
Storytelling is the foundation of the communicative component. The stories extracted from the interviews lack significance, they have a historical value that, without narration and representation, cannot speak, excite or sell. It was necessary to extract from these stories perceptions, scenes, plots, and psycho-social and emotional references in order to create the representational component, which evokes emotions. The link between mere factual stories and representational narratives came through storytelling. Through this, a connection was created between data and meaning, event and perception, kronos and mythos.

Language
Regarding language, it was chosen to use a direct style, accessible to anyone, and especially simple and immediate, avoiding sophistication and exaggeration. A peculiar choice was to introduce dialectal words (with their translation). The dialectal component, in fact, is deeply rooted in the area. Using it on the website means trying to build an emotional connection with the reader, who will feel welcomed in an exclusive niche.

Emotional features
The emotional features that have been sought to emerge through the representative component are those arising from the intersection between the values deriving from the company archetype, the expectations of the buyer personas, and the virtues extrapolated from the interviews.

Photos
From the very beginning, it was chosen to use photographs as one of the most relevant components for the narrative objective. The reason for this is soon said: when a visitor explores a company website, it takes about 3 seconds to form a so-called "first impression," and images are the most immediate component. They capture attention, evoke emotions, help understand and increase trust in the company.

Narrative style and order
The narrative style used varies based on the time of the story and the topic of discussion.
The narrative order used where possible is that proposed by Andrea Fontana (storytelling expert), namely: subject → goal → action → result. Which in simpler terms becomes: individual → action → obstacle → achievement.

Design elements
The design elements are all new and can be viewed directly on the website.

Effectiveness of the project
One method to measure the progress of the communication project will be to constantly verify and set numerical targets to achieve within a predefined period through the communication component.

Redesign and implementation

Based on the implementation proposal, wireframes and mockups were created for the website. Each component was designed and created with the underlying idea of maintaining a coherent narrative with the values to be conveyed. The tone used, the photographic component, the call-to-action, the graphic elements, the slogan, the positioning of the elements, the language, and the information were assembled accurately to tend towards a comprehensive, coherent user experience.

Mockup di due nuove pagine

Mockup of two new pages

Mockup della versione mobile

Mockup of the mobile version

Based on the mockups, the last step was the actual implementation of the website, executed from scratch and subsequently published online. During the implementation, some adjustments and revisions to the mockups were made to better facilitate content consumption or streamline the pages and design elements.

The logo falls within this category, in fact, during the implementation phase, it was reviewed and redesigned, aiming for a minimal and eye-catching style. The union of the initial letters of the store and its founder, namely "B" and "C", combined with the central element of interest, the snowmobile, led to the creation of the new logo.

Logo vecchio e logo nuovo

Old logo (left) and new logo (right)

Conclusions and future developments

As stated in the introduction, the project discussed here is only the first step towards the final goal: the creation of a complete, stable, lasting, and constantly updated communication component. It is undoubtedly a solid cornerstone around which to build the entire subsequent communication sphere, but even this project itself should not be considered finished. This website certainly requires continuous adaptation and constant analysis to improve all its components.

The next challenges in this field are focused on social networks, the creation of loyalty programs, and the upcoming event to celebrate the 100th anniversary of the store's foundation.

Next case study

Gemmo

Copyright © 2022 Matteo Cusini. All Rights Reserved.