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;
    Add this code on line 2;
    root to: ‘application#index’

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

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;


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


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.


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 (

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 ( 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: 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