First Step
FirstStep is a digital application designed to support individuals navigating recovery through the 12-step process of Narcotics Anonymous (NA). Developed in response to the opioid crisis that has claimed over 4,000 lives in Indiana over the past decade (source: addictions.iu.edu), the app seeks to enhance NA’s globally recognized framework for sustainable addiction recovery.
​
​
Project Description
Duration - August 2022 - October 2022
​
Role - UX Researcher & Designer
​​
Teammates - Fernanda Alonso, Gayatri Raman, Sreemayi Rapolu
​
Problem
How can the existing NA framework of addressing addiction through meetings and
12-step work be digitally empowered?
​
Our research identified a critical gap in the digital empowerment of NA’s proven approach to addiction recovery, particularly in facilitating:
-
Effective meeting participation.
-
Seamless 12-step work.
-
Privacy-centric sponsor-seeker relationships.
Solution​
FirstStep addresses these needs by:
-
For Seekers:
-
Preserving anonymity while allowing users to find suitable sponsors.
-
-
For Sponsors:
-
Maintaining privacy while simplifying the management of sponsorship responsibilities.
-
The Process
We conducted extensive literature reviews, user research, and interviews to identify user needs and pain points. FirstStep focuses on a select set of functions that emerged as most critical through these methods.
​
-
Anonymity: Prioritized for both sponsors and seekers to align with NA principles.
-
Tailored Solutions: Features designed to facilitate the process of matching sponsors and seekers based on compatibility.
Formative Research
Synthesizing Insights
Brainstorm and Ideation
Prototyping
Evaluation
01 Formative Research
UNDERSTANDING THE PROBLEM SPACE
Overview
Through a combination of observations, interviews, and literature reviews, we gained valuable insights into user behaviors, motivations, and challenges. Our goal was to gain a deep understanding of user behaviors, needs, and pain points before beginning the design process.
Preliminary Observations
In this section, we describe the initial observational studies conducted to gain firsthand insight into the environment, user behaviors, and workflows within the problem space. By attending and observing the 12-step action in person, we immersed ourselves in the natural context of the users.
This experience allowed us to witness authentic interactions, understand the dynamics of the process, and identify potential areas for improvement. These observations formed the foundation for our research, helping us establish a baseline for deeper exploration and informed decision-making.
User Research & Data Collection
This section focuses on the user research phase, which includes structured interviews, surveys, and data collection activities designed to gather qualitative and quantitative insights. By engaging directly with users, we explored their goals, pain points, and expectations. The findings from this phase informed our understanding of user needs and allowed us to validate assumptions made during the preliminary observations. These insights served as a cornerstone for the subsequent design and development phases.
02 Synthesizing Insights
DEFINING THE USER NEEDS
Overview
This section highlights how we transformed raw data into actionable design decisions. After collecting observations and feedback, we organized and analyzed the information to identify key patterns and user needs.
Using tools such as affinity diagrams, personas, empathy maps, and key user requirements, we synthesized the findings into a cohesive framework. These insights provided the foundation for our ideation and design process, ensuring that every decision aligned with user goals and expectations.
Affinity Diagram
-
After gathering qualitative data from interviews, site visits, and literature reviews, we used the affinity diagram to group similar insights.
-
Key categories that emerged included:
-
Anonymity Concerns: Both sponsors and sponsees emphasized the importance of maintaining privacy.
-
Usability Challenges: Users expressed a need for a straightforward, easy-to-navigate system.
-
Trust Building: The process of pairing sponsors with sponsees required mechanisms to build confidence in compatibility.
-
Task Simplification: Sponsors sought tools to streamline sponsorship management, such as tracking progress and setting goals.
-
-
This exercise not only clarified the priorities of our target users but also highlighted gaps and opportunities in existing digital solutions.
Personas & Empathy Maps
We created personas to represent key user groups, helping us understand their goals, behaviors, and challenges.
Empathy maps were used to capture the users' thoughts, feelings, and pain points, ensuring we designed with a deeper understanding of their experiences.
These tools guided our design decisions by keeping the focus on real user needs and perspectives.
03 Brainstorming and Ideation
GENERATING AND REFINING IDEAS
Overview
In this phase of the project, we used storyboards and concept sketches to visualize and communicate key aspects of the user experience for the NA app.
The storyboards helped us outline specific user journeys, highlighting critical interactions and potential pain points for both sponsees and sponsors.
Meanwhile, concept sketches served as initial representations of the app’s interface, allowing us to explore design possibilities and layout ideas.
Key User Requirements
We identified the key user requirements through research and user feedback.
These included ensuring that the sponsee interface was easy to navigate, allowing users to quickly find sponsors and complete assignments.
For the sponsor interface, we prioritized the visibility of their sponsees’ progress and the ability to add new assignments efficiently.
Both user groups required intuitive navigation and clear, visually distinct buttons for important actions.
These requirements were designed to improve usability and enhance the overall user experience for both sponsees and sponsors.
Storyboards
Storyboards were created to visualize key user interactions and scenarios. These storyboards helped us map out the user journey for both sponsees and sponsors.
By illustrating the process of finding a sponsor, completing assignments, and monitoring progress, we were able to highlight critical touchpoints where users interact with the app.
The storyboards provided a clear visual representation of the app’s flow, helping us identify potential usability issues and opportunities for improvement in the user experience.
This tool was instrumental in ensuring the design aligned with user needs and expectations.
Concept Sketching
This process involved quickly visualizing design ideas to explore different solutions for the app’s interface.
By sketching concepts, we were able to iterate on various layouts, features, and user flows, helping us refine our design direction before moving on to more detailed wireframes.
These initial sketches served as a foundation for brainstorming and informed our final design decisions.
​
​
04 Protoyping
FROM SKETCHES TO SCREEN
Overview
This section details the development of interactive prototypes, ranging from low to high fidelity. These prototypes helped us test assumptions, gather feedback, and iterate on our designs effectively.
Low-Fidelity Designs
The low fidelity design stage focused on creating basic wireframes to outline the app’s structure, user flows, and functionality.
These rough drafts helped us visualize the core interactions and overall layout of the interface without worrying about detailed visuals.
By simplifying the design, we were able to quickly iterate on the layout and make adjustments before progressing to more complex designs, ensuring a solid foundation for the final product.
High-Fidelity Screens
​The high-fidelity screens phase involved refining the design with detailed visual elements such as colors, typography, icons, and interactions.
These screens offered a realistic representation of the final app interface, showcasing how it would look and feel in its complete form. High-fidelity screens allowed us to focus on fine-tuning user experience and visual appeal, ensuring the design was both functional and aesthetically engaging.
05 Evaluation
LEARNING FROM USERS AND EXPERTS
Overview
This section outlines the evaluations conducted on our app through user testing and expert reviews. We used the think-aloud technique with sponsees and sponsors to identify usability issues, such as navigation difficulties and unclear button placements. Expert evaluations, based on Nielsen Norman's heuristics, revealed additional design flaws, particularly with flexibility and consistency.
Key insights include the need for improved navigation, clearer course identification for sponsors, and better access to essential features. Moving forward, we plan to refine the UI and conduct further evaluations with a broader user base to ensure the app meets the needs of both sponsors and sponsees in their recovery process.
User Evaluations
We conducted think-aloud evaluations with four participants, separated by their role in the app: two sponsees and two sponsors.
The sponsees were asked to find a sponsor and complete an assignment, while sponsors were tasked with checking a sponsee's progress and adding an assignment.
These evaluations helped us identify usability issues, including areas that were confusing or difficult to navigate, and highlighted where users struggled to complete tasks.
Expert Evaluations
As a team, we conducted Heuristic evaluations using Nielsen Norman heuristics to assess our app's usability. We identified several issues, with five out of six being minor (severity rating < 3).
Most of the issues were related to three key heuristics: User Control and Freedom, Flexibility and Efficiency of Use, and Consistency and Standards.
Key Learnings and Next Steps
Key problems identified during evaluations included issues with navigation, such as button design and placement, particularly on the sponsor screen. The "My Modules" and "Upcoming Tasks" sections also lacked clear pathways, leaving users unable to easily access detailed content. Additionally, sponsors struggled with identifying and organizing their created courses.
​
If we had more time, we would prioritize addressing these issues based on feedback, while maintaining the overall minimal and aesthetic UI design, which users found easy to use. Future steps would include more evaluations with sponsors, sponsees, and recovery professionals to refine the design and ensure it meets the needs of our target audience.