Design Story: A New Approach to UX/UI Design (free template)

Angelo Gabriel
Bootcamp
Published in
7 min readFeb 21, 2024

--

You’ve probably bumped into three common things in the world of UX/UI Design:

  • Storyboard
  • Persona
  • User Story

Now, these aren’t just fancy design terms; they’re like our trusty guides helping us really get what our users need, forming the foundation of our design choices.

Let’s pause and think about something different for a sec.

What if we added a bit of storytelling to the mix? What if we came up with something totally new?

Well, that’s where the idea for Design Story popped up and I decided to create a new method.

Objective

The primary objective of the Design Story method is to enhance user-centered design practices by leveraging narrative elements such as storytelling, personas, user stories, and storyboards.

This methodology aims to improve team understanding, promote empathy, and facilitate effective communication throughout the design process, ultimately resulting in more innovative and user-focused digital experiences.

Benefits of Design Story

Picture Design Story as a tiny book or quick movie. When you share it with the team, everyone gets the same story.

Sure, like any tale, people might see it a bit differently. But the best part, I think, is that it helps everyone get those “aha” moments.

  • Enhancing User Understanding: Design Story can be harnessed to deepen the team’s understanding of users’ needs, behaviors, and goals. This can lead to designs that are more in tune with user expectations.
  • Fostering Empathy: The aim may be to forge an emotional connection between the team and users, promoting empathy and sensitivity towards the experiences and challenges faced by users.
  • Facilitating Team Communication: Design Story can serve as a tool to streamline communication within the team, ensuring everyone shares a common understanding of personas, stories, and user objectives.
  • Boosting Creativity and Innovation: A goal could be to stimulate creativity and innovation within the team, encouraging the generation of innovative solutions to user problems.
  • Enhancing Stakeholder Engagement: Making user stories more accessible and engaging for stakeholders who may not be deeply involved in the design process can be desirable for increased stakeholder engagement.
  • Optimizing Decision-Making: Increasing clarity in decision-making throughout the design process can be an objective. This can be achieved through narratives that present the trade-offs and implications of different design choices.
  • Facilitating New Team Member Integration: Turning Design Story into an effective integration tool for new team members allows them to quickly grasp users, objectives, and project context.

Step-by-Step Guide to Creating a Design Story

I’m here for the community, and I’ve made a guide just for you, fellow designer.

The idea is for you to follow these steps and craft your own stories for whatever projects you’re into — be it an app, a web page, or any other solution.

This guide keeps it simple and clear, giving you straightforward instructions on how to make your story.

1. Introduction

  • Start by introducing the main character or user of your design story. Describe their background, age, profession, and any relevant details that set the stage for the narrative.

2. Context Setting

  • Provide a brief overview of the environment in which the character operates. This could include their physical surroundings, daily activities, and any challenges they face.

3. Persona Development

  • Dive deeper into the persona’s characteristics, needs, motivations, and pain points. Craft a relatable and memorable persona that the team can empathize with.

4. User Storytelling

  • Craft user stories that encapsulate specific goals, actions, and outcomes. Frame these stories as scenarios, making them relatable and relevant to the user’s journey.

5. Storyboarding

  • Visualize the user stories through storyboards. Use sketches or visuals to illustrate key touchpoints in the user’s journey. These could be moments of interaction with the product or service.

6. Challenge Introduction

  • Introduce a challenge or obstacle that the character faces. This could be a common pain point in their journey that your design aims to address. Clearly articulate the problem to be solved.

7. Solution Introduction

  • Present design solutions or features that address the identified challenge. Showcase how these solutions align with user needs and goals. This is the turning point in the narrative.

8. User Journey Progression

  • Progress through the user journey, showcasing how the character interacts with the designed solution. Highlight key moments of interaction and illustrate the positive impact of the design.

9. Iterations and Adaptations

  • Illustrate how the design evolves based on user feedback and testing. Emphasize the iterative nature of the design process, showcasing refinements made to enhance the user experience.

10. Climax/Resolution

  • Conclude the Design Story with a climactic moment — a positive resolution that reflects the character’s success or achievement. Showcase the transformative impact of the design solution.

11. Conclusion

  • Summarize the key takeaways from the Design Story. Reinforce the user-centered design principles and the team’s commitment to creating meaningful and impactful user experiences.

Tips:

  • Keep it narrative: Craft the Design Story as a continuous narrative, similar to a short story or a movie script.
  • Focus on emotions: Highlight the emotional journey of the user to make the story more engaging and relatable.
  • Use visuals: Incorporate visuals, such as sketches or storyboards, to enhance the storytelling experience.
  • Iterate and refine: Don’t hesitate to iterate on your Design Story. Refine it based on team feedback and insights gathered throughout the design process.

Example of a Design Story: HomeChef App

Personally, I find examples really helpful for learning new concepts. So, let’s jump into one.

Meet HomeChef App, an app aimed at simplifying home cooking using ingredients already stocked in people’s kitchens. Take a look!

In New York city, where time is a precious commodity, lives Mia, a 30-year-old professional with a passion for healthy living. In her cozy apartment, nestled among the city lights, Mia juggles a demanding job, daily workouts, and a commitment to preparing wholesome meals.

Despite her determination, Mia often finds herself standing in front of an open refrigerator, contemplating the mismatched ingredients within. This culinary challenge becomes the catalyst for an innovative journey.

Meanwhile, across the digital landscape, resides a team of developers and designers eager to transform the way individuals approach home-cooked meals. The idea for the “HomeChef” app is born — an app that not only suggests recipes but crafts culinary adventures based on the ingredients available at home.

Mia explores the app for the first time, and the introductory screen welcomes her with a personalized touch. The app learns about her dietary preferences, cooking skill level, and favorite ingredients. This is Mia’s culinary sanctuary, designed to harmonize with her unique tastes and lifestyle.

Young woman looking at her phone.

As Mia interacts with the app on her smartphone, she embarks on a user journey, creating delicious and healthy dinners using the ingredients in her fridge. Visuals showcase Mia selecting ingredients, receiving step-by-step guidance, and, in a moment of culinary triumph, presenting a beautifully plated meal.

Her challenges — limited time, diverse ingredient availability, and the need for variety — are addressed by the HomeChef app. It introduces personalized recipe recommendations, cooking time estimations, and creative ingredient substitutions.

Young woman looking at her phone and cooking.

Mia discovers recipes tailored to her preferences, gains insights into the nutritional value of each meal, and receives cooking tips from renowned chefs.

In conclusion, Culinary Harmony isn’t just about an app recommending recipes; it’s a narrative of Mia’s culinary journey — seamless, personalized, and health-conscious. The HomeChef app becomes a trusted ally, transforming every meal into a delightful exploration of flavors and well-being.

Conclusion

In the world of UX/UI Design, Design Story is like the friendly guide that shows you a new way.

It’s not just about making things look good; it’s about telling stories that people can connect with.

As we’ve explored this method, we’ve found it’s more than just a tool — it’s a way to make sure everyone on the team understands users and their needs.

Design Story helps us talk to each other better and be more creative. It’s like the storyteller in our design process, making sure our projects are not just pretty but also meaningful.

So, for fellow designers out there, give Design Story a try. Let it be your helper in making your projects not just cool designs but stories that people enjoy and find useful.

Free template

Since Medium doesn't allow to share PDF files, I invite you to connect with me on LinkedIn. You can send me a DM and you'll be glad to share the free PDF template with you.

Or, if you prefer, here is the image file.

Image of template of the Design Story method by Ângelo Gabriel

Also, feel free to leave your thoughts in the comment section below. I’d be more than happy to hear your opinion!

--

--

My purpose is to create simple and intuitive experiences to solve problems efficiently.