design · 2020 to 2021
MEMEX was a European research project on social inclusion through cultural heritage. In pilots in Barcelona, Paris and Lisbon, people from migrant and marginalised communities wrote stories about places that mattered to them. The stories were pinned to locations on a map and linked to a knowledge graph of heritage sites, people and events.
The work covered the user experience and interface of the mobile app: the information architecture, the privacy model, the wireframes and the high-fidelity screens. The app had two sides. Storytellers write and place their stories; viewers find them on a map and read them.
The consortium agreed on 27 requirements in three groups: what storytellers need, what the app must do, and how the interaction should work. Each had a priority from one to three. We turned the list into an information architecture with six core areas: the story grid, story creation, story editing, the story view, preview and publishing.
For each screen, we laid out the content blocks and marked each block with the colours of the requirements it served. Developers could see why a block was there and what it had to support. A requirement with no colour on any screen showed a gap.
With Hollie Bostock, we sorted the requirements into three releases across four parts of the app: the profile, story creation, story mapping and story viewing. Version 1 held the core: interests, multimedia stories, stories tied to a location, and browsing. Version 2 added collaboration between authors, safety settings, analytics, AR overlays and stories shown indoors. Version 3 added controlled feedback and stories that mix media with AR. We wireframed each version so the consortium could see what each release would contain.
In the version 2 wireframes, an author’s dashboard showed the stories they had written, co-created and saved, invitations to write with others, places they had visited, and simple feedback numbers. Writing a story started with a title, a location, media and an option to add AR.
Many storytellers were migrant women sharing personal memories, and some did not want to be identifiable. We designed privacy as a choice a person makes for each part of the app. A profile could be anonymous, limited or detailed. A story could be shared in part, on request, for a limited time or only at its location. Feedback could be open, limited to a group, or turned off.
The full architecture covered sign-up, photo upload, interests, the dashboard, story creation with media, and story viewing in a grid or on a map. We wrote an index of all 46 high-fidelity screens, with the actions on each, so the technical partners could estimate the work.
The first high-fidelity screens followed Android conventions. A dashboard held the stories a person had saved and published. Stories could be browsed as a grid or on a map, and each story opened onto its text, media and location.
Meetings with the technical and social partners cut the second release down. We split users in two. Anyone could open the app as a viewer and browse anonymised stories, without an account. Only the pilot facilitators could log in to write stories. Comments and likes were removed, to protect storytellers from harmful feedback. The dashboard went, and the app opened straight onto the stories.
Writers add photos, audio recordings or files through one upload button. The knowledge graph linked each story to people, places and heritage records. For storytellers, the graph became a source. With content suggestions turned on, a writer searches for the place and the app offers facts, images and other authors’ references to it. The writer chooses what to add: a fact appears in the story text, and chosen images join a carousel above it.
A writer places the story by moving the map under a fixed pin, or jumps to where they stand with the location button. Readers see the story on the same map and can ask for directions to it.
Before publishing, the writer adds keywords from a shared vocabulary, ticked from a list that narrows as they type. The keywords are what the knowledge graph uses to link stories. Publish stays inactive until at least one keyword is added. The preview shows the story as readers will see it, with numbered sources for any facts taken from the suggestions. After publishing, a message explains that the story’s connections take time to compute and that the app will send a notification when they are ready.
From a story’s map, the graph button shows what the story connects to: other stories and heritage sites, drawn as a small network. Tapping a node opens a summary with the keywords the two share. Scrolling up gives the same connections as lists: how many stories and sites, and cards for each.
Two switches organise the app. Readers choose between all stories and stories near them. Authors choose between their saved drafts and their published stories, and a new story appears at the top once it is published. Each list can also be opened on the map, with the reader’s position marked. Tapping a pin shows the story’s photo and title, with directions to the place. The app runs in English, French, Portuguese and Spanish.
We wrote a UI style guide in Adobe XD for the developers. It set a teal colour scheme, a type scale in Segoe UI, a 4:3 ratio for landscape photos, and every state of the main components: buttons, the expandable search bar, the create story button, and the switches between saved and published, and between all stories and stories near me.
the colour scheme and type scale, as specified in the style guide