torie di Lago
Change the way of visiting a museum
The Project
Duration:
Role:
4 month
Prototyping on Figma, Storytelling development, Follow up with clients, Illustrations on Illustrator, Video composition with Premiere Pro.
Storie di lago is a web app designed to revolutionize the way museums are visited, connecting three cultural institutions overlooking Lake Como: Il Museo della Seta, il Museo della Barca Lariana e il Museo della Madonna del Ghisallo. The main goal is to actively engage users, making the visit more interactive through the use of puzzles and riddles.
Key Area:
Storytelling
Graphic Design
High Fidelity Prototype
This project is divided into three main components: Storytelling, Graphic Design, and prototyping using Figma. Initially, it involves three distinct museums: the Silk Museum, the Ghisallo Museum, and the Lake Como Boat Museum. For each of them, a protagonist has been carefully selected to narrate a captivating story and guide users throughout their visit to the respective museum. The narratives are designed to immerse visitors in the museum experience, emotionally engaging them through unique stories associated with each museum. Serving as the main storyteller is Andrea, who encourages users to explore the connected museums, establishing connections between the various stories and providing an integrated and engaging experience for visitors.
Storytelling
As the guiding thread of the app
Storytelling acts as a connector, essential for developing the role of gamification and providing a structure for the application. The success of gamification relies heavily on the quality and allure of storytelling. Consequently, it was imperative to meticulously structure each narrative path presented by the respective protagonists. The engaging and high-quality storytelling not only serves to capture the audience's attention but also acts as a backbone, shaping the user's journey through the museums. Through the careful creation of narratives told by characters such as Greta, Ale, and Simone, the interactive components are not only entertaining but also intricately woven into the stories. This intentional fusion of storytelling and gamification aims to elevate the application overall, transforming it into an engaging and educational experience for visitors exploring il Museo della Seta, il Museo della Barca Lariana e il Museo della Madonna del Ghisallo.
The Characters
Andrea
-
Main narrator of the web app.
-
Guides the user through the three museums, serving as a common thread.
-
Explains to the user how to use the web app.
At the core of "Storie di Lago" emerges Andrea. As the main guide of the web app, he is the thread that weaves the tales of three extraordinary museums overlooking Lake Como. Andrea arrives with a collection of objects that evoke the three museums the user will visit, showcasing his deep passion for the stories of Lake Como. Through Andrea's voice, users will be led on a captivating journey, unveiling the fascinating stories of the museums and illustrating the intuitive functioning of the web app. Andrea presents himself as the ideal companion to discover the cultural riches surrounding the enchanting Lake Como.
When the users go to il Museo Della Seta, they encounter Greta
Greta
-
Mission: Save bugs affected by Pedrina.
-
Goal: Find all parts of an ancient manuscript.
Greta, a curious girl, serves as the guide leading visitors through il Museo della Seta. She notices unusual behavior in silkworms and, together with the visitor, investigates to discover they are affected by Pedrina. Using fragments from her grandfather's manuscript, the duo solves the mystery, saving the silkworms and providing a happy ending to the story. The narrative focuses on the history of silk and its production, engaging the visitor in the discovery process.
Engagment process through:
-
Gamification Mechanics: Using gaming elements, visitors are actively involved in solving the silkworm mystery, providing an interactive and educational experience.
-
Archival Material References: References to expandable videos and informative snippets are provided to delve deeper into the themes of the Museo della Seta. Visitors can customize their experience, skipping less interesting topics and contributing valuable statistical data for analyzing the Customer Journey.
When the users go to il Museo Della Barca Lariana, they encounter Simone
Simone
-
Mission: Build the perfect boat by taking pieces from historical boats.
-
Goal: Guide the user in the search for historical components.
Simone, a master shipbuilder from Lake Como, is the main character in the story of The Museo della Barca Lariana. The narrative revolves around Simone's dream of creating the perfect boat. With the visitor's help, Simone retraces the history of famous Lake Como boats, but ultimately realizes there can't be a perfect boat for all uses.
Engagment process through:
-
Gamification Mechanics: Visitors are involved in Simone's story through interactive activities, such as creating the "perfect boat." This gaming element adds a level of engagement and participation at the Museo della Barca Lariana.
-
Archival Material References: Once again, references to videos and informational materials are provided to delve into the history of Lake Como boats, allowing visitors to personalize their experience and contributing to the collection of statistical data.
And finally at the Museo Della Madonna del Ghisallo, the users encounter Ale
-
Mission: Reassemble his old racing bike.
-
Goal: Help the user find all the missing parts.
Ale
.png)
Ale, a retired cyclist mechanic, is the guiding character taking visitors through the Museo Della Madonna del Ghisallo. The story begins when Ale decides to rebuild his youthful bike, challenging the visitor to help find scattered pieces in the museum, stimulating Ale's memory. The journey focuses on the history of cycling and great champions.
Engagment process through:
-
Gamification Mechanics: The gaming element actively involves visitors in the challenge of rebuilding Ale's bicycle, creating an interactive and engaging experience at theMuseo Della Madonna del Ghisallo.
-
Archival Material References: Similar to the Museo della Seta and the Museo della Barca Lariana, references to videos and informational material are provided to delve into cycling themes, offering visitors the opportunity to customize their experience.
Each protagonist, in fulfilling their mission, commits to collecting ten items attainable exclusively through specific activities integrated into the gamification process. The stories of the various protagonists intertwine to enhance engagement. The uniqueness of this experience lies in the connection between the museums: some items from one museum prove essential for others, creating a dynamic of interdependence. This not only adds an intriguing challenge but also provides advantages to the user. The opportunity to earn bonuses and not be obligated to follow a linear path amplifies the experience, allowing users to customize their journey through the museums and leverage strategic connections to optimize their exploration.
Graphic Design
Visually convey the History of Lake Como
The webapp aspires to narrate the history of Lake Como through its visual design. In fact, the chosen colors are inspired by the hues found around Lake Como, seeking to capture the essence of this picturesque region. The visual aesthetics aim to immerse users in the serene and captivating atmosphere of Lake Como, fostering a connection between the design elements and the rich history woven into the fabric of this beautiful locale. Through carefully selected colors and visual elements, the web app endeavors to evoke the beauty and charm that define the visual experience of Lake Como.
The Color Palette
The Water
The Mountain
The City
The color palette will play a crucial role in providing visual consistency to the web app, contributing to defining its distinctive visual identity. These colors will not only be used to shape the overall look of the app but will also be employed for illustrations and to recreate the various environments encountered during exploration. The careful selection of colors aims to create a harmonious visual connection between the different elements of the app, ensuring a cohesive and engaging experience. Each shade will be chosen thoughtfully to reflect the unique atmosphere of Lake Como, thus effectively conveying the history and beauty of this enchanting place through the visual interface of the web app.
The Logo
The logo is crafted with graphic coherence, aiming to stylistically represent Lake Como. A stylized silk thread, shaped like an S (for Storie), winds its way through the logo, symbolizing the connection between the stories of the museums and the geographical context of Lake Como. This visual element seeks to evoke the idea of continuity and intertwining, reflecting both the natural beauty of the lake and the richness of the cultural narratives offered by the museums. The choice to visually represent the lake and its connection with the silk thread underscores the cohesion between the logo's elements and the essence of the story told through the web app.
The Font
Style
Fonts
Size
Headings
Coustard
Buttons
Poppins
Body text
Poppins
from 20 px to 44 px
18 px
18 px
The Items
The items that each protagonist must collect are illustrated while adhering to the color palette and maintaining a slightly comic book-style, aligning with the illustrations of the protagonists. This aesthetic choice not only provides visual coherence to the experience but also emphasizes the narrative aspect of the storytelling. The comic book approach not only makes the items visually appealing but also creates a visual connection with the stories of the main characters, reinforcing the idea that each collected element is an integral part of a broader narrative. This visual cohesion effectively conveys the central concept of storytelling through the collection of items, creating an engaging and visually satisfying experience for users.
Some of the items that Greta should collect for achieving her mission:
Some of the items that Simone should collect for achieving his mission:
.png)
Some of the items that Ale should collect for achieving his mission:
.png)
The Room "My Collection"
The items collected by users can be stored and freely accessed in the "My Collection" room. This space is unique for each museum, offering a personalized experience. The ability to customize the room allows users to organize their collected items meaningfully, reflecting their preferences and interests. Each "My Collection" adapts to the specific theme and atmosphere of the museum, creating a visual and interactive environment that aligns with the story and essence of each place. This approach allows users to engage more deeply with their exploration experience, providing a personalized perspective and a more intimate connection with the stories and items collected during the museum journey.
High Fidelity Prototype
From Wireframing to Hi-Fi
Once the graphic style and narrative have been defined, the process moves on to the high-fidelity design of the prototype. To ensure user-friendly experience, it becomes crucial that the prototype's structure is intuitive and minimizes the need for recall. The design focuses on ergonomics and ease of use, ensuring that users can navigate through the app effortlessly and with minimal cognitive effort. The goal is to create a prototype that not only reflects the agreed-upon style and narrative but also stands out for its usability, providing users with a smooth and intuitive interaction with the application.
Initial Wireframing
Initial wireframing serves to understand how the studied topics in Information Architecture and Sitemap are visually organized. It provides a preliminary visual representation of the layout and structure of the content, helping to define the placement and hierarchy of different elements. This early stage of design allows stakeholders to grasp the spatial relationships between various components, ensuring that the final interface aligns with the intended organization and user experience. By translating the information architecture and site map into a visual blueprint, the initial wireframing phase acts as a foundational step in shaping the overall visual structure of a digital project.
Some Screens of the Hi-Fi
Responsive Design
"Storie di Lago" is a web app designed to cater to diverse devices, ensuring a seamless experience both on desktop and in its mobile version. Recognizing the varied ways users access content, the app has been thoughtfully crafted to optimize usability and visual appeal across different screen sizes. Whether accessed from a desktop computer or a mobile device, users can expect a consistent and user-friendly interface that adapts to their preferred platform. This dual consideration for desktop and mobile versions enhances accessibility, making "Storie di Lago" accessible to a broad audience regardless of the device they choose for exploration.
The Final Product 🎉
Webapp's video
In conclusion, "Storie di Lago" emerges as an innovative and engaging web app, designed to compellingly narrate the rich history of Lake Como. With a coherent graphic style, captivating storytelling, and thoughtful design, the app provides a seamless and immersive experience both on desktop and mobile devices. The connection between the protagonists, gamification elements, and the ability to personalize the experience through the collection of items contribute to creating a unique and stimulating journey for virtual visitors. The combination of visual, narrative, and interactive elements aims to transport users on a virtual exploration of the beauty and culture of Lake Como, offering a multimedia experience that goes beyond a simple museum tour. "Storie di Lago" thus stands as an engaging means to discover and appreciate the cultural and natural treasures of this captivating region.
What I learned
In this captivating project, I underwent significant personal growth. I delved into the realm of copywriting, tackling the challenge of transforming ideas into engaging words. I then explored the art of video editing using Premiere Pro, bringing forth compelling visual narratives. In the field of illustrations, I honed my ability to convey complex concepts through visual aesthetics. Lastly, I dedicated myself to prototyping a high-fidelity model on Figma, paving the way for the creation of an extraordinary user experience. This project has been an exciting and educational journey that has substantially enriched my skill set.
Thanks ELV & Marco La Fratta for giving me this amazing opportunity !!!!
