User Story Mapping

A workflow transition from a whiteboard brainstorming session to digital administration dashboards and a map interface, showing the development process from ideation to implementation.
A lot of shared-understanding was created between the whiteboard & high fidelity.

Introduction

In 2019 I started at Medici Land Governance (MLG) as a Sr. Product Designer eventually transitioning to Head of Design. I led the design of a 0 to 1 cadaster system.

The Company & Team

At MLG, a company leveraging blockchain for land rights, I collaborated with a diverse team including GIS Engineers and Blockchain Developers, focusing on the Landum product for land administration.

The (early) team

A group photo with selected individuals highlighted in color and tagged with their respective names, showing team collaboration and individual contributions.
I worked with everyone shown in this photo + more over the years, but the people highlighted were present for the story mapping sessions - each representing either Product, Development, or Design.
Team details + LinkedIn
Note on capturing sketches There's a couple 'capture' habits I believe help build confidence with people entrusting you with early ideas & sketches (if someone takes the time to make a sketch and you lose it, they probably won't make another).
Note about Sonia: Sonia had been single-handedly doing all design work, this includes branding, product work, business cards, anything with 'design' associated with it, for over a year before I joined. I'd move into her role after she left, and it gave me a really deep appreciation for how much she was shielding me from. The only way I was able to have so much focus on such a wide scope was because of her.🙏
Note about Nate: Before I joined MLG, I had a couple quick meetings with Nate. I’d worked with Sonia before at Overstock, but the PM/UX relationship is critical. This would be for a new product and I was excited to solve an interesting problem, but knew that it was in a very early stage. Nate is a great PM because he is a great communicator and I felt good jumping into the unknown. We were able to work closely and navigate through a lot of ambiguity by having a high-trust relationship. He’s one of not only the best ‘PM’s I’ve gotten to work with, but all-round great dude.

Not pictured here is the team in Ireland 🇮🇪, who were incredible. I'd end up collaborating closely with Richard van Hees, and it's a UX/DEV relationship that was high-trust from the beginning.

Design is a dialogue, and those conversations were easy to have with this team.

Collaborative Design Sprint

I facilitated a 5-day design sprint to rapidly build team consensus and create a functional prototype. This process established detailed user personas, clarified core user tasks, and led to a cohesive vision for our complex land administration system.

User story mapping + low-fidelity prototype

A conceptual flow diagram showing the progression from a whiteboard with project goals to detailed user story mapping and design prototypes.
Initial whiteboard session, then facilitating 5 days of user story mapping that informed the first low-fidelity functional prototype.

Technical Approach Simplified

Our approach centered on essential user interactions such as search functionality and efficient data visualization, prioritizing usability and system efficiency.

A browser window displaying a user story mapping session, with notes categorizing different user roles and project goals in a brainstorming format.
We discussed roles that would help frame the conversation for jobs-to-be-done that I captured while aligning on day 01.
A detailed user story mapping session involving various stakeholders, represented by notes and linked documents that outline the project development process.
I started at the top of this Figma page and scrolled down to cover the main points & to align on foundational concepts (e.g., minimizing output & maximizing outcome + impact, build for learning, etc.)
A design layout depicting personas for a user interface project, detailing different user roles and their access levels within the system.
An overview that highlights of the three main functional patterns each persona had in common.

Our initial release had to support three key user behaviors:

  1. Searching: (locating a person or a parcel-record within the system)
  2. Viewing the map: a crucial component of the land-administration experience
  3. Quick view: providing a glimpse of summary information without the need to pull up the full record

A table with post-it notes arranged in categories for project features, representing a brainstorming or planning session.
A project timeline visual showing a hierarchical flow of post-it notes from broad objectives to detailed user stories.
The story maps, starting with the first whiteboard session, then the next day of notecards. I digitized these sticky notes in Figma, and used this page as one of my primary references when designing.
Starting with the key, here is a run-through of the end-to-end story map that was created at the end of 5-days of cross-functional collaboration, listing the functional flows for each persona we needed to deliver on first.

Our first end-to-end prototype

The end of day 05 was the presentation of the low fidelity functional prototype walkthrough.

My confidence was up because I was sure that we had the end-to-end experience & all of the major touchpoints identified by the people building the product (PM, UX, DEV).

I created this at the end of the 5 days of facilitating the user story mapping sessions - the prototype in Figma, then captured & edited in Screenflow.

The video contains text because I wanted this artifact to be able to be played and still convey context without sound. Overall, the presentation went great and there were no major gaps/concerns in the prototype (now people just wanted to see it in higher fidelity).

An archive collage of different interface iterations for a cadastral project, displaying various stages of user interface development.
A peek at some pages from my early low fidelity file, exploring a lot of broad patterns & keeping options flexible while we were still discovering.
Screenshot compilation of various software interface stages including a framer prototype, video editing timelines, and a cadastral admin prototype update screen.
Screenflow was fun to learn & continued to be extremely useful in presenting ideas.

Absorbing patterns & soaking in .pdfs

Digital workspace with multiple research documents and reports on topics such as blockchain, cadastral maps, and property rights, arranged next to a website interface.
(early research & discovery) Sample of some informational .pdfs

There was a lot of research that I was doing in the background leading up to the story mapping sessions, and throughout my time there.

New info would come up during a session that would help guide my study-time.

This system was responsible for is handling a lot of information, usually in something that could look like a huge spreadsheet.

A close-up of a GIS (Geographic Information System) interface showing a statistical analysis dialog box overlaid on a map with blurred data in the background.
A capture for the data-pattern from an ARCGIS system. Even though our current system wasn't going to have to deal with that much data immediately, these patterns were still valuable to take in.

Spending time downloading and looking at public land records from around the U.S. helped me see what data points were common, and got the wheels turning for how we might handle lots of information.

The underlying data was only one piece, there was the actual systems used by governments & GIS professionals that I started going through and capturing. It gave me an overall feel of what different experiences were like and what were some common broad-patterns shared between them.

Organized storyboard of a project with various pages of content including maps, data visualizations, and interface designs.
(early research & discovery) Figma file with patterns (screenshots) captured .
Flow diagram detailing the user interface design process from initial sketches to final detailed pages of a property details web application.

The shoulders of giants

The fact that my experience was great at MLG had a lot to do with building shared understanding quickly, and these are the bulk of the techniques/concepts that were pulled from.

With User Story Mapping + JTBD framing, we aligned around a cohesive product vision (at least an end-to-end functional flow).

Stack of professional books on product design and user experience, including titles on user story mapping, jobs to be done, and lean UX.

Here's some videos (youtube) to give you a high-level idea of the concepts .

Continue to learn & build shared understanding

I’d reference that story map throughout my time at MLG, and we would kickoff new projects by having a quick mapping exercise to ensure alignment. With the functional end-to-end experience mapped out, it made it a lot easier to focus on getting the higher fidelity work done.

📼 view a time-lapse of higher fidelity exploration & prototyping

Flow diagram detailing the user interface design process from initial sketches to final detailed pages of a property details web application.

By leveraging components & systems-thinking from the beginning, making a decision around one piece of UI would ripple out to the rest of the system (e.g., the border-radius on the login modal would be the same as the table’s border-radius on the admin page).

early exploration of design tokens in Figma & Amazon's style-dictionary (pre-Figma variables + plugins). I like to see the design+code relationship (and also read docs for reference).
Flow diagram detailing the user interface design process from initial sketches to final detailed pages of a property details web application.
I'd use this design tokens figma plugin that exports into a nice JSON format. design tokens github

When in doubt, get together with the people you're working with, externalize assumptions & start building a shared understanding.

Best,
Kelsy

👈 home