Final Presentation

Introducing Frog Voyage…Web 1920 – 1

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.

Web 1920 – 7

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;Web 1920 – 5

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.

Web 1920 – 4The 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.

Web 1920 – 6Web 1920 – 8

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

Web 1920 – 9

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.Web 1920 – 11

There are 5 frogs, with 15 different colours meaning 75 colour variations.Web 1920 – 12Web 1920 – 13Web 1920 – 14Web 1920 – 15

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

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..

Web 1920 – 3

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

Web 1920 – 2

Advertisements

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;

Screen Shot 2017-04-20 at 16.08.11.png

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

So here are the new colour palettes;

Screen Shot 2017-04-20 at 17.57.38.png

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

12345

 

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.

Screen Shot 2017-04-20 at 12.36.18.png

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

Screen Shot 2017-04-20 at 13.11.12.png

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;

Character-Customisations.png

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.

Technical Details

Not using Banner Jones, Instead i’m using Optimus Services Limited (It runs off an engine and will effect other web sites).

There are a lot of smaller important things to remeber when building this website, this blog post will explain them all.

ruby_on_rails-svg_

Ruby on Rails

Ruby on Rails is a programming language, a Model-View-Controller (MVC) web application framework. HTML (Hyper-text markup language) and CSS (Cascading Style-Sheets) format websites, and Ruby will output this in its own compressed files. Ruby though, will deal with much more complex processing. Things like looping and branching content can all be achieved with the toolkit that Ruby on Rails provides.

Model-View-Controller (MVC) is KEY

Model: where all the data is kept for the webtite

View: where all visual information relating the styling of the site is kept

Controller:  connects the data from the model to the view so it can be displayed

Once installed on your computer, you can set up a site, and use the following file structure to organise your site.

Screen Shot 2017-03-22 at 08.03.59.png

Rendering Partials are an important process of setting up a site. They are components stored in seperate files that can rule commands that will attribute data to an array of the layout. They are simple to execute, for example the header can be done as a partial. So you would set up the file _header in app/views/layouts/ so the file would appear as app/views/layouts/_header.html.erb – The only thing left to do after you have applied the relevant information inside that file is to render it where you want it to appear. This is done using the command “<%= render ’layouts/header’ %>”.

github-logo

Github

Github (available here; https://github.com/) is a project hosting platform. It offers services like source-code browser, in-line editing, wikis, and ticketing. It also has a versioning control, allowing users to browse every single edit of their project. While the online version is reasonably to use, it requires git commands to work on a computer, these are done in the command line via Terminal on a Macintosh computer

terminal

Terminal

Terminal is the program used to run the commands to set up a rails website and start the server. It is a complex thing to undestand but I have written an in depth explaination here (https://akbrodie.wordpress.com/2017/03/23/setting-up-ruby-on-rails/).

sass

Variables & Sass

Sass (Syntactically Awesome Style Sheets) is a way of coding the stylesheets in Ruby on Rails. It makes for cleaner and easier code. Available here (http://sass-lang.com/guide) Sass is key to making the code really clean, this is accomplished through a combination of Variables, Nesting, Partials, Import, Mixins, Extend/Inheritance & Operators.

  • Variables are used to store data, so that time can be saved for later. They have a dollar sign followed by the word used to store the data, like $example. A great way this is used is to assign colour hex codes to variables describing the colour. This makes editing much easier and faster.
  • Nesting is when a class has elements within it that it wants to effect. The css is nested within the one class, rather than multiple ones. So as an example a div class of .example containing a h1, h2 and p could look something like this;
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Partials are external files that contain snippets of code that can be added using an @import tag like @import ‘example’;

Mixins allow lots code that essensially do the same job to be grouped together in an understandable way. A example can be seen below how border-radius now includes the webkit, moz and ms versions.

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

Extend/Inheritance allows styles to be shared across multiple class names easily without repetitio. It is accomplished very easily by adding @extend .exampleClassName; – The example below shows the styling for a dialog box, which border colour can change depending on its state.

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

.warning {
  @extend .message;
  border-color: yellow;
}

Operators allow for content to have set widths dependant on mathmatical equations. This is great as it allows content to adjust the size of the screen it iis being displayed upon. An example can be seen below;

.container { width: 100%; }


article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}

83

Medium Editor

Medium Editor ( Available here: https://yabwe.github.io/medium-editor/) is a visual content editor plugin available for cms content.

It allows the user to select content to edit simply by highlighting it on the page like so;

Screen Shot 2017-03-22 at 21.30.51.png

This is something that is vital for editing the website in Live Edit mode.

Code of conduct

Clean code is really important, it means that if someone starts looking at your completed website they can understand what the code does. Google ensures that is code is extremely clean to make sure the loading times are kept down.

Ways to ensure my code is kept clean are listed below.

  • In the sass files, keeping notes to ensure the code is described and easy to understand is vital. This is simply done using “//”.
  • ensuring the attributes within css classes are kept in alphabetical order.
  • Using variables for colours is key, when describing colours of different shades, it important to put colour first and the shade second. It looks like this $yellow-light or $yellow-dark. This is done for speed, as the developer can type the colour first and see all the different shades available.

Flex Grid columns are important for coding in rails. I use the flex grid media queries as they work well with Ruby on Rails. They are also simple to use. Normal class names can be assigned to html elements, then in the css the tyle of media query is included with a line ‘@include flex-grid-row;’ or @include flex-grid-column(6);’. This makes creating and editing the layout super easy. They also work well with the Media Queries (Include media) to allow the user to make layouts adaptable for mobile.

The stages of creating a website are important to be aware of. There are three stages that a website can go through, the first is static where the content is pulled directly from the HTML file, the second is where the content is dynamic and is stored on a database and finally is when engines and generators are able to create the plugins used on each independant website.

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