Journey Map Poster
The journey map poster, designed by Spoorthi Cherivirala, explores the neuroscience and psychology behind substance use disorder. It includes:
- Identifying the problem
- Patient persona
- The Mind Psyche Icebergs, which illustrate the known and unknown emotions experienced by the patient
- A timeline of actions and corresponding feelings and thoughts
- Three paths to recovery
- Brain regions associated with each event
- Introductions to treatment centers
- Pain points and opportunities throughout the journey
- Medications
Website Goal + Target Audience
Educate Non-Professionals About Addiction and Recovery
The goal is to educate people about addiction and recovery without requiring excessive clicks or searching, ensuring they can easily access and learn from the content provided. The website’s target audience primarily includes non-medical professionals who are curious about the substance use disorder recovery process or are seeking recovery approaches, not just professionals involved in medical treatment.
Content Structure
Make It More Accessible to Non-Professionals and Easier to Read
Simplify the Poster Content by Keeping Only the Most Essential Information
Since the main target audience of the website is non-professionals, the journey content should be presented in a more accessible and easy-to-read format.
Given the complexity and abundance of information in the poster, the content has been refined for the website, focusing on the most essential details: the three roads to recovery, the mind psyche icebergs, brains, and timelines. Additionally, the patient journey is divided into five stages, with each stage corresponding to one iceberg, one brain, and one timeline.
Given the complexity and abundance of information in the poster, the content has been refined for the website, focusing on the most essential details: the three roads to recovery, the mind psyche icebergs, brains, and timelines. Additionally, the patient journey is divided into five stages, with each stage corresponding to one iceberg, one brain, and one timeline.
Received Version
Areas for Improvement
- Lack of Responsive Design: The design does not adapt well to different screen sizes; content appears large on a desktop but too small on a mobile phone.
- Excessive Brain Content: The brain images contain too much text, making them difficult to read.
- Confusing Road buttons: The road buttons are identical, making it hard to differentiate between the three paths.
Iteration 1
Design a Responsive Website With Two Layouts to Accommodate Both Desktop and Mobile Screens
The headline text size has been reduced, and the patient image has been removed to create a neater homepage. Scroll down or click the continue icon (triangular icon at the bottom center) to read the rest of the information.
Homepage
Homepage
Streamline the Brain Image by Reducing Text and Hiding the Timeline on the Mobile Version
The iceberg thumbnails
have been relocated from the left side to the top center to help users better track the stages.
The brain image has been simplified, showing only the brain region names. The explanation for each region will be displayed or updated one at a time, depending on which region name (e.g., CINGULATED CORTEX) is clicked.
Desktop Screen
Iceberg, brain, and timelines are more spaced out to enhance readability and better fit desktop screens.
Mobile Screen
The timeline is hidden on the mobile version and can be displayed by clicking the timeline icon
in the top right corner of the screen.
Stage 1 (Brain Region Name Unclicked)
Stage 1 (Brain Region Name Clicked)
Iceberg
Brain (Unclicked)
Timeline
Brain (Clicked)
Usability Testing Feedback
- Missing Instructions: Upon first opening the website, it’s unclear what the website’s purpose is and how to navigate it.
- Button Confusion: The three parallel rounded rectangular subheadings on the homepage resemble buttons, prompting users to click on them, though they are actually non-clickable.
- Excessive Neuroscience Terms: The brain region names add too much text, which may overwhelm or intimidate the audience.
- Unclear Structure: The desktop layout appears somewhat disorganized and lacks a clear structure.
Iteration 2
Click the Numbered Circles to Display the Brain Region Names and Explanations
Restructure the Layout Into Three Parallel Columns
The region names have been replaced with circled numbers, allowing users to click on any number to view the corresponding region name and explanation. This design avoids the need to click directly on specific regions within the brain image, which can be challenging on mobile devices if the regions are too small. A clickable label is also provided to guide users on how to interact with the brain.
Desktop Screen
The desktop layout has been updated to feature three parallel columns, with the Iceberg, Brain, and Timeline each occupying a separate column.
Stage 1
Iceberg
Brain
Add Introductory Pages to Explain the Website’s Purpose and How to Use It
Introductory pages have been added at the beginning:
- Page 1 explains the purpose of the website.
- Page 2 introduces the character Sally and her journey.
- Page 3 explains the concept of the mind psyche iceberg.
- Page 4 details the brain’s purpose and how to interact with it.
- Page 5 explains the timeline and how to display it on a mobile device.
Mobile Screen
Purpose
Sally's Journey
Iceberg
Brain
Timeline
Website First Version
An Iceberg Thumbnail Highlights When the Corresponding Stage Scrolls Into View
Click an Iceberg Thumbnail to Jump to the Corresponding Stage
The iceberg thumbnails highlight the stage currently in view—when a stage is scrolled into view, the corresponding thumbnail is highlighted. For example, if stage 2 is in view, iceberg thumbnail 2 will be highlighted. Users can also jump to a specific stage by clicking on the corresponding thumbnail image.
Select a Road Before Proceeding to Stages 3, 4, and 5
Click a Road Button to Navigate to the Corresponding Path
When clicking thumbnails 3, 4, or 5 for the first time, users will be directed to the "Explore Three Roads" page. Since stages 3-5 are part of three different paths, users must choose a road first. After selecting a road, users can click on iceberg thumbnails 3-5 to navigate to the corresponding stages.
Additionally, once users have completed viewing the final stage of the current road, they will have the option to click the road buttons to switch to other paths.
Additionally, once users have completed viewing the final stage of the current road, they will have the option to click the road buttons to switch to other paths.
Click the Numbered Circles to Display the Brain Region Names and Explanations
A clickable label guides the user on how to interact with the brain. This label will disappear once the user performs the action correctly. Users can then click on the numbered circles to explore other brain regions and their explanations, with the corresponding region highlighted on the brain image.
Click the Timeline Icon to Reveal the Timeline
If using a mobile device, users can click the timeline icon to reveal the hidden timeline, and click it again to close it. They can also click on the iceberg thumbnails to switch to the timelines of other stages.
Identified Issues from Usability Testing
Unclear Iceberg Intro Page:
Present both the positive and negative iceberg imagery in the introduction.
Confusing Representation of the 3 Roads:
We need to simplify the concept of the 3 roads to make it more understandable and navigable. The term ‘roads’ was used because the original journey map poster resembled a map, but our web version lacks those map elements, making the metaphor unclear. We could incorporate more map visuals from the original poster to clarify that Sally could follow three different paths. Alternatively, we might reconsider using ‘roads’ and instead frame it as a ‘choose your own adventure’ narrative. After selecting a path, we should clearly indicate that other alternative paths are available for exploration.
Excessive Repeated Clicking of Timeline Icon:
Can we simplify the process of guiding users through the narrative of the timeline, especially on mobile? Currently, users must repeatedly click the timeline icon as they scroll through the five steps. If they want to view the alternative timelines for roads 2 and 3, they have to click even more, which could be frustrating, particularly if their focus is more on the timeline than on the brains and icebergs.
Limited Instructions on Website Navigation:
Can we make the story/timeline navigation more intuitive? A narrated video walkthrough of the website, similar to a guided tour, could enhance the user experience. This could help users who prefer a step-by-step guide to understanding the content. At the very least, a video explaining how to navigate the site would be valuable.
Iteration 3
Shift the Timeline to the Left Side to Make It More Noticeable
Darken the Background to Differentiate Components and Create a More Structured Layout
Update the Colors to Make the Three Roads More Distinct
The timeline is the focal point of the journey website. Since people typically read from left to right, the timeline has been shifted from the right to the left side, with the background darkened to make it more noticeable at first glance.
The backgrounds of other components, including the iceberg and brain, have also been darkened and given card-like shapes to create a more structured layout. Each stage now features an illustration to enhance visual appeal and a summary paragraph to provide context for the information presented.
The colors of the three roads have been adjusted to darker, more saturated tones, making it easier for the audience to distinguish between the different paths.
The backgrounds of other components, including the iceberg and brain, have also been darkened and given card-like shapes to create a more structured layout. Each stage now features an illustration to enhance visual appeal and a summary paragraph to provide context for the information presented.
The colors of the three roads have been adjusted to darker, more saturated tones, making it easier for the audience to distinguish between the different paths.
Desktop Screen
.png)
Road 1-Stage 5
.png)
Road 2-Stage 5
.png)
Road 3-Stage 5
Iteration 4
Add Three Branches Imagery to Better Demonstrate the Three Paths
Show the Timeline in the Mobile Version to Reduce Clicking Interaction
On the “Explore Three Roads” page (after viewing stages 1 and 2), an image of three branches is included to better illustrate the concept of the three paths and enhance user understanding. Each branch represents a different road, allowing users to choose one path while still having the option to explore the others.
Desktop Screen
More playful illustrations were introduced, with a unique illustration for each stage. These illustrations, along with summary paragraphs, will be displayed only in the desktop version to enhance the content presentation.
Mobile Screen
The timeline is displayed in each stage to minimize repeated clicks on the icon, with the line extending through the iceberg and brain images to connect them. Users can still choose to view only the timeline by clicking the icon.
Stage 1 + 2
Stage 1
Stage 2
Usability Testing Feedback
- Sparse Timeline Information: The content on some timelines appears to be limited, making them feel somewhat empty.
- Distracting Illustrations: The illustrations are a bit distracting, drawing the audience’s attention away from the timeline at first glance.
- Unclear Three Branches Imagery: The imagery of the three branches doesn’t effectively represent the concept of the three roads.
Iteration 5
Add Emotion Tags to Enrich Timeline Content
Remove Illustrations to Eliminate Distractions
Emotion tags
were added beneath the events to enrich the content of the timelines, portraying the specific emotions (including emojis and text) Sally experienced at different time points.
Illustrations were also removed to reduce the distraction and encourage the audience to look at the timeline first when opening the website.
Stage 2
Stage 3
Stage 2
Stage 3
Revise the Three Branches Imagery to Better Illustrate the Concept
The three branches imagery has been revised to better explain the concept of the three roads. The image is now a GIF, toggling between highlighting Road 1, Road 2, and Road 3 to demonstrate that there are three options to choose from.
Explore Three Roads
Explore Three Roads
Website Final Version
I used Webflow, HTML, CSS, and JavaScript to build the final website, which can be accessed by clicking the following link:
How to Navigate the Website?
1. Click "Next" to View the Introduction Pages
- Home Page:
Outlines the purpose of the website and provides information about Biomotivate, with a hyperlink to Biomotivate’s website. - Sally's Journey Page:
Introduces the character Sally and her journey from substance use disorder to recovery. - Mind Psyche Iceberg Page:
Explains the iceberg concept—depicting the emotions Sally experiences at each stage. - Brain Page:
Explains the brain and how to interact with it—this section highlights the specific brain regions and the changes associated with Sally’s experiences. - Timeline Page:
Explains the timeline—this section outlines the specific events and emotions Sally encounters at each stage, along with instructions on how to navigate the timeline.
Users can navigate back and forth by clicking "Next" or "Back".
2. Click the Numbered Circles to View Brain Region Names and Explanations
Users can click the numbered circles to explore different brain regions and the changes associated with her experiences, with the corresponding region highlighted on the brain image.
3. Click the Iceberg Thumbnails and Road Buttons to Navigate to Different Stages or Paths
Users can jump to a specific stage by clicking on an iceberg thumbnail. When clicking on iceberg thumbnails 3, 4, or 5 for the first time, users will be directed to the “Explore Three Roads” page. After selecting a road, users can then click on thumbnails 3-5 to navigate to the corresponding stages.
Upon completing the final stage of the current road, users will have the option to click the road buttons to switch to other paths.
Upon completing the final stage of the current road, users will have the option to click the road buttons to switch to other paths.
4. Continue Scrolling Down to View All 5 Stages and All 3 Paths
Users can scroll down to view all 5 stages and all 3 paths. The iceberg thumbnails will track the current stage in view—when a stage is scrolled into view, the corresponding thumbnail will be highlighted.
5. If Using a Mobile Device, Click the Timeline Icon to View the Full Timeline
To view the full continuous timeline on a mobile device, users can click the timeline icon to reveal the entire timeline and then scroll through to view the timelines for Stage 1, Stage 2, Stages 3-5 of Road 1, Stages 3-5 of Road 2, and Stages 3-5 of Road 3.
