Evaluation

Frog Voyage has been a journey in itself. I have learnt a lot from the experience of researching and developing this project from initial idea stage to a fully developed concept that has a mockup of the user experience.

The research stage was the most important to me as it meant I was in a position to give a reason why I had done things in a certain way. I started by looking how Google’s internal teams follow a structure, then I started by following those.

Next up I started looking at how to best approach my target audience, which led me to learn lots of very important factors that would influence the overall project. These ranged from current products/services they used and why, gamification of a website to encourage engagement to the use of storytelling, emotions and characteristics.

It was a very interesting project to work on as it meant I was able to challenge myself to do something completely new that I had never previously achieved. It meant I had to use my research and initiative to decide on the best way to achieve my goals. Starting entirely from scratch, is difficult. As there were no other competitors in the market, it was entirely down to my own vision to create this product and the only influences came from other services, mainly games, that were aimed at the same demographic.

Working on the logo was a great experience, as the ‘design rules’ I had previously learnt became very flexible and had to readjust for the target audience. Another concern I had was when I realise my logo had been stolen by a phishing scam website on the site shopify. I felt very unhappy at the fact someone had used my work in such a way. I immediately called the relevant people and managed to get the logo taken down from the website. This was a scary situation for me to have my work stolen and used to scam people, and it made me look into registering copyright and trademark to avoid future infringement.

The characters were a very important part of my project so I needed to ensure I did them properly, by allowing the kids from my target audience pick their favourite ones, it meant there would be a variety of frogs that were all popular. This was important, as they were to be animated, and become the figurehead for the experience. Working with the illustrator was difficult as, to cut costs i’d asked a co-worker which meant I felt like I was being annoying when asking for updates on the illustrations. Once the Illustration work was done, I was able to make small editing adjustments myself and then apply 15 various colour schemes to them. This resulted in many different characters for the users to choose from.

The actual making of the design was an important step that took many months and went through multiple iterations to get to the stage it’s at now. The only part that hasn’t really changed is the way the virtual experiences are linear one screen layouts, that each have a theme. It’s the overall layout of these individual pages that took the largest amount of time, as I justified the placement of every item within the design and related it back to my research. If it didn’t relate to the research, then I took it out of the design.

With the design almost complete, I started looking further into the future with the consideration of profitability and how plausible investments would become. I spoke to an entrepreneur from Silicon Valley over a Skype call who was able to offer me some in depth feedback on my project and his overall thoughts on the usability. It was an incredible experience that really opened my eyes to the possibilities my project had. His feedback made it into my mockups and helped with the overall user experience.

This over I decided to get in touch with some web agencies with the intention of getting a quote of building the site. The response was touching and greater than I expected. A large international company turned me down, as my project was too small, another large company with clients in the Nasdaq  was intrigued by the potential my project had and suggested that a partnership should be worked out to get the product to market and finally another who were willing to build Frog Voyage were interested by the service. With many entrepreneurs offering advice online that I was still in the friends & family investment stage, it was obvious that this wouldn’t be an easy decision that could be made before I finish university. Instead it was something I needed to think about for a longer a period of time, and potentially be something that I take into my future, to evolve and develop as an actual business.

 

Advertisement

Final Mockup

The final mockup of my Frog Voyage project is available for viewing here;

https://invis.io/XJBP95VUD#/233586745_Su-1

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

Tools used & learnt

The most important learning curve gained through this project is the applications I learned the use of during the process. This is the list of programs I learnt;

Atom

Adobe Experience Design

Illustrator

Emmet

Zurb Framework

Slack

GitHub

GoDaddy

Sass

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;

Character Customisation

Customisation of the characters are vital they mean two things. Firstly, each user has a completely different style frog, and secondly to gain access to the customisations, they must engage in certain experiences. This is something that has been important from the beginning of the experience planning. It is at the state that now I have an intuitive user interface that I can start developing the characterisation of the frogs.

Colour

In the character customisation, I want as much customisation as possible for each user so to begin with, each user can customise the colour palette of their frog, it is only at the beginning of the experience that they can do this though. The frogs were initally designed from their real life counterparts, but the colour palettes should be interchangable. Therefore, below are the frogs and their colour palettes;

Then below are the real life frogs that I used for the new colour palettes;

06 Dec 2011 — Strawberry Poison Dart Frog (Oophaga pumilio), Guayacan, Costa Rica — Image by © Robert Pickett/Visuals Unlimited/Corbis

So here are the new colour palettes;

and here are all the frogs in the differen colour palettes;

 

This means instead of having 5 different frogs, with the addition of 10 new colour choices and an overall total of 15 colour palettes there can be a total of 75 variations of frogs.

Accessories

Next I wanted to allow accessories to be added to the frogs to ensure they could be truly customised, the items which they could use would be collected as they use the experience.

The first stage of choosing the accessories was purchasing a pack of themed people from around the world. Next I had to choose the countries I had the background artwork for. This was done in Illustrator as you can see below the characters, the list of countries and the actual countries chosen along the top of the file.

Next I took these characters to a new file and organised them a little neater. Meet all the characters and the accesories I needed.

Next I started to pick apart the characters themselves and the items that could be used for the frog characters. This is what I was left with;

This means to add to the 75 variations of styles from the colour stage, by adding 33 accessories, there were now 2,475 variations of customisations.

Scene

Last but not least, to ensure every users experience was entirely different, I introduced the idea of a scene, this meant that the users profile would show a ‘scene’ of that users frog. The backdrop would be the imagery of the location the user last visited/currently visiting while online, along with the frog and all it’s accessories. These backdrops can be seen below.

This meant that by adding 21 backdrops to the current total variations of 2,475 scenes, there could now be a total of 51,975 different scenes for the users. This number would only grow with time and the addition of new places and accessories.

Setting up Ruby on Rails

I wanted to develop the website on my own personal Apple mac. This meant I needed to setup Ruby on Rails on this device for the first time, this is something that would see me running complicated commands in Terminal.

These are the commands used to setup a Ruby website.

$ – Simply a note to remind myself to run this as a command

cd – change directory (move to a specific folder to work on)
To start a new website, the following commands are required.

1 $ cd ~/Documents/Projects/
2 $ rails new portfolio -d mysql
3 $ cd ~/Documents/Projects/portfolio

1 – This command selects the location of the new site

2 – This command sets up the Rails file structure in the chosen directory and names it ‘portfolio’.

3 – This command sets Terminals within the portfolio page.

 

Next is the sercurity of the server, open the file (config/database.yml) and change the password.

4 $ mysql.server start
5 $ rails db:create

4 – This command starts a server on the macintosh and allows for live editing.

5 – This command will run the database

 

//Start building the website

1. – This section explains which ppage is the page that should load as the root file. Usually just the index page;
   Config/routes.rb
   Add this code on line 2;
   root to: ‘application#index’

2. – This is also required for the same reason as part 1;
app/controllers/application_controller.rb
Add this code before the end:
def index
end

3. – This actually creates the index file that is being loaded up;
Create the file index.html.erb
In directory app/views/application/index.html.erb

4. – Add other scss files in stylesheets folder, create the header & content sass files;

– application.scss;

@import
‘header’,
‘content’;

5. Add variables file, which allows for fonts and colours to be stored as variables, making styling the site much easier.

Once the site files were ready it meant I could immediately start working on them. The following code is what I would use on a daily basis while working on the project. They change the directory (files) that i’m working on, run the server and counteract a common mySQL error.

$ cd Documents/Projects/Optimadmin
$ cd Documents/Projects/osl_2017

Run the server:
$ rails s

If you get a mySQL error:
1. ctrl + c to quit server
2. $ mysql.server start

Teaching & learning strategies: How they impacted my workflow and overall project

Teaching methods such as lectures, seminars, discussions, presentation, research based learning, 1:1 and group tutorials were used throughout the year to help me achieve the best possible grade, below I have documented each time one of these methods were used and in turn aided my projects development.

Discussions

Discussions among the teachers and my peers were made much more frequently throughout the development of the service than the one to ones on the pure nature that I was able to ask questions at any time I was around my peers.

This was a fantastic aid to my site as it allowed me to gain an insight into the opinions of others and get advice regarding how to improve or what to add to my project.

The most important part of this was the advice that I could use assets from CreativeMarket, an online platform for artists to sell their work. This meant I could focus a lot more on the theory instead of rushing into the design as it mean’t I could get quality assets at cost, which would save me hundreds of hours wasted creating my own artwork that wouldn’t look as good anyway. This was one of the most important decisions I made in regard to my design

Presentation

The presentation of my idea to the group in the first stage was vital, as while it not only made me predefine the concept, it also allowed me to express to an audience of peers. Questions were made from the group, and also the teachers, and in answering these questions allowed me to come up with new ideas. I was also able to pose questions to the audience of my presentation to allow me to guage their reactions, and help me decide whether which adjustments to make.

A key point from this stage was gaining the thoughts on the language of the site and how it should work in relation to translating content for users of other languages. This was an important part as it allowed me to consider language lessons within the service.

Research based learning

Research was the most valuable to me of all the learning strategies listed here. I spent the majority of my time researching the concept and developing it to being the best and most relevant to the target audience as possible. The entire idea is due to hundreds of hours worth of research, way to vast and varied to sum up in short, but it did change the course of the idea well into late design stages. In reality the research was and learning was ongoing even throughout the design stages.

1:1

The one to one sessions were vital to my project, it allowed me guidance on my project on a personal level. The tutor was able to understand the aim of the project and offer advice on key decisions that were needed to be made.

When stuck for ideas with my design, the one to one lessons were able to aid me in ideas of new research topics. Posts were suggested for me to write which allowed me to in turn think of new ideas.

They were able to help me avoid making mistakes with my theory and designs of my Frog Voyage project. A valuable lesson in these sessions were being told my designs were inconsistant throughout. This made me really focus on the small details of my design and improve the website tenfold. Subtle changes can have a really large impact, and these changes really helped build a strong design.

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.