Evaluation

Working on a client project was interesting as it meant I was able to work on communication skills and build on exist web skills. I approached the manager of My… Group to ask if there was anything I could do to help him and there was. He wanted a redesign of the content management system they used to edit websites. I thought this was out of my league having only had about three months experience with the particular language I would be writing in, but I decided to take on the challenge anyway.

Research played less of a role in this project and fell more towards user testing which explored how various people from different skill groups interacted with the site. This meant I was able to explore the options to make the experience of the site better for all users. I came up with a great method and design that proved to work with the users but also pleased the client.

Next was the actual build of the project, this was the most difficult part as lots of the code was completely new to me so I felt I was truly learning on the job. This had its benefits and negatives, to begin with it meant I would definitely struggle with the code but it would become easier with time and experience. One of the largest negatives that impacted me the most was the errors I would come across during my time editing the site. These errors varied in difficulty to remedy, but would add hours of wasted time to the build. It meant that overall I probably spent 20% of the entire time fixing errors or at least trying to.

By the end of the build I have a much deeper understanding of how the code works and feel like a lot of what i’ve already done would be much easier to achieve now in comparison to when I first started the project, which is a huge learning curve to say the least.

Feedback from my client was great, he seemed very pleased with what I had achieved even though some of it was not even completed 100%. It meant that he had at least grounds to continue the CMS and make his employees lives easier, effectively saving him money.

As a future consideration, I would love the opportunity to keep working on the code to develop the site even further so I can improve my own skills and become the best possible developer I can be.

Advertisements

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.

 

User Journeys: Completing tasks?

This post takes place in video format and gives live demos of how the content can be change, if reading in the document, please refer to the blog post which can be found here (https://akbrodie.wordpress.com/2017/05/24/user-journeys-completing-tasks/).

To begin with I will start with a video showing how simple it is add an image to the assets section of the cms.

The next part would be to edit/delete an image, In this video demo I will delete the image I just added.

Finally, and most importantly the websites’ articles are editable, and in the video demo below, it is shown how this is done.

User Testing

I gave the cms to one of the users who regulary deal with the site and use it to change clients websites. This is what I recorded;

https://www.youtube.com/edit?o=U&video_id=uA-XSVKIo3s

Some invaluable peices of information came from this User testing. The main part is that it was a lot easier to use than what was being used previously. This is great as it shows that I have achieved my objective.

The user noticed that there was an issue adding a new page to the website through the cms. This some errors within the code in which I didn’t have time to remedy.

The backups page is also left uncompleted but has a reasonably basic structure, the user was confused as to the purpose of this page.

The main issues of this site the fact some of the pages lack information, so first time users will struggle to understand how to use the site, this could potenitally benefit the first time users.

Inspecting the code

There are many components that make up the CMS. To begin with there is the fact that I am required to use two sites to edit the cms. One is the actual editable site that the content management system would edit and another is the cms itself. Both would require editing to be able to complete the task at hand. To begin with I needed to setups the files in the views and then add them to the routes file;Screen Shot 2017-05-24 at 16.56.43.jpg

The lines at the top such as ” resources :articles, only: [:index, :show]” are indicating that in the articles views folder there should be an index.html.erb and a show.html.erb – There is also another way to show this being used in the file structure here;

Screen Shot 2017-05-24 at 17.03.07.jpg

This method says “get ‘analysis’, to: ‘redesign#analysis” which says that the term analysis should get the file ‘analysis’ in the folder ‘redesign’.

It’s at this point I can introduce includes. These files that look normal apart from they use an underline to define them as an include like so (_menu.html.erb). This means that anything in this file can be included someshere else. For example, here is the application.html.erb that loads the layout of the pages;

Screen Shot 2017-05-24 at 18.08.18.jpg

On this page you will notice the line that says;

“<%= render’layouts/optimadmin/shared/menu’ %>”

This loads the content from the file _menu.html.erb which can be seen here;

Screen Shot 2017-05-24 at 18.12.15.jpg

This is a much more organised way to code a project as everything has it’s own section within a folder.

Another great point of completing this subject is the .sass features I am able to use. The use of variables within sass means that instead of having to put the hex colour code into the stylesheet everytime, I have a variables file register the hex code as a variable then just use the variable in the different files. For example below is the variables file I used.

Screen Shot 2017-05-24 at 18.15.55.jpg

Another important note was the layout structure. I was using Foundation version 4 which meant that in the html code in the class names of a div, I also had to include the screen size-column width that I wanted. This meant it looked something like this;

Screen Shot 2017-05-24 at 18.16.49.jpg

Coding the website

The build of the website was very difficult, as I was using a language that I knew very little about. I had started previously about 3 months before with absolutely no knowledge in the area and had started to learn ‘on the job’ at a web design agency. It was at this point that I decided it would be an excellent idea to try and code an entire content management system using this language.

The first stage was to set up my mac to allow for ruby to run. This required complex terminal commands to setup the rails server, then connect the files to a github account. This meant I could push my changes to a git server and never loose any of my files. It also meant I had a version control program taking care of the specific handling of correct code.Screen Shot 2017-05-24 at 14.06.59.jpg

To get the rails server setup, and actually built i needed to follow these commands. They meant i’d be able to setup the webiste alone without too much trouble. This meant the files were all stored online. It also meant that I could use Github to push the final version to the server.Screen Shot 2017-05-24 at 14.44.41.jpg

When editing the files I used Atom. The file structure is reasonably simple to understand, to begin with there is the App folder. This contains most of the important files. Assets contain all the files like stysheets, fonts, javascrips files, and actual files such as images shown on the site. Controllers define the pages that will be used in the site, pulling the data from the models, these pages will be pushed to the views.

Screen Shot 2017-05-24 at 16.16.21.jpg

Another very important part of the file structure is the config section as it contains the routes file;

 

Screen Shot 2017-05-24 at 16.36.45.jpg

The routes file contains all the different views folders, and what they contain such as index, show & new ect.

With this basic knowledge it is reasonably easy to go about setting up and editing a Ruby on Rails website.