Reimagining Out of Eden Walk
#Interactive Storytelling #Visual Journalism #UX Research #UX Design #National Geographic
![](https://freight.cargo.site/t/original/i/0992c50b9794c55f617e6d6f51955ec30cca576921122b40ffff914ab89730f9/Home---v3-animated-map-with-scrolling.png)
“Out of Eden Walk (OOEW) is a years-long journalistic expedition through which National Geographic Fellow Paul Salopek is walking the globe, retracing the pathways of human origins from Africa to South America. This 24,000 mile odyssey is an exercise in slow journalism, allowing Paul to report the major stories of our time holistically by slowing down to walking speed to share the full context and voices of local people behind the headlines. Paul’s words, as well as his photographs, video, and audio, are creating a global record of human life at the start of a new millennium.”
OOEW is National Geographic‘s longest standing project with a global following and has a legacy of followers from other platforms like Reddit. The project continues and has many years to go, but the current website, pioneering when built, runs on an outdated platform.
During my internship at National Geographic Society, I reimagined the OOEW website with more current storytelling and interaction approaches using UX research and design methodologies.
During my internship at National Geographic Society, I reimagined the OOEW website with more current storytelling and interaction approaches using UX research and design methodologies.
Timeline
Tools
Collaboraters
- Internship Period: June - August 2023
Tools
- Design & Prototyping: Figma, Procreate
- Web Analytics: Heap
Collaboraters
- Project Manager
- Stakeholders
- Content Editors/Managers
My Role:
- Research: Conducted stakeholder interviews to gather project requirements and insights; Performed comparative analysis to evaluate design approaches and best practices.
- Design & Prototyping: Created iterative designs based on feedback; Developed interactive prototypes to visualize design solutions
- Final Work Share-out: Presented and shared final work with stakeholders, including the CEO, to gather feedback and ensure alignment.
00. Final Work Preview
01. Identifying Opportunities
a. Contextual AnalysisI began the research process by analyzing program-related documents to gain a comprehensive understanding of the context. This involved reviewing background information, goals, and existing frameworks associated with the OOEW project. By extracting key terms and themes from these documents, I established a foundational understanding of the project's scope and identified several initial considerations for the UX design phase. This preliminary assessment served as a guiding framework, helping to shape design decisions and focus on critical areas that would enhance user experience.
![]()
![]()
.
![]()
b. Stakeholder Interviews
To further inform the design process, I engaged with 7 stakeholders through a series of interviews, including Paul Salopek, who initiated the OOEW project, his content editors, National Geographic Storytelling Program Managers, Product Manager, etc.
Their input was crucial for refining the identified priorities, ensuring that the UX design aligned with both user needs and stakeholder expectations. Among the various valuable insights gathered, the following were identified as the most critical:
![](https://freight.cargo.site/t/original/i/9e91a61d9cba915272f6b113a0d3afb42dbe3626087b6818a4887722d7b9232b/keywords_extraction1.png)
![](https://freight.cargo.site/t/original/i/cf18fb9a8d3a6d97c3c69b4fe5c8ac42ef0f4c30d9b3e6a7010f0daa92932e37/keywords_extraction2.png)
.
![](https://freight.cargo.site/t/original/i/cd0b6f7ef6ef0e886dab2b048e55f6ceeb58166ed3364eecf6fe96e939c18552/keywords_extraction3.png)
b. Stakeholder Interviews
To further inform the design process, I engaged with 7 stakeholders through a series of interviews, including Paul Salopek, who initiated the OOEW project, his content editors, National Geographic Storytelling Program Managers, Product Manager, etc.
![](https://freight.cargo.site/t/original/i/f606f31ec6870febdd69f9aad1196e3a0fb0c3d07cc3e6172391872275db1383/interview1.png)
![](https://freight.cargo.site/t/original/i/43a13d205fdf17d3806eb23ebb1d8af86c204e0a9b51d0e61c677a61b54bdc1d/interview3.png)
![](https://freight.cargo.site/t/original/i/6717551773b6c1ab5b8ed92e052e519ea8b7c5da0e2c9144c9d96b246118d2b0/interview2.png)
Their input was crucial for refining the identified priorities, ensuring that the UX design aligned with both user needs and stakeholder expectations. Among the various valuable insights gathered, the following were identified as the most critical:
![](https://freight.cargo.site/t/original/i/8de4b32b139d623ab3488eb00b5585355589808dcf402bba3e0335b07ab1b380/Amplify-Storytelling-through-Experience-Design-.png)
The platform should be crafted to deeply enhance storytelling, creating immersive and emotionally engaging experiences that captivate and resonate with users.
.
![](https://freight.cargo.site/t/original/i/3a8394d194c1e5d067e994b78494d8049b1d5c524c92aba9c5510bce0fb9e879/Serve-as-a-Robust-Digital-Archive-.png)
It’s essential for the platform to function as a comprehensive digital repository, facilitating the efficient organization and retrieval of diverse information.
![](https://freight.cargo.site/t/original/i/9564088c4357b455652479c7d524e7d5c7637e7bd82b89a4512ee7d6815bc744/Integrate-Diverse-Data-Types-Seamlessly-.png)
The design should support a broad range of data formats, enabling the effective integration of geo-spatial data, audio recordings, and other multimedia elements to enrich the user experience.
c. Site Analysis I conducted a thorough site analysis. This involved evaluating the current site architecture, user interactions, and navigation flows to identify existing challenges and opportunities for improvement.
Major Findings
![](https://freight.cargo.site/t/original/i/84eadfe5640008849a02eebee177692bb1cf32a2c34130c104927346c4e9e6d6/Frame-614.png)
![](https://freight.cargo.site/t/original/i/991b927970972e03354a777058e713368f89e6948373e40d886cae530573a236/Frame-620.png)
![](https://freight.cargo.site/t/original/i/47db513fcfa38ea9c59d5fbb8f440c117593745f2f0f87886637780d1a95b143/Frame-618.png)
![](https://freight.cargo.site/t/original/i/518fbda775dbe08dce4f13800ce39fc4b32e6420d36d996089c2546c7905ae1b/Frame-616.png)
Major Findings
- Linear Storytelling Approach
The current design follows a straightforward, linear storytelling path, which may limit narrative flexibility and user engagement.
- Complex Information Architecture
The existing structure is intricate and convoluted, presenting challenges for users in navigating and accessing information efficiently.
d. Comparative Analysis
I conducted a comparative analysis by reviewing reference websites to identify trends, approaches, and patterns for interactive storytelling in journalism. This helped to refine strategies for organizing assets and designing interaction patterns that enhance the storytelling experience on the OOEW website. This analysis provided insights into best practices and innovative approaches to elevate user engagement and narrative effectiveness.
Comparator Selection Criteria
Selected comparator websites are web-based interactive storytelling projects that:- Come from a strong brand for digital journalism
- Cover various types of media and data, including images, video, audio, geo-spatial data, time-series data, etc.
![Selected Comparators](https://freight.cargo.site/t/original/i/b746612266cf49ae528ac8edc88c302696112fd3656e19bd795f6757d25a6f70/Slide-16_9---35.png)
Major Findings 💡
- “Scrollytelling” as the main interaction approach
Immersive while allow for user-led non-linear navigation
- Qualitative visual explainers to break down events chronologically and geographically
Situate audience in the context
02. Research-based Design Insights
a. Design Goals
b. Proposed Architecture
![]()
- Utilize “scrollytelling” to improve navigation
- Enhance the integrations of various media/data types
- Apply geo-spatial data with cartography to contextualize the narrative
b. Proposed Architecture
![](https://freight.cargo.site/t/original/i/74ece8c4497e2d17c3394c71dc39e1c67d69ac1528893731bf8b48da75f3e39d/Slide-16_9---13.png)
03. Design Studio
a. Wireframing
During this stage, I made two iterations of wireframes based on the feedback from stakeholders.
Summarized Feedback from Stakeholders
b. Prototyping
During this stage, I made two iterations of wireframes based on the feedback from stakeholders.
![First Iteration](https://freight.cargo.site/t/original/i/4dd0249d5f09ccc6b1cc7fe1634f2d848305932582d4bd51e140fbd202ccb4fe/image-12.png)
![Second Iteration](https://freight.cargo.site/t/original/i/22412b1e1e413d7e6098eeaa6e6b4583ceff4a951e00f43eeb0974ffc307c68d/Slide-16_9---71.png)
- Improve post discoverability
- Highlight human elements in the story
- Strengthen connections between posts
- Enhance connections between assets
b. Prototyping
Integrating all the feedback that I received from the two iterations of wireframes, I developed a final prototype.
.
.
![Prototyping in Figma](https://freight.cargo.site/t/original/i/ab37c5e64b0dd5499255d3618ef4df37b192bf44b4405926defa9d4c1a41aef0/image-13.png)
04. Final Work
.
05. Some Design Decisions
“Super Nav”Originally, I followed the current site’s approach of using a dropdown menu with chapter names for navigation. However, inspired by stakeholder feedback emphasizing a need for more contextual and holistic journey insights, I developed a "super nav." This navigation feature offers readers a comprehensive overview of each journey segment, integrating time, location data, and post categories to enhance user understanding and engagement.
Cards
The initial iteration of post cards is shown on the left below. In the final version, I opted for circular frames for people's images, positioned alongside each card. This design decision aimed to emphasize the human elements of the story. Following Object-Oriented UX principles, which discourage masked objects (where different objects serve distinct purposes), I ensured that each design element was distinct. This approach allowed for a focused presentation of metadata associated with posts across different categories.
![Original Dropdown Menu](https://freight.cargo.site/t/original/i/3e737eaa057414f6c8b08f89256683f0652b1d5cfd80465f1395c3a23af51041/Map-States---v1.png)
![New Design for Navigation: "Super Nav"](https://freight.cargo.site/t/original/i/63af1cdb684024192fff07d29fce7a4e192e6bfcc165a2fd0ef07ad61ac0f5fa/OOEW-Header.png)
Cards
The initial iteration of post cards is shown on the left below. In the final version, I opted for circular frames for people's images, positioned alongside each card. This design decision aimed to emphasize the human elements of the story. Following Object-Oriented UX principles, which discourage masked objects (where different objects serve distinct purposes), I ensured that each design element was distinct. This approach allowed for a focused presentation of metadata associated with posts across different categories.
![First Iteration](https://freight.cargo.site/t/original/i/6fe93fd5eee6228238442628f515172a7ec2763b76dedd98dd8f29819196c6f7/Slide-16_9---84.png)
![Final Design for Different Types of Posts](https://freight.cargo.site/t/original/i/77835b56d3cd9f19f86ac97f9016bcd711796c187a4214488bda9e48106e728b/Slide-16_9---91.png)
06. Areas for Growth
Due to time constraints, I have several unresolved questions and design goals for further exploration:
User Research Questions
Design Goals
User Research Questions
- Do users who enter sideways get a full picture of the journey?
- How is the human element perceived?
- What do users consider as the story’s focal point?
Design Goals
- Create an "About" page to unify all OOEW resources.
- Refine navigation with additional iterations.
- Develop tooltips and explainers for contextual onboarding.
- Enhance search UI with recommended keywords and filters.
- Implement read/unread states for posts to help readers get the latest updates.
- Improve accessibility for mobile and low-bandwidth users.
Acknowledgements
Thanks to Luke Miller, Pauline Munga, Mary Finer, the UX Team, the Constituent Products Team from National Geographic Society for the guidance and support.
Thanks to Paul Salopek, Julia Payne and Ollie Payne from the OOEW Editorial Team, stakeholders from National Geographic Society‘s Storytelling Programs, Content and Editorial Strategy, Strategic Communications, and Mapping for the insights and feedback.
Thanks to Paul Salopek, Julia Payne and Ollie Payne from the OOEW Editorial Team, stakeholders from National Geographic Society‘s Storytelling Programs, Content and Editorial Strategy, Strategic Communications, and Mapping for the insights and feedback.