Helping a city tell its story
In this project, I was tasked with improving the usability of a civic data storytelling tool developed by the City Science Lab.
Data Stories is a tool for creating structured stories about geographical data collected by the city of Hamburg.
While the tool had been in development for some time, its user experience—particularly the story creation process—had received little attention.
The City Science Lab brought me on as a freelance designer to overhaul the user journey for story creation and viewing.
Stories are organized into chapters which contain multiple sections.
These sections contain Map data and context information about it.
Let’s begin at the heart of the tool: The story creation flow.
The feedback shows that users often felt overwhelmed, unsure, or even frustrated when trying to create a story. To understand these pain points in depth, I began by analyzing the current experience and reviewing insights from earlier user tests.
The reactions of testers can be described as feeling out of control, strictly following the requests of the system they are using. The experience did not create a sense of creating a story. Most would prepare the story in a different place and then simply input their results.
Story First
The story a user wants to tell should always be at the center of the experience. Technical information should only complement it.
Flexible Structure
The process should feel open and adaptable, allowing users to build their story as they go without needing to follow a strict order.
Stay Oriented
Users should always know where they are in the story and what part they’re currently editing.
Storytelling in focus
The Map with the explanation should form the core of each story. They should be the most prominent elements in the UI that other functionality should be built around.
Essential controls
Essential controls to change the appearance of the map should be central as well, as they define the information each step contains.
Navigation and orientation
To clearly show users their current position, story steps are displayed within their chapters. Simple navigation allows users to move through steps easily and create new ones when they reach the end.
Creating context
All chapters appear within the overall story context, with easy access to preview and publish options.
Organizing views
Finally, the table of contents and data layer selection are organized in separate screens to avoid cluttering the main view. Simple animations guide users through this navigation.
Let’s continue with the home page -
the first impression of the tool.
A lot of testers felt thrown into cold water, not understanding what the tool is even about. Let’s make getting to know the tool a more welcoming experience.
Defining areas of improvement
Toolbar
Search
Help
Filter
Create
Story
Login
Welcome
Filter
Create Story
Filter
Stories
Clearing the View
The toolbar is hidden to create more breathing room, and the window is expanded—softening the map's visual noise.
Toolbar
Search
Help
Filter
Create
Story
Login
Welcome
Filter
Create Story
Filter
Stories
Making Space for Onboarding
Stories are shifted downwards to add a welcome section that briefly introduces the tool to new users and gives them a clear first impression
Toolbar
Search
Help
Filter
Create
Story
Login
Welcome
Filter
Create Story
Filter
Stories
Highlighting Story Creation
The “Create Story” button moves to the center to become clearly visible and unmissable.
Polishing the Homepage
Cleaned-up story cards and a subtle background image complete a focused, inviting home screen
The final reactions show that there is still a lot of potential to optimize the User Experience and functionality.
Despite all the efforts to clean up the process, in general it still feels too techy and is only partly inviting to users.
Some inputs are still very technically designed (like the map popsition and zoom selectors). In a second round this could get more love by designing them in a way a user would naturally use them.
Even though the text part of each step is now on the top, there are still few functionalities to create a story. It is still a single text field to paste a paragraph. A future version could incorporate pin-like text options so text can be directly placed on the map or other functionalities that unpack what is happening on the map much more. And increase focus on the story much more, moving formalities even more into the background.
Additionally the data layer selection list also does not help the user much if they dont know well what they want to add. More structure, small introductions and iconography could greatly improve usability further here.
A lot of these unimproved ux decitions stem from the lack of time both in ux and in development to implement a more user centered solution instead of the straight-forward one that is already there. Despite these shortcomings im still proud of the improvement made to the ux in this short amount of thime. Maybe in the future these things can be improved.