Second set of wireframes

Following on from my last supervisor meeting with Daniel, he told me I had to have my feature list set in stone as well as a new set of wireframes. Over the past few days, I have focused on both of these.

For wireframes, I did 1 or 2 different versions/layout of each screen, and added in my screens with the newest features.

Wireframe 1:


The Home Screen will simply have the Control Your Panic Attack feature displayed immediately when you open the app, then a circle button that you press to begin. I’ve tried to incorporate circles as much as possible in these wireframes as I think circles are softer and nicer than squares or rectangles. They’re also more “trendy”!

Next, you have to rate your anxiety. I have three separate layouts for this. First is each number in a circle, with the feeling underneath. The only problem with this is that it will be uneven as they are set out in rows of three, and with 10 different ratings the 10th will be on the bottom on its own. Another layout is a big circle with the rating inside it and the feeling underneath. To select a different rating, you swipe to the left, then press the circle to select your rating.

Wireframe 2:


The third layout I have for Rate my Anxiety is very similar to the one in my prototype – all listed underneath each other – instead I have incorporated circles. Out of all three, I think the second one is my favourite and would look the best.

The first step in this feature is simple instructions. I tried to think of ways to make this more interactive instead of just plain boring text. However, I couldn’t really think of anything that would work, so I just left it as it is in my prototype.

The first layout for the Breathing exercise is a big circle with a dot on top. The dot will move around the circle for the length of time the user is supposed to breathe in, out, or hold, which would be 4 seconds for each. This will be repeated 3 times, so after 36 seconds, the next screen will appear automatically or a “next” button will appear.

Wireframe 3:


The second layout follows the same idea as the first, but instead of a circle, it’s a square. This idea was inspired by breathing GIFS and breathing apps that I have come across.

The third layout has a bunch of circles and instead of a dot moving around, the circles move in and out along with the length of time the user has to breathe in, out or hold.

Onto the first distraction questions- there will be a few different questions that the user has to answer. Originally, they had to answer them in their head but I added some interactivity where they can select answers for some of the questions, e.g. how many windows can you see? The numbers will be displayed underneath the question.

Wireframe 4:


The next part of the distraction is a new idea I came up with – a random (probably nature or a picture of a landscape) will appear, and the user will be asked to count how many things there are in the picture, e.g. count how many trees are in the picture. There won’t be any answer to select here, the user will just do it in their head.

The next new feature is Realistic Thinking – the user is told to ask themselves questions relating to their panic or anxiety. These types of questions will help them realise that the feelings/thoughts they experience during a panic attack will not happen and are only temporary.

Lastly, this feature ends with a positive thought that will be random. The user will then select next and it will bring them to rate their anxiety again. If it’s 5 or above, they will repeat the steps.

Wireframe 5:


Onto the Breathing feature – I did up two layouts for the main screen. First, again with circles, the screen is split into four circles for each of the categories.

The second layout is just a list for each category, similar to the one in my prototype.

When you select a category, e.g. Deep Breathing, a list of the different exercises are shown.

Wireframe 6:


When you select a breathing exercise, a description of the exercise will be displayed at the top, and then the breathing circle (or whatever of the three breathing layouts I choose) underneath. Once they are done with the session, they can press finish.

The relaxation layouts are similar to the breathing – either a springboard layout with four circles or a list layout for each category.

Wireframe 7:


Once you select the category, each exercise will be displayed with a description for each.

The relaxation exercises will be audio based, so when you click into the exercise, a play button will be displayed, with a volume bar underneath.

Again, the distraction layout was done in springboard with 4 circles for each category.

Wireframe 8:


The distraction feature was also laid out in a list with each category.

One of the categories of Distraction is music, and each piece of music will follow the same layout as the relaxation audio.

I have to show these to Daniel this week and get feedback on them. I’m sure changes will be made, so once these are complete, I can start on the mockups.


One thought on “Second set of wireframes

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s