Final Prototype

This final prototype is the last iteration before handing in my university degree. It took feedback from lots of user testing and the testing of the previous prototype. This feedback impacted the overall design of this prototype.

To begin with I added a homepage, login to or create account section and an introduction. There are many pages in these section but they look like this;

Once logged in they are greeted by a tutor who explains the basics like so;

Next the user is free to explore. they will be greeted with the homepage, and will notice if they hover on items they will see monuments from that country appearing. These screens are shown below;

Once a user has chosen a continent they will be provided with the flags of the contries there…

Once selecting that country they will be taken to the departures Lounge where they can begin that journey.

Once that experience has begun they will visit pages like the tourist information where they will learn about a place.

Next they go to the social page where they can send messages and play games with other users in that virtual chatroom.

Next up is learning languages, which can be seen here

Then to allow users to select their favourite picture of their frog in that place;

Talking to a penpal next;

The user gets to share the experience with a postcard;

After that the user gets ‘closure’ to their experience. They do this by participating in quizzes about that country to test their knowledge they have acquired throughout the experience. You can see this here;

 

Finally the user has a profile to explore that contains their profile, ability to customise their frog, friends, chats and store. You can see all of that here;

CMS: Client Prototype Testing

The current CMS is available to view here;

https://xd.adobe.com/view/63da3ffd-3f30-47b5-a331-917c16bbe4f2/screen/9b86018e-668f-4aaa-a574-e6d413cd5a39/Live-Edit-Mode

I gave the mockup to one of the regular users and this is the screen recording of their usage;

The feedback was really usful and this is what I learnt;

  • The upload page needs an upload button
  • Menu size needs adjusting a little

InVision – Final Verion Prototype

Creating my design using InVision, a live prototyping tool was very useful as it allowed my design to appear just like a functional site. Having designed the site to be the best of my ability, I didn’t feel by simply show the images did it justice, therefore I exported every possible combination of my design which came to a total of 19 because of the amount of different sections. I then used ‘hotspots’ to link certain parts of the image to another image, therefore, I have created a prototype of my design which is usable and ready to show to clients. Once I had got to this stage, it allowed me to discover issues that I had not found previously, firstly the text is not bold on the “Fluorescent Lightbulbs” in the peace side of the budget section.

1

Secondly when you scroll through the 10 most profitable companies in the US, I have missed the logo from number 5.

2

These are two small issues that I could easily go back to resolved. In line with simpleness the section in which you would purchase tickets works really well, but it doesn’t allow the user to confirm the price or ticket amount just after putting their card details in, this would maybe make a better experience for the user.

This also meant I was able to view the site from mobile devices on the web. I have been able to see a couple of instances where the design doesn’t work and may have to be re-imagined for mobile devices. The first example of this is the contrast of text over images, because the screen size is smaller and the text only slightly darker than the background image, it becomes a little harder to read.You can see this here;

3

Another mobile issue is the size of the buttons are a little too small to press on the mobile version, therefore would become a usability issue for the user, and would take away from the overall experience. You can see this here;

4

The actual working prototype is available here for your viewing pleasure;

http://invis.io/T71Y0V725