Rü: Anxiety Forecast
Ui/Ux, Branding- Art Direction
- Abby Guido
The purpose of this project was to create a solution for a problem using UI/UX after extensive research. As an anxiety sufferer and former social worker, I’m often drawn to mental health awareness and solutions, so naturally, I gravitated towards creating a UI/UX design project that centered around this issue. The concept of this app prototype was to help users manage panic attacks. The app is best used by connecting it to an Apple Watch. From there, it would monitor for key body changes as indicated in the onboarding process by using biofeedback.
RÜ: ANXIETY FORECAST A Case Study
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? 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 is 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, nor is it convenient to stop what you're doing and journal to ward off an impending panic attack.
User Persona (Who is this for?)
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.
Public Survey Results:
I took to Instagram and a few other social media sites, asking if anxiety sufferers would even be interested in an app that helped them detect their anxiety and help 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):
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
This app works in the background while the watch is worn and only sends notifications during anxiety spikes
Offer coping methods
Coping methods uch 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.
What's in a name?
When discussing the name, people generally preferred a really easy, short, memorable human name to interact with. "Rue" is a pleasant nickname for Ruth, 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.
How rü works
1. Download the app and sign up
2. Complete the onboarding survey which helps rü detect warning signs via the Apple Watch (elevated pulse, raised/lower body temperature, erratic movements, etc)
3. Allow rü to track via Apple watch & send notifications
4. Use helpful visual aids for meditation and breathing to calm down
5. Easily feel a little more in control with a low-pressure app!
Style Tile
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.
Card Sorting
In order to get outside understanding of how the user should flow through the app experience, we created card sorting boards using Miro. This way, we were not working entirely off of our own instincts. Normally, if we had been in a classroom setting this would be done with actual sticky notes!
User Flow
Once the card sorting activity was complete, we could move on to a proposed user flow. User flow is the path taken by a prototypical user on a website or app to complete a task. The user flow takes them from their entry point through a set of steps towards a successful outcome and final action, which in this case is leading the user to one of the helpful coping mechanisms.
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.
Wireframes
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.
High-Fidelity Wireframe
Once the overall order and design was blocked out, it was time to flesh out the rest of the screens and put together the full prototype.
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.
Watch Prototype
In addition to the phone app, this concept of course required the apple watch as well.
Prototyping
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.
Phone Prototype
Here’s the app in action, showing the onboarding process and the guided breathing component. Important note: The video is sped up a little for the sake of presenting so please don’t try to do the breathing exercise at this speed! :)
Watch Prototype
Here is the watch checking in on the user and prompting them to use the breathing exercise.
Thank you for taking the time to view my project! View full case study on Medium!