Product design
addictions information platform
- User Researcher
- Main UX Designer
- Design system
- Figma
- Javascript
- CSS
- Research
- Prototyping
- Usability testing
- Usability testing
Getting started
context
In French-speaking Switzerland, vital information regarding addiction, dependency, associated risks, and care is widely dispersed. Our client, CRIAD, sought to enhance access to this information by creating a centralized platform that guides users in the broader ecosystem.
PROBLEM
The user base spanned six cantons, each with its distinct care system. The platform aimed to serve individuals facing addiction and their support networks.
This diverse user spectrum, from a homeless person to a medical professional or a parent, resulted in an abundance of information, much of which was only relevant to specific user groups.
CONSUMER USERS
Wanting to evaluate their situation
Population with co-morbidity factors
Wanting to better control their consumption
Recovered addicts
support uSERS
Medical and social professionals
Administrative and legal professionals
Relatives
Teachers and Employers
solution
Given the extensive content, the focus was on content organization and a multi-layer navigation structure. The tech lead and I devised a system incorporating:
- A robust base content organization
- User profiles
- Associative navigation
- Search
This mix allowed people to seamlessly use the navigation method most comfortable for them, and relevant for to the context
Identifying user profiles posed a challenge as directly asking users wasn't feasible. I resorted to indirect methods, but more on that later.
THE JOURNEY THERE
Defining the users
Upon joining the project, the project manager, in collaboration with CRIAD, initiated a survey distributed to organizations within the addiction space. These organizations, in turn, filled out the form and distributed it to those in need.
The substantial amount of collected data required analysis. I employed a cross interpretation method:
- Separation by Populations: Identifying common threads in needs within specific user populations.
- Separation by Needs: Identifying common threads in user populations based on their needs.
Comparing these distinct datasets allowed me to pinpoint the most prevalent needs.
Who came first? the user or the need?
The analysis unveiled a complex situation.
Individuals seeking help for their own consumption came from diverse backgrounds but shared a common need for assistance.
On the other hand, those supporting someone else had more homogeneous needs, shaped by their relationship with the substance user.
To address the diverse needs and content, we categorized the website. I created user profiles for content selection, but faced some complications in the process
- Addicts' Identification Issues: Addicts were hesitant to be identified and harbored trust issues with official websites.
- Background Limitations: Since addiction can affect anyone, relying on background information was not viable.
- Professional Time Constraints: Professionals had limited time and preferred streamlined processes.
- Limited Internet Access: Some addicts faced challenges due to limited internet access.
Prototyping a navigation structure
Prioritizing accessibility and trust, I crafted a robust base navigation structure. Despite the introduction of profiles, we acknowledged that not all users would opt to use them.
The content is regrouped in 5 distinct categories, prioritized through user survey analysis and extensive consultations with domain experts
The general profile served as the foundational navigation. Then each profile only show the most relevant content to the users. Page content could be adapted to use the most fitting tone of voice for effective communication with different user groups.
Attributing the profile
Given the decision to tailor content based on user needs through profiles, the process of attributing profiles became crucial. I had to explore and get the best way to attribute them. Serving as the central point of the website, we explored and tested the following:
Recognizing that the system revolved around user needs, it was important to allow users to change their profiles anytime they wanted.
On top of that, once a user is on a page, we suggested related content based on their profiles, enhancing the ease to navigate.
User testing
We conducted two rounds of qualitative testing with 7 users to refine our question tree and identify the best selection method. User feedback validated the preference for the onboarding process and highlighted the efficiency of our navigation system. However, some users expressed feeling "claustrophobic"within the navigation system, emphasizing the need to balance guidance and user control.
Exploring different variations, adjusting control levels, and refining question clarity, we conducted a third round of testing that confirmed our last iteration. The final version provided more user control and shortcuts, allowing easy editing of previous responses or bypassing the entire tree. This resulted in an efficient navigation helper that users found enjoyable to use.
Laying down the fundations
Compiling all this information, I was able to create a rough skeleton showcasing the links between the pages and the type of content. This allowed us to validate the navigation
Field experts then took these templates to create base content that we later discussed.
Adjustements and coat of paint
With the base content in my hands, I was able to fill in the blanks, apply the chosen UI style to the layout, and make adjustments to make the pages more digest and easy to navigate.
With this first look at the UI with definitive content, I was able to swiftly and efficiently move in to create the design system that would allow us to create page templates. And that would give the association the flexibility to create their own kind of pages later down the line.
Once this baseline was established, field experts created the content for all the template my team and I prepared for them
- Informations on, risks, and resources on frequently consumed substances & comportments
- Hub pages redirecting to each types of substances & comportments
- Addiction self tests
- Variety of supporting articles and pieces of media to help and advise users in their specific situation
- Testimonies from a variety of users across every groups
- Rights and responsibilities of each user groups
- Hub centralizing every institution, associations, group, and doctors operating in the addiction space. With a description of services and help handling administrative practices
final product
CUSTOM DESIGN SYSTEM
In this context, the goal of a design system is to create a system of blocks, each integrated in the back-end. The goal is for the editor to be able to create any page, of any content type or length, without struggling and without having to call upon us to create anything custom.
- Colors
- Sources
- Summaries
- Basic filters
- Navigation
- TABS
- Highlights
- Advanced Filters
- Footer
- Table of content
- Resources
- Accordions
- Breadcrumbs
- Intralinks
- Pagination
- Map
- Inputs
- Alerts
- Search
- Adresses
- Modals
- Forms
- Simple tables
- Links
- Paragraph & texts
- Sources
- Collapsabe tables
- Tests
- Highlightable blocks
- Introduction
- Onboarding
- Sources
NExt steps and aftercare
This project is still in development and the clients are still working on the content. The full platform is expected to come online by mid 2025.
I was brought on the project to create the bulk of the UX and design system work. My mission has then ended, and I have been moved to others projects. Thus I will not be part of the team handling the aftercare. That being said, I left some parting words and a list of areas that will need monitoring.
The biggest area of concern is the navigation and the profile association. It is not yet excluded that most people will simply opt for the base navigation instead of selecting a profile to cater the content to their assumed needs. In which case, some resources would best be diverted away from said profiles in order to solidify the base content.
With expertise in user experience design, web design, and design systems, I bring a unique blend of marketing insight and technical collaboration to every project.
My technical experience, allows me to closely work with developers to ensure seamless planning, execution, and integration of design requirements
