Finished Mockups

So I spent yesterday and today creating the newest mockups in Photoshop. I didn’t think I’d get them all done because there are so many screens! (19 in fact) As I mentioned in my previous post, I had a bunch of images to use for the backgrounds and some extras in case they didn’t work. Surprise surprise, most of them I had didn’t work, so I had to go searching for more again but I got them all in the end.

I’m not really 100% sure about the cursive font I used, Sacramento. I originally tried the font combination of Pacifico & Josefin Sans but neither really worked, so I tried Sacramento and Montserrat Light and while I loved Montserrat, I’m still on the fence about Sacramento. I asked a few people and one suggestion was to make the U in Unwind lower case as it’s quite big compared to the other letters – I tried this and you can see that in some of the screens.

I also brought the screens into Mockingbot to make them interactive, you can view that here.

Below are the completed screens:







Overall I am really happy with the new design. I think it looks really well! I’m sure there will be a few things to change but that’s normal.

Name brainstorming

I took Daniel’s advice and I opened up Word, typed in “calm” and used the thesaurus to help find similar words. I got a whole bunch of different words and threw them into a mind map.


Out of them all, the ones I liked were:

  • Pacify
  • Unwind
  • Breathe
  • Distract
  • Serenity
  • Control
  • Harmony

I particularly like Unwind out of them all – it’s simple, and the word relates to the app. Next I took each of these words and entered them into an Irish dictionary to see what they were in Irish and if they would work. Some didn’t directly translate into Irish and I don’t really think any of the others would work for the app.

irish names.png

For now, I am going to stick with Unwind and see what Daniel says on Friday. I’ve asked a few people their opinion on the name and mostly have gotten positive responses. Some have said you wouldn’t really be able to tell it’s an app for panic attacks from the name, which is true, but the meaning behind the name relates to the app, and a lot of names for apps and other things aren’t extremely obvious as to what they are about.

Background Pictures

Before I start doing my mockups in Photoshop, I wanted to have my photos for the background sourced first. Most of the images are either of the sky or sand – this is because they would be the best to use when there is text above them so the text is still readable and clear. I also went with ones with a lot of blues in them to match the colour scheme.

I sourced all my images from Pixabay as they are free to use. I downloaded a lot of photos but I won’t be using them all – I just wanted a bunch of them so if some of them don’t work I still have more to use.

New Wireframes

Following on from my previous post, I had to change some parts of my wireframes and make it interactive.

I had to add a home button into some screens, take away the “My Anxiety: 5” and also add a new screen.

Adding a home button:

                     BEFORE                                                              AFTER

11-0_rateyouranxiety      11-0_Rateyouranxiety.png

Getting rid of My Anxiety: 5

                    BEFORE                                                                  AFTER

16-0_realisticthinking       16-0_RealisticThinking.png

New screen


After the user has completed the step by step panic attack process, they’ll be given a suggestion to use the other features instead of going back to the home page.

Here’s the link to the wireframes so you can see the interactivity:

Supervisor meeting with Daniel #4

Today I met with Daniel again to speak about the project. Personally I felt I didn’t really have a lot to show, but Daniel seemed happy with my progress.

I showed him the wireframes I created in Mockingbot and talked him through each one. He was happy with these and gave me some tips, like adding a home button on some screens, getting rid of the “My Anxiety: 5” on the panic attack feature, as well as adding a new screen after the user finishes the step by step process.

We also spoke about the design and the use of background images. What we decided on was to have the image on the main screen, then for menus etc, it would be faded out so the text is clearer. Another topic we touched on was the name. I still don’t have a name for the app, and it’s something I need to decided ASAP as my design and style could change based on the name. Daniel said to research words associated with panic attacks, the symptoms, the state you’re in after experiencing one, and then get use a thesaurus to get related words.

So for next week I need to fix my wireframes and make them interactive. I need to spend some time thinking of a name – but if I can’t decide on one, I have to go into mocking up the screens in Photoshop.


With regards to my relaxation audio, I was unsure whether to just source the exercises online or to record myself speaking through the meditations. I mentioned this to Daniel last week and he showed me a site called Fiverr, where you select a person’s voice, give them the script and then they record it for you for under 5 euro.

I had a proper look into it and white the price is good, for pretty much all of the voice actors, that money will only get you about 100-200 words maximum. Based on relaxation scripts I had looked at, they are at least 250-300 minimum so it could cost me up to 15 euro per exercise to get it recorded. I looked at other sites that do the same thing but they are a lot more expensive (some people charge $200!)

I am not really sure whether to go ahead and do this with Fiverr (the cheapest option) because I planned to have a good few different exercises in that feature, or else just do one and source the rest.

Playing around with colour

My next step was to try out colours on my wireframes to see what kind of colour scheme I was going to go ahead with. I had created my wireframes on Mockingbot, but when I tried to incorporate colour into it, it wasn’t working the way I needed it to.

The design on my app includes a background image on each screen of a relaxing landscape – and to be able to test different colours properly, I needed to make sure they would work with these different backgrounds. One of the criticisms from my prototype was that the text was hard to read on these backgrounds. To combat that, I had two choices: I could either add a white overlay on top of the image, or else blur the image. The way Mockingbot works, it was a bit harder to do this, so I quickly did them up on Photoshop as I knew it would be quicker.




As you can see, I tested it with white, black and blue. Because of the different backgrounds, I feel that there will be a lot more of black/whites and less blue so the text can be easily read. I also tested the image with a white overlay, a blurred image, and one with just the image and no effects. Since it was done quickly, I didn’t add any icons and the font is not the chosen font I want to use.

To be honest, I don’t really know which is better as it all depends on the images I use as backgrounds. I also don’t know whether to gather images that have a similar colour scheme or landscape.