Final Presentation

Introducing Frog Voyage…

The idea behind Frog Voyage was a website that would encourage kids between the ages of 8-12 years old to learn about other languages and cultures. The best way they could that at the moment is by using a combination of Instagram, Google Wikipedia, Yummly, Facebook and YouTube. These services and content can portray a country in a certain way that follows the ideas of the content developer. This can mean the kids will sometimes read bias information, which is not ideal. Frog Voyage was initially concieved to fill this void.

When the original idea was concieved there was many different aspects to it that meant there was a lot of confusion about what the future held, this brainstorm is available to see here;

Ever since I started the project people have always asked why I chose frogs as the character, the idea is that frogs are one of the only animals that exist in every since country worldwide. It also allowed the user to have a distinct connection with nature, the benifits of which are listed below.

The next part was to overanalyse every section of what my subject was meant to be. This meant the sections below were all researched and acted upon within my subject. This development has been documented on my blog throughout the year.

You can see below how my brainstorm was higely reduced after such a large ammount of research.

I was able to use this research to not only create this brainstorm but also, effieciently create a large user journey as it is here I was able develop the site map and recognise the steps required to partake in any given activity on the website.

This meant in my designs I was able to create a working model of how the user would experience a country and the different functions. All that would be required after this is a content management system, which would allow me to add the next 20 countries required to finish the design.

There are 5 frogs, with 15 different colours meaning 75 colour variations.

I managed to ask someone from my target audience for feedback about my project, these are the comments that she gave me.

Finally once the design was completed and i’d got feedback on my designs, I was able to approach some web design agencies that offer investments in startups, with one of the prominent ones being Work & Co..

This company had made products for some very large companies and therefore I was quite interested by them

Advertisement

Final Prototyping Testing

The prototype test is available here (https://youtu.be/xgJoQ81DkD0).

I was able to test the prototype on someone from my target audience of 8-12. The user who was able to test my site was aged 9 and gave me some really invaluable feedback.

• There are lots of elements throughout the experience where the user would expect to see some form of interaction. Either hovering or clicking on frogs should induce some form of action. Whether it be pointless or not, the point of the action is to create a sense of interaction with the site. This was explained to me by the young girl testing my site, but also apparent as she was exploring on the site.
• The introduction is too long with too much text, to begin with the user went very slowly reading the different lines of the text but by the third page started skipping the most important parts of the information. This section needs to made shorter.
• Also as the introduction I have added a ‘tutor’ frog who explains things but prior to this section, the user has only just selected their frog and colour and are confused to see another frog. This should be removed and instead replaced with the frog they have just chosen.
• It isn’t obvious in some areas of the experience when things are clickable and are often missed by the user. An example of this is in the Departure Lounge where none of the items such as the passport where clicked on, nor were the profile areas. Guidance of a little text would be useful here.
• Some of the call to action buttons are a little distracting, this refers to the Social page where the user expected the Chat button to actually start the conversation with the other user. It is also on this page that it isn’t apparent that you can press to interact with other users. Also the users was somewhat confused by the word ‘Social’ and suggested it should be renamed to ‘Park’.
• It would be better to name the frog and have that as the username rather than your own name.

After testing and providing this feedback I spoke a little bit regarding her overall thoughts about the website.

• Her idea: It’s a really cool idea and I should make it so that she can play it. Then I should go to her school and suggest to her teacher the website so she could play it in class.
• Her favourite section was the language lessons, but the quizzes would be cool too. I should add a section for a little bit of maths somewhere.
• When selling accessories, I should also sell action toys of the different frogs and accessories so they can be customised in real life and played with. The background art could be sold too. For example a Paris pack, by her recommendation should include 2 frogs, french accessories, and the scene backdrop.
• I should sell ‘squishy toys’ the ones that are usually filled with liquid so when you squeeze them, a bubble appears.

Personal notes from the user testing;

There was this really sweet moment when she was like “I still have £23 from my birthday, I could get a few colouring books if you already made them”. This shows that the site definitely has an appeal to my target audience.

When testing the site, the young girl would often stop looking at the site and continue colouring and drawing. This didn’t just show her ability to multitask, but also the opportunity to capitalise. Activity books could be sold for each virtual trip so they could colour, draw, answer questions, and play puzzles with relevance to the content on the screen.

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;

My meeting with Duncan Riach

I came across an article online by Duncan Riach. The article was was titled ‘Multi-millionaire at 27. What I learned.’ and is available here (https://hackernoon.com/multi-millionaire-at-27-what-i-learned-7df8153f5425#.caot1rr5k).

Duncan Riach worked in Silicon Valley, and I reached out to him regarding Frog Voyage. It was incredible to be able to talk to him regarding my project, and I was able to learn a lot from the converstaion.

While using the mockup, Duncan gave me invaluable feedback regarding key parts of the experience.

Below is a list of all the notes taken during our conversation.

General Feedback

• The Tour guide search box could potential employ the use of a API provided by a company like wolfram or like siri to allow users to be able to search for information.

 

• Each new page requires a context box. This needs two forms; a short explanation & a longer one which is a little more in depth. This can be provided by a frog that appears throughout the experience. Examples of this in use can be seen in Sim City & Clash of The Clans

 

• Look at allowing users to gain points to gain additional accessories to add to their frog. This conflicts with some of my research so will needs some serious consideration. Khan Academy (https://www.khanacademy.org) is a great resource that allows users to gain points for learning, and also enables a parent viewing mode.

 

• With thousands of users, even with different frogs and accessories, the difference between the avatars become even more difficult to seperate. For this I could consider exploring options of further customisation such as colour and scenes in which the frogs are based. The scenes could represent the location in which the user is currently visiting. This location should be pinned on their homepage as their current location while also being present on the map.

 

• Determining how safe the site is from Pedophiles is tricky. The best method I have concieved is encouraging kids to learn about online safety straight away, making them aware they should never shhare personal details online with strangers. I could block email addresses and telephone numbers from being sent in the chats, and then allow the kids to connect their Facebooks when they reach the age of 12 so that they can take their social connections with them as they grow older and start to use new services. The network effect is in play here, holding the users to the platform because all their friends are there.

 

Profitability & Taking service to the market

• Splitting the profile into a parent/child service so that the parent can track the progress of their child will be invaluable as a tool to bring the child and parent closer together. It means that the service could advertise to the parents based on the interests of their child, offering organised holiday packages.

 

• Speaking to the tourism boards of the countries worldwide can be vital to raising revenue. Encouraging them to invest money so that their country can be portrayed in the way they prefer, with information that provided.

 

• When taking the service to the market, it is important to have the site live first, as the value will be given based on not only the concept, but the active users and methods of profitising the service.

 

• Once the project is live, getting the users is the key part. To do so approaching schools and asking the headteachers in person for permission to get the kids on the site is vital. Using social proof by talking about how the service is used in other schools in the area can help convince the head that is it a great idea

 

• Once there are active users, usage data can help loop between feedback and improvement. Don’t be affraid to change something entirely if that’s what the feedback suggests.

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.

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.

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.

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.

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.

Image Rights & Copyrighting

I learnt the hard way, I had my logo stolen and used without my permission or knowledge. This post explains what happened and how to copyright your work to protect it and yourself.

First, I was Googling “Frog Voyage” to see if my domain, had been registered by Google yet, what I found was un-nerving. The first page in the results was the following;

A phishing site with fake products, that turned out to be a front, the company details were also stolen from a legitamate company in the United Kingdom too. When I spoke to the company, they seemed as suprisedas I did, therefore I spoke to the company hosting the website, MyShopify.

After speaking with the organisation, I recieved the following email;

I completed the DMCA Notice and Takedown Procedure. A treaty set up in 1996 called the ‘Digital Millennium Copyright Act’ protects artists like myself from things like this from happening. Soon after completingthe form I recieved the following email;

The logo was indeed taken offline. You can see below the company have replaced the logo the words ‘Frog Voyage’;

So, what could I do to further prevent this from happening? I started to look at copyrighting my work.

The UK Copyright Service

https://secure.copyrightservice.co.uk/register/reg_online

The logo artwork itself is copyrightable. As the organisation states “Any work which has a real or potential financial value should be registered to provide evidence of originality for the copyright owner.”

The current charges for online registration are £39.50 for 5 years or £65.00 for 10 years per work.

Other work that I need to protect are the main characters of the experience. I had these five characters comissioned by a professional illustrator. I needed to ensure that I owned the rights to the characters, therefore I created and had the illustrator sign a contract which explicitly stated the rights of the artwork were solely mine, and that she would  only use them in her portfolio to show her work. The contact is as shown below.

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;

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

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

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.

TESTING ON USERS

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.

 

Project Map

The project map is an important stage within the development stage, it allows me to consider the main journeys that user should take. These are the main possible user journeys that can be taken;

Virtual Experiences

It is vital that the website offers experiences for differenct countries to encourage the learning experience, but how about using virtual trips to do that?

Trips could allow the user to learn things that my target audience will find interesting about that country while spending as long, or as little time as they want on that place. Using this method also means that the service can be streamlines and as an understandable model for each trip can be created.

On a trip, a user can;

• Set out on a trip, and customise their frog with the relevant items for that country, and it’s weather (while information about it’s climate appears). This can be done as information on a ticket page contains some basics about the contry, then the next thing they see is their store of cutsomisable items they can add if they want.
• Visit some of its’ famous landmarks and choose to learn more about them if they so wish to.
• Attend social sections, a cartoon backdrop with all users frog onscreen where people also on that trip at the same time can communicate.
• Practice languages with a foreign teacher frog; basic language lessons can teach the simple conversation starters.
• Take a ‘selfie’ where the frog can take a picture of themselves for the user scrapbook with their customisations infront of a popluar, these are images that can be sent later in messages to friends, which links them to the trip they can take too.
• Connect with someone their own age from that country that they can instantly send a message to start a conversation.
• Send digital postcards from that location to their friends, these postcards can edited by adding stickers to alter appearance and a message in different fonts, colours and size can be added to the back.

Once the trip is over, additional content can be offered to the user in the way of quiz questions, quick lesson lessons on the language and items collected.

As they have traveled through the experience, they have discovered the country digitally, learnt about the culture, met some people also learning about this culture and started a converdsation with a local, learnt’ a few foreign words, they are already very indulged in this country.

Gamification of my service

Gamification is the process of taking something that already exists – a website, an enterprise application, an online community and integrating game mechanics into it to motivate participation, engagement, and loyalty. This is something that is vital to encourage my users to engage in the community and learning process through Frog Voyage.

What is relevant to Frog Voyage when it comes to gamification?

• Storyline
• No login to get involved
• Constantly offer new content (Never completed)
• Promote social interaction
• Learning must be risk-free

STORYLINE

The story follows a frog who decided to leave his lily pad in Kumari Kandam when he notices all the flies around his home had started to disappear, when he leaves he starts to learn things about the world around him and meet new frogs.

The frogs home of Kumari Kandam relates to mythology of an ancient world where mankind evolved. It is believed to be a land that no longer exists that belonged between Africa and Australia, like shown below;

Not only does this mean we have a defining character for our frog but also means that we can encourage the kids to explore the world with a sense of no belonging as the character and live in a world of imagination. This suits the audiences’ needs much better, as when they don’t feel like the character has a home, they no longer feel the need to return or put importance on it, they can simply move around the map and explore, something they should do be able to do with an open mind. This is important as it allows the user to relate to the character, and feel like everyone is, and should be equal. It also makes it an easier platform for being interested in new cultures.

No Login Required

Allowing access to the content without login is important as it allows the users to view content unrestricted, the user should be given the option to login to view addition, more preferable content, friends, progress etc.

New Content Forever

To keep a game fresh and exciting, there should an continuous flow of new content to ensure the user stays engaged. It also means the user should never be able to ‘complete’ the service.

Promote Social Interaction 

Having users connect with each other while playing games online is the best way to all the users feel like they are part of something ‘bigger’ than just the game. Therefore it is vital to allow the users to communicate with each other.

Risk-Free Learning

Risk free learning is essential therefore I found that by removing the points based reward system, and gift the award at the beginning of a learning experience, the user already has the gift and can leave at any time, therefore the learning environment is one of choice where the user is able to make risk-free decisions in the game eliminating any danger of missing out on a reward at the end.

 

References;

https://www.td.org/Publications/Blogs/Learning-Technologies-Blog/2014/02/10-Best-Practices-for-Implementing-Gamification

https://www.betaout.com/blog/8-tips-to-create-a-killer-gamification-strategy/

23 Effective Uses Of Gamification In Learning: Part 1