Hi-Fi Prototyping [FINAL]

Hi-Fi Prototyping

This is a development of my previous prototype design. It displays valid and sensible content, links, videos and other data. However, this may not be the exact content that the actual final App will contain. In the phase of prototyping we design dynamic pages of our product and make it work with interactivity. This is the best phase to test and improve your designs.

Relationships of App pages

The Graphics of the App

The Master page of the App

The content of this page will be displayed on each and every other page of the app. You are only able to amend this content from the Master Page. You cannot edit these elements in other pages.

Below, you can find a video of my interaction with this SCaRF App using my local wifi to publish it to my computer.

https://www.youtube.com/watch?v=WUsl7XZJlgI&feature=youtu.be

Moodboard

Moodboard

A “Moodboard” is where I put together different items that will help me develop my ideas in terms of design and layout of the product. This helps a lot with branding your product and the choice of fonts, colours, logos etc. is very important as it boosts to the visual design. 

Lo-Fi Prototyping

Storyboard

Storyboard

Functional & Non-Functional Requirements

Functional & Non-Functional Requirements

Functional Requirements: The App should enable people to Donate in a safe way and provide support through different ways. For example one of these is by hearing other people’s stories who are survivors of Skin Cancer so that the audience can be more optimistic about their own situations. The App will also provide the details of SCaRF and a few protection tips. The content must be clear at all times.

Data Requirements: There will be many different kinds of data needed for this app to be delivered in an effective and efficient way. There should be clear blocks of text, articles, good quality images and videos. Also, for achieving an interactive app, navigation and buttons should be clearly displayed and correctly designed. More specifically, the Donation link should really look like a button so that the user will know that it is clickable. Any input boxes (eg. In Share Your Story section) should have the feel of clicking on them and start writing.

Environmental Requirements or Context of Use: The context of use for this app has to be flexible. The app will be designed to be used in many different occasions and environments. For example, the user could be sited in a room using wifi or even in the bus using 3G. SCaRF App can only be accessed when there will be internet connection so that the user can view the latest updates. The app will be expected to operate at least at the places with free wifi, such as hospitals or cafes. More about this topic have been covered in PACT analysis.

User Requirements: The intended user groups will be people of any age that have access to a new generation mobile device that works with apps. Some of these people might be Skin Cancer patients, nurses, doctors or friends & family of patients. As long as a person is flexible and knows the basics around technology, he/she will be able to access and use this interactive app.

Usability Requirements: Providing we have the expected audience using our product, we will want to measure and improve the following: Integrate Payment, Conversion Rate, Total Visitors, Bounce Rate, Engagements, information & Knowledge.

Feedback

Feedback

& What Do I Need To Change

I had a chat with Mrs. Praminda one day in class and got some feedback on my work so far. Firstly, we discussed how the app should have a communicative design. After I shared my idea with her and she gave me some tips on how I can improve it. Mrs. Praminda suggested that I could provide choice of a few emotions for example “I Just Lost Someone” or “I Just Found Out I Am A Skin Cancer Patient”. Then, I furthered improved my idea and send her an email. The feedback that I received from that email is the following.

  From the features you have described below it seems that you are trying to recreate the SCaRF website – this should not be the intention for the app. 

The app should be very focussed on a few specific features. 

Also please note that you are not required to develop the app – just do the designs for it – we are looking only for a hi-fi prototype. 

Perhaps you could just concentrate on the app being one to support friends and relatives of those who have lost loved ones to skin cancer – so include the ability for them to share their feeling – and allow other people to respond with encouraging messages – as you described:

Feelings (This will be on the Homepage and will give choices to members to pick from "Sad", "Uncertain", "Hopeful", "Positive" etc. Accordingly to what they feel at the moment they open the app, they can choose and some phrases will appear on the screen to make them feel better or support them even more)

Your Stories (Videos and Articles about people's stories to inspire and give hope to new patients)

If you design just this and do it really well, then it will be adequate. 

After this feedback, I started amending my older idea and I designed a second series of Prototypes to show the changes. You can find these Prototypes within the next few posts.

Sketching

Sketching

My first attempt to visualise how my App will look like

What I did wrong in these prototypes is that I did not include a Back button and that some of the pages do not have titles.