Panic Mechanic

Adobe_XD.png
Adobe_Illustrator.jpeg
A mobile app which uses biofeedback to help users understand and manage their panic attacks.

Role:

UI/UX Designer

Platform:

iOS/Android

Date:

January - May 2020

Team Size:

4 main team members

2 mentors

Overview:

Rad Magpie was contracted to port the Panic Mechanic app to Android, and to propose a potential UI/UX overhaul. I was initially brought on to do a visual design and branding overhaul, but about 2 months into the project I was reassigned to create the UX proposal. This involved examining the original app for pain points, creating user stories for the redesign, constructing a new user flow and app IA, and ultimately creating a prototype in XD to show the client how the redesigned app would function.

Visual Design:

Panic Mechanic B&W Logo
Panic Mechanic B&W Logo

Final version of the panic mechanic logo in black and white. Colors were never finalized because I was moved to UX.

press to zoom
Paper Sketches
Paper Sketches

A little bit of the early logo ideation, trying to get a wide variety of ideas down quickly, just to give as many directions as possible before diving into polish and detail.

press to zoom
Logo Gradient Color Test
Logo Gradient Color Test

Created a very different test style to give a greater breadth of choice when getting feedback. I added gradients and varied colors for more visual depth, somewhat inspired by the areas of the brain activated in a panic attack.

press to zoom
Panic Mechanic B&W Logo
Panic Mechanic B&W Logo

Final version of the panic mechanic logo in black and white. Colors were never finalized because I was moved to UX.

press to zoom
1/6

UX Redesign:

Original_Storyboard.png

I began the redesign process by mapping out the flow of the original app to help visualize the structure. The team and I used this alongside the app to identify pain points and interactions which could be streamlined.

I took all our notes on frustrations with and pain points in the app, combined with my own accessibility and anxiety research to create a set of rules which I could follow in the redesign. These were used both to identify parts of the old design to remove/change and to guide my decisions when creating the new structure.

  • Provide effective & cozy feedback that the user is placing their finger correctly

  • Reduce movement required in app interactions

    • Or, gamify interactions to make movements more fun?​

  • Make buttons/interaction more appealing & friendly​

  • Simplify and clarify language

    • Remove anxiety provoking language and make tone more friendly (without feeling condescending)​

  • Make user steps & feedback clearer/more explicit​

  • Reward and encourage users on event completion

  • Focus only on necessary information during the attack

    • Gather additional data on completion?​

    • Make necessary info more immediately visible to the user (heart rate)

  • Make UI feel more like a "human partner"​

  • Check in with user as they go to make the exit point clearer

  • Remove/minimize anxiety-provoking elements (timer)

RoughDraft_CoreFlow.png

With the rules established I created a storyboard for the redesigned core interaction loop. Beyond the rules, I focused on having constant heart-rate tracking as that biofeedback was the main point of the app, but only showing it relative to itself so as to reduce the potential stress of an explicit number. I also added the breathing guide as having something/someone to lead breathing is one of the most helpful things for a panic attack according to my research.

User_Flow_Final.png

Once the core loop of the game was solidified I created a user flow for the entirety of the app. This mostly followed the original's structure but there were some minor tweaks to reduce friction and the history page was expanded to allow users to filter their information. The raw data already existed, but giving users this additional layer of control was designed to make that data more easily interpreted (and thus used) by the user.

I had been working in Adobe XD throughout the project, creating mockups of the original app and then mockups of my own proposals as I went along. This helped demonstrate the ideas in my documentation to team members who were not as versed in UX, which gave a lot of valuable feedback. It was also important to my own growth as I was I had never worked in Adobe XD (or similar programs) before and through this project I gained a lot of knowledge and confidence with the program.