Solution for Panic Attack
Panic attacks can occur unexpectedly, leaving those affected feeling helpless. This case study walks you through my design process for an app designed to provide practical assistance to individuals experiencing panic attacks
Research
I adopted an academic and scientific approach for my research, delving into scholarly articles, publications, and conducting interviews to gain comprehensive insights
Definition
By analyzing the insights through an affinity map, I developed a clear user persona and mapped out a proto-journey, leading to the formulation of my "How Might We" question
Ideation
Utilizing the Crazy 8's technique, I brainstormed a variety of concepts, which facilitated the development of a targeted solution for users experiencing panic attacks
Identity & UI
I created a cohesive brand identity, accompanied by an extensive UI Kit, and progressed from a paper prototype to high-fidelity screens to visualize the final solution
Setting Up the Project
For this project, I allocated 7 days, following the Design Thinking process to ultimately produce a clear concept and a set of high-fidelity UI screens using Figma.
Before diving into the design, I organized my workflow by setting up two key tools: a FigJam board for capturing rough ideas and notes, and a Notion page to document the process with a more detailed and chronological structure. This approach helped me maintain a comprehensive overview of the project, ensuring that everything was well-documented and ready for sharing by the end.
Scientific Approach
Affinity Mapping
Drawing on the knowledge gained from my research, I created an affinity map to organize and categorize my findings, clustered into different categories: mental processes, control techniques, social effects, characteristics, external perspectives, and physical effects.
From this process, I distilled several key insights that would inform the next steps:
During panic attacks, individuals often lose the ability to think and act effectively.
People in the vicinity are typically untrained and unprepared to provide adequate support.
Those with panic disorder experience social conditioning before, during, and after attacks.
It's crucial to redirect attention away from the perceived danger.
User Persona and Journey
To effectively identify my target user, I first created an empathy map outlining what individuals experiencing panic attacks think, say, do, and feel. This process led to defining the following User Persona.
Define the Problem
The Idea
To develop an effective solution, I employed one of my favorite techniques: the Crazy 8's. This method involves folding a sheet of paper into eight sections and, using a timer, brainstorming quick ideas—one idea per minute. This process resulted in a collection of initial rough concepts that would later be refined, serving as inspiration for the final solution.
Prototyping
Before building the prototype, I needed to visualize the concept by outlining the user journey within the application. To achieve this, I created a user flow for the main feature.
In this flow, I represented two scenarios: one where the persona is alone and another where they are accompanied by someone else. For the final prototype, I chose to focus on the path where the user needs to manage the situation independently, aligning with the logic of the proto-journey presented before.
The concept includes several key phases:
Assessment Phase: To direct the user flow effectively.
Breathing Exercise: A foundational component of relaxation techniques widely recognized by psychologists. This exercise targets common symptoms of panic attacks, such as hyperventilation and rapid heartbeat. By guiding users in regulating their breathing, I aimed to alleviate these symptoms while also providing a distracting and interactive activity that that promotes the development of long-term breathing skills.
Guided Mental Journey: The primary feature of the app, leading users through a calming scenario to help them detach from perceived dangers.
Breathing Exercise Recap: Reinforcing the initial exercise to further aid relaxation.
Follow-Up Activity Suggestions: Offering users additional resources and activities to support their ongoing well-being.
The next step was to create the paper prototype.
Starting from the homepage, when experiencing a panic attack, Alex can choose to begin his journey. After answering a screening question, he sets his breathing. Next, he can select the audio mode and use headphones for an optimal experience. Depending on the severity of the attack, the guided voice experience begins, varying in length to help Alex mentally transport himself to a peaceful place. A brief breathing exercise follows, concluding with multiple suggested follow-up activities.
To evaluate the validity of the concept and the prototype, I conducted several tests that provided valuable insights, which were used to refine the experience and complete the UI.
Brand Identity
Before finalizing the design process with high-fidelity screens, I developed a simple yet thoughtful brand identity. I began by defining the app's personality with three key characteristics: Simple, Natural, and Approachable. To capture these qualities, I created a moodboard.
Next, I brainstormed a name that would convey the desired feeling: Silent Mind. This name reflects the app's primary purpose: helping users detach from their mental perception of danger.
To solidify the brand identity and provide a foundation for the high-fidelity screens, I designed a comprehensive UI Kit using Figma. This kit includes:
A complete color palette, featuring Blue and Purple as primary colors and Papaya as a secondary color, all sampled from the mood board.
A typography hierarchy with "Jost" as the selected font.
An icon pack sourced from "Boxicons."
Primary and secondary buttons for calls to action (CTA).
Custom illustrations created with Adobe Illustrator, incorporating grain and gradient effects to convey a sense of three-dimensionality.
To explore the extensive UI Kit, check it out on Figma.
High Fidelity Result
To represent the final solution, I designed three main screens using Figma. The first screen is the homepage, which serves as the starting point of the flow. Here, users can find the primary CTA to begin their journey during a panic attack.
The second screen focuses on the breathing exercise, allowing users to engage in a guided activity. Additionally, I created an interactive prototype to showcase the animations involved in this experience.
Finally, the third screen features the guided mind journey, which is the app's main functionality. Users can listen to the audio guide, switch to reading mode, or adjust the volume as needed, providing flexibility based on their preferences.
