April 23, 2013

User-Based Storytelling for Interface Design

Picture this

You are managing a massive web development project. Sitting down with your client, you step through each of the requirements line-by-line. You ask your designer on the project to begin building the interface for the new website. At the end of the process, you begin merging the pretty design with the functional requirements for the website. What could go wrong?

Fast forward and you have now launched the new website. The phone starts to ring and the issues start rolling in. Support ticket queues are getting longer and longer with users asking where things are on the website like "well, how do I submit my application?" or "how do I find this information?" In a quick knee-jerk response, the website administrator adds a link in some random menu to alleviate the problem for that day. Then, since this link was not accounted for in the initial design, it breaks the aesthetic design resulting in ad hoc design changes. Before long, that once pretty design becomes chaotic with many short-term fixes. Users get so fed up they start just using Google to find content on the website rather than using the website's navigation.

The Problem

Planning and design. There wasn't sufficient time spent actually analyzing how users USE the website or what they NEED the website for. Often times requirements for a website are determined by an IT administrator speaking as a representative of the user base, rather than listening to the needs of the actual users. To make a sustainable interface design, the first questions to tackle are "who is my user" and "what goals are they trying to accomplish"?

Good design isn't just about making a website beautiful, it is understanding how users interact with a smarter design. First, understand the motivations of the users coming to your site. Then, create designs that meet the user requirements and the business requirements. Don't stop with just an initial wireframe either. The best interface designs for websites are ones that don't just look pretty, but incorporate a strong understanding of the user and how they can get to the information they need. By writing out the different stories visually, your designers will have a better idea of what to consider when creating the interface design as well as the priorities. 

Concerns and Solutions

Knee-jerk reactions where administrators place links arbitrarily on front pages may meet a short term requirement, but it shouldn't be the answer. Excellent designs should have a close-enough solution for most visual needs, even if they are meant to be temporary. For example, emergency notifications are necessary on news websites to show breaking stories. Notifications like these can be included in a design. That way, when an administrator is asked to add something to a front page, it can be categorized into something like a "notification" and displayed appropriately.

As hard has you try to design for every scenario, you can't plan for everything. A website is a project that needs continuous maintenance and enhancement. Plan for constant improvement. Plan a process that allows you to assess the requirement, design a solution, and deploy it to the website. By having user stories already created, these can be analyzed and adjusted when new features are requested, rather than reinventing process.

Storytelling / User-Based Interface Design Advantages:

  • Allows easy access to the important functions for users, reducing user error.
  • Provides documented methods to validate whether an interface design is a functional or dysfunctional design
  • Provides the outline for user documentation focused on their end-goal
  • Provides a clear understanding for developers to test that their functionality and implementation works as intended for the users
  • Provides designers with a concise set of items to design
  • Provides a clear basis to prototype user interaction


Storytelling in your design is the best way to anticipate problems that you may encounter in your design and development process. It allows designers to create smarter designs for the users. It provides a human way for stakeholders and developers to understand the requirements in a simple and understandable way.

Posted at 01:57 pm by Ben Vanderberg

Drupal Association Organization Member

Case study

TimeOut Integrates DPCI’s K4-to-Drupal Solution

DPCI helps TimeOut New York leverage its investment in the K4 Publishing System by integrating DPCI's K4-to-Drupal module to create a true multi-channel publishing workflow. > more

All case studies

Press Release

Award Program Showcases Outstanding Examples of Digital Experience Delivery; Winners to be Unveiled at Acquia Engage 2017 more
Alltop, all the top stories