Visual storytelling is coming up more and more in my work as a UX/Product Designer. Typically this takes the form of prototyping, whether it be an interactive wireframe or super sleek micro interaction. While this will often get you a bunch of high-fives or great work emoji in Dribbble it can often leave your end user flustered and unsure of what is happening. This is where storytelling needs to augment the following in order for your product to be effective.
Over recent years storytelling has become the structure I use not only to present my work but to construct persona user flows and the very foundations of my designs. Just to caveat, I'm not a novelist, writer or any other form of literary person. Yes that's right, I could be completely off the mark here but this is how I see stories being constructive.
To me, my stories are lineal with a start, a hero, a problem the hero has to solve and an ending.
I know this might be viewed as a massive oversimplification that any writer out there would be yelling about by now, but just think of crafting your design from the start with your Hero (persona), the problem (engaging with your app or site) and the ending (completing the task your hero first opened the app or site for). In short, craft a story that helps everyone engage with and understand their user journey.
Visual language
Visual language taps into the foundation of human-centric design.
Humans created visual language before the alphabet we use today. And this is still buried deep within our psyche. Just think of the last time you had an emotional connection to an image, that's right, pictures are truly worth a 1000 words. As a product designer it is your role to create a visual language depicting the path you wish your users to take.
Photo by JORGE LOPEZ
Storytelling
Most designs start with a random set of requirements whether they be from analytics, a user request or a new piece of functionality.
These items can often be chaotic and counterintuitive, but there is always method in the madness.
Data on it’s own means nothing. An overview of data presents high-level information that is helpful but rarely actionable. In other words this will give you the outline of your plot but it will not allow you to tell the whole story.
I used this diagram to provide the structure and context for my story, as it allows you to take a larger or holistic view of the problem, rather than my own intimate view that often contains biases and frustrations.
Once you start focusing in, the random nature of the requests can often create whole new meaning. Allowing you to perceive a piece of functionality or interaction pattern in a whole new way. The closer you look, the more texture and detail you see.
The Story of your design
Putting all these elements together can take time, but if you cannot communicate your design effectively the time is wasted. This is why telling your story not just visually but also in context allows others to share in your vision.
Ok, here is the story from a product that I'm currently working on.
The product allows users to take their Blood Pressure (BP) and provide the BP data to their doctor from home.
To tell my story I start with the persona.
Lynne is 79 years old and has hypertension (high blood pressure). Due to the nature of her hypertension she is required to go to her doctor on a weekly basis to take BP readings. Lynne does have the Internet at home that her son setup for her and she uses her iPhone on a daily basis for facetiming her grandchildren, messaging friends and family members and of course talking on the phone. The Apple store has set up the iPhone to use accessibility mode for messaging and phone calls because her hands and eyesight just don't work that well anymore. Because of this. it is very hard for her to consistently use interactive elements in most apps (they are to small) despite this she has tried several applications but just can't get them to work consistently.
Our Facts
- Requires regular measurements to be taken
- Requires the Doctor to be able to view BP data
- The user is happy to use technology
- Help is needed to set up devices
- Owns a smart phone and is happy to use its features
- Requires applications to be very simple to use
- Requires applications to have very large touch targets
Obviously, all of this is a fictionalised version but you can see that functionality is already starting to come to the forefront.
Set of goals
- Device communicates measurement to the user through real-time on-screen display
- A visual indication is provided to the user around connection status between the device in the smartphone
- Data can automatically be provided to a third party without the need to use a interaction beyond initial setup
- Clear step-by-step on-boarding process (diagrams, text, animations and video)
- On screen interactive elements must be extremely large
- Minimise the number of interactions needed to take and send BP data
Turning Stories Into Reality
Use all these items as talking points and always refer them to your persona for example in the below design through user testing we noticed that there was a lag between when the app was first opened and the Bluetooth connection was established even though this connection time was only 400ms.
Connection sequence
We created a loading screen that illustrated this connection, but also made the connection animation far longer than the actual connection time to illustrate that the device was communicating to the phone.
We also dynamically converted the interface to educate the user between the inactive (grey) and active (green) states for the buttons throughout the application. The main page was stripped back to have a single primary interaction (starting your BP Reading) and mad the burger menu almost disappear by making it small and in a lower opacity. You will also notice that we have clearly defined instructions for every step always on the screen. This was done as we noticed the retention time could vary. Also as we are dealing with older audiences, having clear written instructions that didn't require an interaction for them to be revealed was a safety net. This allowed for either a quick on boarding (if it was their first time) or the re-engaging of a user (if they hadn’t taken a reading in a few weeks).
Obtaining a reading
Because of the nature of the BP reading we required the user to sit relatively stationary for the length of the test. We found that by displaying the numbers during the reading, the person concentrated on what they were doing rather than being distracted by other things and creating a false reading.
The Done Sequence
We found many uses believing the test was done once the reading was established. As such more time was required to sink the data to the online profile. To address this we triggered a done screen that instructed the user to wait until the a big green tick is displayed. This gave us the time to connect and sink the data to the online profile without the user dismissing the reading or requiring an additional user interaction.
Adjusting the interface for the audience
By looking at the interface you can clearly see that everything looks big. This is because we have almost doubled the standard sizing put forward by the HIG or Material Design Systems. We've also reduced the number of taps to 1 to gain a successful reading. This is because the audience that we're looking at often have poor eyesight and other ailments such as arthritis making a touch interface quite hard to use. I have depicted the pause the application required to communicate with its online services an animation so that the job can be achieved without the need for additional interactions and reeding errors.
We also established that speech interfaces were not very successful with an older audience as many suffered from respiratory issues that made both the Android and IOS assistances struggle.
You will also notice that we allowed for the ability to do a full deep dive for the technically savvy user who wished to see all their data with graphs; online integration; Apple watch accessibility; Health kit integration as well as closed user group sharing.
Summing it up
By presenting your features as you would describe them, you can see the true user story is told. In this instance, I have used design and interaction patterns to communicate to the user what is happening without telling them info they did not need to know. As this simplified interaction with the application, spoke to our target ordnance and did not breaking the application narrative.