Storytelling For The Web: Integrate Storytelling in your Design Process
127 likes739,036 views
The document outlines a livestream presentation by Chiara Aliotta on integrating storytelling into web design to enhance user experiences. It covers the storytelling process for designers, emphasizing aspects such as understanding the audience, structuring narratives, and creating emotional connections. The presentation also includes case studies and practical examples to demonstrate effective storytelling in UX/UI design.
Storytelling For The Web: Integrate Storytelling in your Design Process
- 1. Storytelling for the Web Webflow Livestream June 5, 2024 Integrate storytelling to create memorable experiences Chiara Aliotta Brand Designer and Strategic Storyteller
- 2. Who in the world am I? Ah, that's the great puzzle. Alice in Wonderland, Lewis Carroll
- 8. Th e Storytelling Process for Designers How designers can integrate storytelling in their design process. Storytelling is a Process BRIEF the client DESIGN the user DELIVER the user + the client
- 9. The Foundation First encounter with the client. Gather all the essential information to create a comprehensive brief. Storytelling is a Process Craft the story’s foundation. Write down the project’s objectives, scope, and requirements. It’s like the plot outline that sets the stage for everything that follows. BRIEF BRIEF
- 10. 05 THE CONTEXT The rhythm of the story. 06 THE EMOTIONS + TONE OF VOICE The emotional connection with the audience. Th e Fundamentals of Storytelling THE PURPOSE + RESOLUTIONS 02 The main reason behind your story and your protagonist’s transformation. THE AUDIENCE The main protagonist of your story. 01 03 THE CHARACTERS The components that the user engages with. 04 THE INTERACTIONS The interfaces that propel the action. Storytelling is a Process
- 11. Tell me about your project! Who is your brand/project for? Audience: Users Where do you use it? The Context: Platforms / Medium What is your project about? The Characters: Product / Brand / Service Why are you designing it? The Purpose + Resolutions: Mission / Vision How do users interact with it? The Interactions: Functionalities / Features How should the user feel? The Emotions Tone of Voice: Emotional connection + Storytelling is a Process
- 12. AVAC Redesign of the organisation’s digital presence
- 13. AVAC Redesign of the organisation’s digital presence Presentation Article Factsheet PX Wire Video Newsletter Brochure Blog Post
- 14. AVAC Redesign of the organisation’s digital presence
- 15. Building the Narrative Start with the user. Focus on the audience, understanding their needs, goals, and pain points. Storytelling is a Process Map out the user journey as a story. Storytelling helps us visualize the users’ journey and how they will interact with our product. DESIGN
- 16. Th e Structure of a Story Based on Donald Miller's StoryBrand structure. Users What is their quest? Who is their guide? What plan did they have? How would they put their plan into action? What did they achieve? PROTAGONIST PROBLEM GUIDE PLAN ACTION SUCCESS (or failure) Storytelling is a Process THE PLOT
- 17. Th e Narrative Structure THE PLOT SETUP CONFRONTATION RESOLUTION Based on Aristotle’s three-act structure INCITING INCIDENT PLOT POINT 1 MIDPOINT PLOT POINT 2 CLIMAX Storytelling is a Process
- 18. Th e Narrative Structure for Digital Products THE PLOT SETUP CONFRONTATION RESOLUTION Smart Interface Design Patterns Storytelling is a Process Designers Problem Vitaly Plan Actions Success / Failure Inciting Incident Plot Point 1 Midpoint Plot Point 2 Climax
- 19. Landing Page for Smart Interface Design Patterns https://smart-interface-design-patterns.com/ OPENING SCENE MIDDLE SCENE End of opening scene Beginning of middle scene Storytelling is a Process
- 20. Landing Page for Smart Interface Design Patterns https://smart-interface-design-patterns.com/ MIDDLE SCENE Storytelling is a Process
- 21. Landing Page for Smart Interface Design Patterns https://smart-interface-design-patterns.com/ MIDDLE SCENE End of middle scene Storytelling is a Process
- 22. Landing Page for Smart Interface Design Patterns https://smart-interface-design-patterns.com/ CLOSING SCENE End of closing scene Beginning of closing scene End of middle scene Storytelling is a Process
- 23. Present ideas, persuasively. Storytelling allows us to frame our concepts in a way that resonates emotionally, making our proposals more compelling. Storytelling is a Process Connect with the end users. Creating an emotional connection is what transforms a good design into a memorable experience. Create a lasting impression DELIVER
- 24. MAKE THEM WANT TO DO SOMETHING Th e Transformative Journey Understanding the character arc CHANGE HOW THEY FEEL ABOUT SOMETHING Exploring di ff erent aspects of the story such as characters, challenges, interactions and emotions. CHANGE HOW THEY SEE SOMETHING THE PROBLEM Challenges & Desires RESOLUTION Solutions & Achievement Storytelling is a Process
- 25. Consider your audience Understanding their goals and needs DELIVER CLIENT USERS
- 26. The purpose The why of the story… Sell or validate a product or service against others in the market. To sell Offer compelling and appealing solutions, ideas, products, and services that can make a positive impact on one's life. To motivate Present intangible concepts like values and thinking processes through stories. To persuade Storytelling is a Process
- 27. A Journey of Transformation Four steps to persuade, “engage” and change “minds” according to Lisa Cron (Story or Die) MISBELIEF TRUTH REALISATION TRANSFORMATION Inciting Incident Resolution Climax Problem Storytelling is a Process
- 28. To persuade the organisation to rebrand Action Aid Hellas (2021) MISBELIEF TRUTH REALISATION TRANSFORMATION Your organisation's communication style is not distinctive from that of others. Our organisation requires a revised communication and branding strategy. We should focus on ways to distinguish ourselves from others. Our approach is unique and distinct from the rest. Read the case study: https://tinyurl.com/3fk5mc4n Storytelling is a Process
- 29. To motivate investors to fund the product After App (2021) MISBELIEF TRUTH REALISATION TRANSFORMATION What happens if, after departure, the letter doesn't get executed or the instructions are unclear? Our solution comprehensively covers digital and real-world assets for complete estate management and legacy planning. We should fi nd a way to safeguard our assets. All my valued possessions are properly managed and protected. Read the case study: https://tinyurl.com/4ust8r97 Storytelling is a Process
- 30. Consider your audience Understanding their goals and needs DELIVER CLIENT USERS Storytelling is a Process
- 31. Forced Connection Transform the ordinary into extraordinary THE PROBLEM SERVICE/PRODUCT ATTRIBUTES UNRELATED ATTRIBUTES Storytelling is a Process
- 32. Forced Connection Smart Interface Design Patterns users' needs learning fast, getting the best lessons in UX/UI, and hungry for knowledge. videos set a friendly and informal kitchen Vitaly’s role experienced teacher, UX expert, guide tools real-time examples, blackboard, notes, video courses, and slides Hungry users Kitchen Chef Recipes Storytelling is a Process
- 33. Forced Connection Smart Interface Design Patterns
- 34. Forced Connection Smart Interface Design Patterns
- 35. Forced Connection Smart Interface Design Patterns
- 36. Forced Connection Smart Interface Design Patterns
- 37. “One of the deep secrets of life is that all that is really worth the doing is what we do for others.” Alice in Wonderland, Lewis Carroll
- 38. Th e Narrative Web Storytelling applied to UX/UI design Available on Domestika.org Th e Sunday Tales Subscribe to my my biweekly newsletter, to receive it in your inbox every two Sundays! https://www.domestika.org/en/courses/4898/chiara_10 https://www.untilsunday.it Online Course For Beginner UX Designers and Storytellers Th e Sunday Tales Newsletter Tips and Stories for Strategic Storytellers Storytelling is a Process
- 39. To be continued… There is so much more I'd love to share with you about storytelling! Please follow me for the latest insights, on: Instagram: @UntilSundayAgency LinkedIn: Chiara Aliotta Medium: chiara-aliotta.medium.com www.untilsunday.it