FV: Prototype testing

The user testing is really important as it allows me to develop an understanding of what my audience wants. This can be done throughout the design stage to ensure the design is almost perfect in the eyes of the user by the time it launches.

I created a mockup using the images for the website so the users can get a taste for the experience. Then I was able to give my target audience the opportunity to play on the experience, and get some feedback.

I was able to record the users usage and then play it back to them asking them questions about their experience. The screen recording is available to watch here;

Below is all the feedback I recieved to talking to my target audience about this early stage.


The homepage is the most important page of the website, it is the one they should feel most comfortable using. It is where they will spend a lot of their time. The users noticed a lack of animation on this page, which is really vital. On hovering over animals they should be animated so they actually do something. The illustrations of the landmarks and animals should all be hidden unless a user hovers over that specific continent.


While the profile is a very rough mockup, it is missing some key information. It needs  key information about that user such as age, nickname, country of origin and languages spoken. It should also include some information about their own and friends experiences on the website. This can include things such as postcards they have received, selfies they have take in various countries and their current ‘virtual’ location (the country they visited last). The store also currently doesn’t even exsist in any shape or form, so this needs doing. The editing of the frog is one of the key features and has not been implemented yet, this needs work. Should the frog be sat in a wardrobe at this point, or perhaps even a pond.


During the start of the experience it shows the user a flightboard like an airport as the main navigation. The user expected to be able to click it and get some functionality. The functionality they would like to see is details on the journey. Perhaps a map with the route planned, the closest airline, time taken to travel from A-Z and its rough cost. These popups have little interactivity, and users would expect them to have some at least. Editing of the frog is not available here yet either, this is important.


The information in the Tour Guide is way too small and needs rethinking, and in this case one of the users asked about Disneyland in Paris, so there is also the commercial side to the locations that need consideration.


During the language lessons the website should offer the user to move to the next question once they have answered one. The ability to have three words of the other language which could be linked


In the selfies page, it is a little unclear as to what is going on during this page, perhaps a short explaination would be nice. Also give the user to scroll through different users to see which one they want to talk to the most.


The social page is currently quite static, a user should be able to make their frog hop around the social page. Also none of the other designed frogs have been added into the experience, nor have the accessories.


The selfies page is a little inconsistant with the corkboard background, it can be changed to the blurred background used on the other pages, also the purpose of this section isn’t clear, and needs some more definition adding.


Add grid of postcards to allow user to select which one they want to send. Franks and stamps are used here alternatively, but in reality franks are applied over the stamps when they have been recieved at the post office to stop people re using the stamps. Franks could be added to only the recipient.

Additional notes

Sound Effects are missing from the entire experience and haven’t been considered yet. There should also be a system wide mute button.

Once user has gone through one stage they understand how to use the service, but before that they don’t. There is a possibility to have a guide throughout the experience. This guide can be the Godfather frog who can be available to have a dailog with throughout the experience. This is a method for the user to ask qustions about the experience, and a real way to collect feedback from users. Another method to remedy this is to have a short animated introduction where the user selects and names their from and then explains the backstory of the frog.

FV: Storyboard

The storyboard is roughly completed. It’s at this stage it is possible to understand the story of using the site to explore other sites and Languages.

The homepage is the first thing the user sees, is the world map. animated characters with animals assositaed with those countries are included. homepage.png

In the top left there is the branding of the site, and in the top right corner there is the character which the user can interact with. It is at the section the user can see their profile, chats, store of items and friends, they can also customise their character here. You can see this section below

Once the user has clicked on a specific continent they are interested in visiting, and exploring, they are presented with a grid of flags of countries from within that continent.


Once a country is selected, the user is directed to a splash page where they will see the country they selected. They will see the flag and a themed page which has a relevant font.


Once they have selected START on the splash page they are taken to the start page. On this page the user is shown information regarding the experience they are about to partake in. It displays information on weather, the location, key landmarks, photos of the users friends frogs in that place, events and the passport of the user. It even allows the user to select the customisations for their frog here in this section.


Once the user has selected start, they are taken to the tourist information screen, this portrays the backdrop of a key landmark with the Tour guide answering questions the users have, while showing them information about the landmarks, food and music.VT2.png

The next page is the social page, here is where the user is able to interact with others also visiting the same place. All users within the experience, on this exact screen would appear in this virtual field to socialise. They are able to chat, play games and explore each others profiles.


The next section is the language lessons available to encourage the image based learning about other languages through image association.VT4.png

The next part of the experience is to view the pictures of your frog at key landmarks around the country being visited. The user is able to select one to save to their profile, which would also appear in the first page of anyone else visiting this place.


The next part is where a user is randomly selected from the country the user is visiting, and they are given the oppportunity to send that user a message to say hello.


Now the trip is coming to an end the user is told to select a postcard to send to their friends. The postcard can be edited and customised then sent. This encourages the users to visit this place.VT7.png

Finally, the user is offered the opportunity to take part in a quiz regarding the place they just visited. This allows them to test their own knowledge.


The reading list: What I learnt

The art of project management
Book by Scott Berkun
 – Creative ideas can be made by everyone, not just by geniuses. Great ideas can be achieved by anyone, they just need to employ the right people.
 – Ideas can be overated. Just like how the idea of the lightbulb was 100’s of years old if you factor in the usage of fire an candles within the home. It was only with the right technology and know how was it possible to make the product.
 – When making a product, you will never make it entirely perfect on the first, second or even fifth attempt.
 – Revision is key to making a a great product successful.
 – ‘Ideas are made from other ideas’.
Undercover User Experience Design
Book by Cennydd Bowles and James Box
  – Design is the atc of playing god, they change the way we interact with the enviroment around us.
  – Scale is so big that small changes can effect thousands, millions or even billions users.
  – By using and designing for fast connections with top end handsets, we are excluding the users without this technology, the ones usually who aren’t western. Meaning that we are unethically becoming biased.


Science of Persuasion
  – There are six key parts to make a product interesting to someone. These are;
 1 – Reciprocity
2 – Scarcity
3 – Authority
4 – Consistancy
5 – Liking
6 – Consensus
Content Strategy for the Web (Voices that matter)
By Kristina Halvorson, Melissa Rach
 – Marketing, brand, social, earch engine optimisation, user experience and tecnology are all important factors of a successful business.
 – Prioritising the content strategy is vital.
Don’t Make Me Think: A Common Sense Approach to Web Usability
By Steve Krug
 – If a user has to think about about a function on a site, then it can be improved.
 – Consistancy, clear navigation, buttons should look like buttons

New technologies for professionalism


Digital Ocean


Digital Ocean is a great service for online hosting, this website gives you the options for multiple abilities. Monthly storage, processing, disk space and transfers are an advantage over other services such as GoDaddy. They allow you to have as many users as you would like, instead of being on a shared bandwidth with other developers. This is a reasonable and attractive service. They offer great services like 24/7 Support, Tutorials, Highly Available Storage, Lightning Fast Network, $5/Month, Flexible API, 512MB ram – 20GB SSD disk, 1-click install apps, Free unlimited bandwidth with the ability to deploy In Seconds.



Sendgrid is a service founded in 2009 that manages email marketing and can give real time analytics about the emails you send. It is an industry-disrupting, cloud-based email service to solve the challenges of reliably delivering emails on behalf of growing companies. It offers Transactional Email, Email Templates, SMTP Email, List Management, Powerful APIs.



Stripe is an online service that handles and tracks all online payments. Stripe is an Irish technology company, operating in over 25 countries, that allows both private individuals and businesses to accept payments over the Internet.It is also capable of handling inventory and stocking of items for sale.


If I need to use a store on my website this is a vital service I should use. pricing starts at $0, with free trials available, no hidden fees or lock-in and the first $50K invoices free.

Digitalising my Crazy 8s

The original crazy 8s post found here have been digatalised and imagined how the design intended them to look. The original crazy 8 looked like these;


Once they were made to look digital, they ended up looking a lot more professional looking.


There are a few issues but allowed me to turn the basic concepts into initial designs that could be improved upon.2

These designs meant I could continue with the plan through the site but also raised a few questions about use of colours and textures3

The virtual experience

The virtual experience is the main purpose of the site, it must allow the user to experience what other cultures have to offer in the same way a normal visit to that country would in a safe and consistant manner. Once the user has selected a country they would like to visit, they will be confronted by a confirmation page. They can be seen here;

On this page there is a faded flag in the background while the country name is written a typeface traditional to their history. Once they havee selected start and began the adventure, they will be presented with a screen where it tells them some basic information about that country such as a weather forecast for that week, the time difference, popular foods and attractions. This page should also offer the user the ability ot customise their frog with items from that country.


The next section is about a touristic area within that country, and a guide can give the user random facts about that place. This part is to encourage learning about that country and important facts about it’s culture.2

The next section is about encouraging socialising between users, in this area all users who are on this trip at the same time are available here. Therefore this means people are able to talk with users around the world in this section. When they are socialising, they are able to speak in a chat or play mini games with that user. There is a ‘bot’ frog who speaks in both the users language and the language of the country they are ‘visiting’ who can speak to the user and also play mini games with them, this is ideal for realibility and also while there are no other users in the chatroom.3

Once the user has finished in the chatroom with the other users, they are able to progress onto a new section that gives the user a lesson in the language of that country. This is done using images that relate to words as recommended by my research.4

The next section is a modern connection to people now taking selfies. The user will find a picture of their frog dressed in the way they have been customised in the scene of the country. It is a great way to reflect on what they have learn at a later time.5

The next section is quite important as it allows the user to start a conversation with a resident of that country, it shows the user the other persons frog, their name and some other basic information then encourages them to send them a message to say hi.6

Postcards are related to the tradition of sending a message back home to people you know with a short message about your trip. These can be sent via messages to other users and can fully customised. The screen below lists a grid of postcards available to send.7

Then once selected the user has the ability to be able to edit the postcards with stamps, drawings and pictures of their frog whil also being able to add a message to the card. This encourages other users to learn about that specific place too.8

It is important to note that the screens are a mixture of textured backgrounds or gradients, this is something that has been noted as requiring further work in ther development stages of these sections.

FV: Crazy 8s

The crazy 8s, Googles’ method of wireframing its’ designs is what I used with this project.

Here are the two crazy 8’s I did.

The homepage;


Customising the frog;

Scan 1.jpeg

Breaking down what the different sections do;

The homepage section is the most important as it where the user will be greeted with content. This page should define the look and feel of the rest of the site, so therefore should reflect all of my research thus far.


HOMEPAGE 1 (above): This homepage sets out the view of the world map for the user to select certain countries that they can visit, this homepage has an icon in the top which contains the profile data of the user. Additional links can be added along the top of this design.


HOMEPAGE 2 (above): This homepage has a much more defined structure as it lists the flags in a grid view for the user but maintains large menu along the top which can contain user data and additional links.


HOMEPAGE 3 (above): This homepage takes the setting of a frogs natural habitat, a pond in which it would live. The frog can sit atop lily pads while signs in the bakcground contain the navigation of the site, and addition content.


HOMEPAGE 4 (above): This homepage is similar to the 3rd one but instead it offers a much more zoomed in version of the frog that allows for a top navigation.


HOMEPAGE 5 (above): This homepage is a lot cleaner, with a black bakcground and frog resting on a branch, it means that the navigation can become the center of attention for the user.


HOMEPAGE 6 (above): This homepage is like homepage 4 but is again zoomed in more. The main difference with this one is that the content portrayed behind the frog can change in a more 3d enviroment, making the homepage much more interactive.


HOMEPAGE 7 (above): This homepage is a standout design where the page is an intereactive game while it also serves as the function of the main menu too. It gives a new breathe of life to something that is otherwise potentially boring for my target audience.


HOMEPAGE 8 (above): This homepage is very simple as it portrays the frog sitting on a frog in a pond, the menu is tucked away in a side navigation, to allow the homepage just be the main visual of the site.



CUSTOMISING THE FROG 1 (above): This frog customisation page features the frog on his lily pad with the customisable items kept in a fixed sidebar that the user can scroll through.


CUSTOMISING THE FROG 2 (above): This frog customisation page features much more importance on the character and how it looks with the items, in this version the user can look the the catalog and select items they want to wear.


CUSTOMISING THE FROG 3 (above): This frog customisation page is like the second where it focuses on the character but this time instead of selecting a catalog to look through the user is presented with the flags and the items categorised by their country.


CUSTOMISING THE FROG 4 (above): This frog customisation page puts a lot more attention on the specific items being changed as it zooms on the relevant area of the frog of which the item of clothing is being chamnged. As the user browses the items the flag in the corner changes to be relevant to the item.


CUSTOMISING THE FROG 5 (above): This frog customisation page allows the user a lot mor customisation as it allows them to drag and drop the specific items from a side store of the items.


CUSTOMISING THE FROG 6 (above): This frog customisation page puts much more importanceon the items as the frog is much smaller while the items are much bigger allowing the user to scroll through them.


CUSTOMISING THE FROG 7 (above): This frog customisation page allows for the frog and items to be seen equally,  the frog is shown in a spotlight while the items can be displayed by flag.


CUSTOMISING THE FROG 8 (above): This frog customisation page is the same as the one shown above with just the simple change of showing the frog on a lily pad rather than in a spotlight.


Once i had complied these designs the testing on the user was soon to begin, what I doscovered was the following;

The homepages were all relevant to the design so picking one was difficult but the homepage being a world map was most popular as it was highly visual and relevant.

The audience thought it would be too much choice to select a country at this section, so here the user should choose just the contininent, then choose the country they wish to visit within that continent. This is done using the two screens above.

The next wireframe to be chosen by the target audience was the 5th customisation screen;


The reason for this as it looks like a really simple layout which is easy to use, with a drag and drop ability for the user.

Other wireframes were less important and relied so heavily on the digital artwork that it made more sense to create digital wireframes, these can be seen here for the digital experience mockup.



Personas are pretty difficult to complete with my target audience due to their age, and restrictions that poses on me. Therefore it is important to note that these personas are based on questions asked by teacher and parents and passed on to me.

While important, the childs persona isn’t the only relevant one in this situation as parents are also revelant personas as they are the ones who will allow their child to use technology, or purchase products for their child.

The mother works hard to earn a living to support her family, she likes to see her daughter happy and will do what she can to keep her entertained. That said, she wants to make sure her child is doing something reasonably productive, even if it is while she is playing a game. You can see the persona for the mother here;


The daughters persona is much different, as while she works hard at school to impress her parents, and for her own benifit, she much more appreciates her down time. She wants to relax and have fun, anything like learning doesn’t seem like a great use of her down time. As she has no/little sense of the value of money, she relies no her mother to provide her toys and luxuries. You can see the persona for the daughter here;