top of page
Sanika Dhuri
UI/UX Design | Visual Design
Introduction: What is Storyboarding?
A storyboard is a series of images that represents a story surrounding a main actor and their actions. Frame by frame, the storyboard displays the actor’s journey while completing a task. The important purpose of storyboarding is to simplify unclear environments and create a rough visualisation of a complicated system [1]. A storyboard portrays a narrative to show how an application feature works [2]. It ultimately acts like a low-fidelity version of the application, which helps the designer understand and study the usability of the interface or the product [2].
Curtis and Vertelney have created a basic guideline for storyboarding that consists of graphical and verbal descriptions. According to them, in storyboards, the graphics are placed above the verbal description [3]. As indicated by Cooper and Reimann, storyboards should be based on personas, as they represent certain users with specific motivations. They can help visualise a scenario for using the product to complete specific tasks or goals [4]. This method is beneficial for participatory design, which involves all parties, like designers, stakeholders, developers, and so on, in the design process [6].
Â
Benefits of storyboarding
Haesen et al. have already established that creating storyboards in the early stages of design does spark conversations between stakeholders and designers. This leads to obtaining a mutual understanding of the product design [5]. Just as the saying goes, ‘A picture is worth a thousand words’ the storyboard can help communicate the initial ideas faster. It helps in identifying pain points for the user and resolving them before actually working on the project. Since the iterations are simple to work on, more collaborations and discussions are encouraged with less effort and time [6]. Moreover, while creating a storyboard, the designer conceptualises the scenario from the user's point of view, which forces the designer to think about the user flow. This helps to better understand interactions and think of ways to improve them [6]. Finally, it also takes off the designer’s bias and helps them empathise with the users [7].
Â
Drawbacks of storyboarding
Even though storyboarding helps in focusing on the specific motivation of a persona, the major drawback is that it cannot include every possible scenario. Essential information or factors can be neglected and excluded from the full picture [9]. Storyboarding requires basic drawing skills, and most UX designers lack the skills to produce professional-looking storyboards [8]. Another drawback lies in how storyboards are perceived by international users from different cultural groups [10]. While researching and designing storyboards for such cross-cultural markets, the diversity makes it difficult for the designer to trust their intuitions regarding interactions [10]. The designer's personal experiences also create a bias and are unreliable because of the local differences [10]. Storyboards are created with a certain context in mind, which creates a limitation on portraying possibilities beyond that context.
Â
How storyboarding contributed to our design solution
After creating the user personas, the next step was to ideate scenarios and create storyboards. Each persona was created with specific user target groups in mind, like a parent, student, working professional, and elderly person. The next step was to imagine a typical day, experiencing their challenges. and discovering how our product can help. The scenario highlighted the user's motivation to buy our product, while the storyboard visualised the user's journey from the problem to the solution. We were able to create unique user flows for the app because of the different personas and their context. While working on the storyboards, we came across gaps in the user flow, and we were able to fix them instantly on paper. Moreover, storyboarding helped us identify unnecessary click interactions, making our app more efficient. This method also helped us brainstorm uncommon problems and usages of our product, which could be presented as features. We were able to empathise with our users as we were creating the storyboards; visualising the day in their shoes encouraged us to think about better solutions that our product could provide. Through the process of storyboarding, we were able to finalise some factors and features that we wanted to include in our final product. Once this method was completed to our satisfaction, we were able to move on to the next step, which was low-fidelity wireframes.
Â
References
Rasheed, Y., Azam, F., Anwar, M. W., & Tufail, H. (2019, July 1). A model-driven approach for creating storyboards of web based User Interfaces: Proceedings of the 7th International Conference on Computer and Communications Management. ACM Other conferences. https://dl.acm.org/doi/10.1145/3348445.3348465
Truong, K. N., Hayes, G. R., & Abowd, G. D. (2006, June 1). Storyboarding: Proceedings of the 6th conference on designing interactive systems. ACM Conferences. https://dl.acm.org/doi/10.1145/1142405.1142410
Kantola, N., & Jokela, T. (2007, November 1). SVSB: Simple and visual storyboards: Proceedings of the 19th australasian conference on computer-human interaction: Entertaining user interfaces. ACM Other conferences. https://dl.acm.org/doi/10.1145/1324892.1324901
Cooper, A., Reimann, R., & Dubberly, H. (2003). About face 2.0: The Essentials of Interaction Design. Wiley.
Haesen, M., Meskens, J., Luyten, K., & Coninx, K. (2010, September 1). Draw me a storyboard: Incorporating principles & techniques of comics... ScienceOpen. https://www.scienceopen.com/hosted-document?doi=10.14236%2Fewic%2FHCI2010.18
Babich, N. (2017, October 25). The Role Of Storyboarding In UX Design. https://www.smashingmagazine.com/2017/10/storyboarding-ux-design/
Krause, R. (2018, July 15). Storyboards help visualize UX ideas. Nielsen Norman Group. https://www.nngroup.com/articles/storyboards-visualize-ideas/
Peng, Q., & Martens, J.-B. (2018, July 1). Requirements gathering for tools in support of storyboarding in user experience design. ScienceOpen. https://www.scienceopen.com/hosted-document?doi=10.14236%2Fewic%2FHCI2018.2
Border Crossing UX Team (2016, February 10). UX design techniques: Introduction to storyboarding. https://bordercrossingux.com/ux-techniques-introduction-to-storyboarding/
Walsh, T., Petrie, H., & Zhang, A. (2015, November 30). Localization of storyboards for cross-cultural user studies. ACM Digital Library. https://dl.acm.org/doi/10.1145/2836041.2836061
bottom of page