User Testing

I tested my app when it was complete with seven different people to ensure the app worked the way it is intended to, and to see if the user is able to navigate and use the app easily and quickly.

Each user was asked to navigation through the entire app. They were encouraged to speak aloud as they navigated through it, and
mention anything positive or negative they
encountered.

Feedback was generally positive. Users like the design, simplicity and the colours. One user mentioned that the meditations were very calming and relaxing. Some negatives
included sizes of circles and instructions given. One comment that stood out was from a user who said there should be option to hear the instructions read out to you instead of having to read it all yourself.

test-1test-2test-3

Advertisements

Packaging the app using Cordova CLI

As mentioned previously, Phonegap Build has a app size limit of 50mb for a free user. To try to get under this limit, I reduced all the quality of my audio files. However, the quality was very poor.

I spoke to Daniel about this problem and he said using Phonegap or Cordova’s Command Line Interface (CLI) will combat the issue as there is no file size limit. It’s just a little harder to do than Phonegap Build, which basically does it all for you.

I tried out both Phonegap CLI and Cordova CLI and Cordova seemed to work better for me. I didn’t really know what to do, so I followed the Cordova docs as well as watching a very helpful YouTube video.

Firstly, I had to download Node.js, a server side JavaScript environment. I also had to download Android Studio & Java Development Kit, and create Environment Variables for these.

node

android studiojdk
Through Command Prompt, I installed Cordova and created a Cordova project. Since I developed for Android, I had to install that platform on Cordova.
Once my project was created, I added all of my files into the www folder, edited the config.xml file and started a build of the app through Command Prompt.

installcreate-cordovacmndcmdconfig

I ran into issues with my JDK that wouldn’t allow me to build the app. After some searching online, I found a solution, tried to build again and it was successful.

It went surprisingly a lot smoother than I had first expected. I think I prefer this way of building the APK as I am doing it myself, so I am learning more, and I have more control over the file sizes.

Icons and Splash Screens

Before I build my app, I had to create icons and splash screens for each different screen size.

Since I’m developing for Android, I had to look up the sizes for each icon and splash screen. I found the icons on Android’s Developer Guide and the splash screen sizes on Github.

I then went on Photoshop and created icons and splash screens. I wanted both to be simple, not too cluttered and to match the app itself. I used to background I am using for my Project Book, and used the same font for Unwind that I’ve been using throughout the app.

Here are the icons:

ldpi

ldpi

mdpi

mdpi

hdpi

hdpi

xhdpi

xhdpi

xxhdpi

xxhdpi

xxxhdpi

xxxhdpi

Splash screens:

ldpi

ldpi

mdpi

mdpi

hdpi

hdpi

xhdpi

xhdpi

xxhdpi

xxhdpi

xxxhdpi

xxxhdpi

Removing the menu

The menu on my app contained four links: My Favourites, Settings, Support and Sign Out. However after time, each of these four links were of no use because they had been removed from the app.

My Favourites was removed as it proved too difficult for me to figure out. I researched a lot and I simply just didn’t know how to execute it the way I wanted. After speaking with Daniel, he said to remove it if it’s going to be too hard. It’s not a huge part of the app anyway and really, there isn’t much use for it because there aren’t a huge amount of exercises in the app anyway.

The settings page was removed because frankly I did not need to have it. The only thing  I felt I could include was an option to turn the audio off, as I was planning to have audio playing in the background of some of the screens, but I decided against it.

The user isn’t able to create an account so the Sign Out link was pointless also.

All that was left was the Support, but I wasn’t going to create a menu just for that one thing. So I added the support under the More Exercises section.

I removed the menu, and instead I placed an info button on the index page:

info

Selecting this button brings you to an information page, explaining Unwind and linking to the Support page:

info-pg

For all the other pages apart from Index, I replaced the menu with a jQuery back button, making the navigation a bit easier for the user.

backbutton

Using CSS Media Queries

When testing my app on a phone and a tablet, my app looked a lot different on the tablet. Well it didn’t fill up the size of the device the way I wanted it to. I had completely forgotten that you need to change the width of elements to suit different devices.

I knew about CSS Media Queries, and I remember using them in a module a few years ago, but never really properly tried them out. I spent the whole day today fixing all the elements in my app so that fit the screen of the tablet the way it was intended. Initially, I thought it was gonna be quite hard but it was actually very easy, just took a while to get everything the way I wanted. It’s not perfect right now as I still have a few little things to fix!