rü anxiety forecast
A UI/UX Case Study
You’re in a meeting, and you start to feel tightness in your chest. A cold sweat. Yawning to try to make sure you’re getting enough oxygen, which is never enough, and you overcompensate by breathing too much and too quickly.
A.) Are you going into anaphylactic shock although you don’t have any allergies?
B.) Is it a heart attack?
or
C.) Is it your generalized anxiety disorder sending you into fight or flight mode even though your day has been relatively benign?
In all likelihood, if you have a history of anxiety, the answer is C, but it can be hard to accept that it’s all in your head once the feeling of impending doom goes too far.
What if there was a way to use signals from your body to forecast panic attacks, giving you the ability to get ahead of them by using your coping skills before you spiral out of control?
Problem
Anxiety attacks can be debilitating. The technology to predict spikes in stress/anxiety exists, and doctors sometimes prescribe various Biofeedback devices to track changes in the human body to track what happens to them during stressful situations.
Unfortunately, for thousands of Americans who do not have health insurance or who are underinsured, their access to innovative mental health resources are extremely limited.
There are plenty of mental health apps out there but many of them are journaling heavy, which isn’t necessarily easy on a mobile device.
RESEARCH
Delving into research was a bit new for me in the design process. I will be the first to admit that I don’t have an analytical mind — personally, I’m a bit more intuitive or “feelings” based (hence this app idea.) But, having evidence for what users would want from an app like this was very important.
User Persona (Who is this for?)
Survey
Would people even be interested in an app that predicts panic attacks & helps guide them through it?
48/60 YES
12/60 NO
Those who said no emphasized that they don’t want something monitoring them throughout the day because they don’t trust corporations, etc. Fair enough!
If they were okay with a device monitoring their vitals to get a head start against a panic attack, some of them had ideas for what would be helpful (the bolded suggestions came up more than once):
“Talk to other users quickly via chatroom sort of interface”
“Get connected to people with similar issues to feel less isolated”
“Breathing exercises”
“Sensory reminders (touch, taste, smell) for grounding”
“Measurements of hormones, breathing, etc”
“Reminders of what worked in the past” (with evidence?)
“Healthy coping mechanisms”
“Find a quiet place prompt followed by white noise”
“Alert a loved one (if severe)”
“Emergency button”
“Animations + simple mantras”
“Guided biofeedback”
“Emit a super low vibration that helps steady heartbeat” (by redirecting focus)
Solution
An app that is connected to an apple watch that gauges/predicts an anxiety attack using biofeedback and prompts users with helpful options, hopefully reducing costly emergency room visits when they are not necessary.
· Easy to use — works in the background while the watch is worn and only sends notifications during anxiety spikes
· Offer coping methods such as breathing exercises, meditation, music/sound
· Automatic/easy check-in rather than a questionnaire or journaling like other apps — meant to be supplemental rather than taking over a big chunk of user time.
HOW rü WORKS
- Download the app and sign up with a username and password
- Complete the onboarding survey which helps rü detect warning signs via the Apple Watch (elevated pulse, raised/lower body temperature, erratic movements, etc)
- Allow rü to track via Apple watch & send notifications
- Use helpful visual aids for meditation and breathing to calm down
- Easily feel a little more in control with a low-pressure app!
Competitors
Breathe (App) — An Apple Watch connected app that provides guided meditation while tracking heart rate.
Happify (App) — Games / positive habit teaching app.
Headspace (App) — The app includes “mindful moments” to keep you present throughout the day, as well as mini-meditation exercises for a quick mental reset.
Mightier (Game) — An innovative game that uses Biofeedback to track a child’s stress level while playing. When their stress gets high they need to use their breathing and other coping skills to get it back to an ideal level to continue playing.
BRANDING
Name
When discussing the name, people generally preferred a really easy, short, memorable human name to interact with — some examples including Lou, Skye, Bray, Gem, Gia, Drew, Jade, Rain, Luna, Quinn, Star, Val, Zoe, Aja, Minka, Tia, Zoe, Uma, Ruth.
Then I remembered a nickname I heard for Ruth, Rue, and realized I could do that accent idea better with an umlaut, Rü. “rü” in all lowercase seemed aesthetically pleasing to me, and when I checked with some classmates they agreed it was satisfying somehow and would probably give me some fun design/animation opportunities.
Not to make this incredibly long-winded, but I then typed “rü” into my web browser to see if an app by that name already existed. It didn’t! And I ended up finding something cool:
RÜ is shorthand for the German word “Risikoüberwachung,” which translates to “Risk Monitoring.” This is just the type of happy coincidence I crave.
Logo
To avoid obvious cliches (a brain + another thing, one of the many circle logos as seen above, etc) I wanted to come up with a simple ligature wordmark, especially since the name ended up being only two letters.
Final Logo
Design Process
After the logo was at least on its way to completion, the rest of the styles came together a bit easier. Because it’s an app for people with anxiety, and its purpose is to help the user become less anxious, bright, jarring colors were out. Instead, I chose a calming, muted pastel palette with pink, teal, off white and gold. I also wanted to avoid being too sterile or clinical and sought to make it really friendly and cute.
Style Tile
Card-Sorting & User Flow Chart
WIREFRAMES
Part I: Sketching
An important part of this process was trying to get ideas rounded out as much as possible before jumping into the whole thing. That meant lots of lists, sketching, and more sketching.
Part II: Wireframe in XD
Once we felt confident in a direction we could jump into low fidelity wireframing, which essentially lays out the user flow without being fully designed yet.
Default vs Dark Mode
Easily being able to switch to Dark Mode is incredibly underutilized so it was important to me that there be a really easy spot for the user to switch between the two. Bright lights can be offensive when dealing with anxiety or if someone is otherwise unwell.
PROTOTYPE
This was my first time working with the auto-animate capabilities in XD and it was really exciting to see it come to life a bit with the micro-animations possible right in the program. In the end, the app is simple and friendly.
Here’s the app in action, showing the onboarding process and the guided breathing component.
iPHONE
APPLE WATCH
Here is the apple watch going through the alert and guided breathing.
CONCLUSION
This was a very engaging, full semester project. I learned a lot about both design research and UI/UX, and of course, that means that at this point there are a lot of things I would change about my design and my process. Creating this has absolutely changed the way I think about UI/UX and I feel more confident for future projects.
Credits
Designer: Alexandra Dodge
Professor: Abby Guido
Institution: Tyler School of Art + Architecture: Graphic and Interactive Design
