CMS: Content needed

It important to look at what the focus of the CMS should be, so following my research so far, I have spoken to the client and recieved the following feedback and adjustments.



This allows the user to browse the site as they would do usually, but then click on sections to edit them. This works particularly well for users that aren’t technically minded. It will speed up the process of editing the content for the non technical minded users and speed up the process of transferring data from the existing site to the new one.


This is a great way to fill a site with dummy content like lorem ipsum on the developers server as it allows the developer to be able to easily see what they are working on. It will speed up the process of creating pages and also make it look more realistic.


This is an important feature as customers should not have access to certain elements of the CMS. For example, the dummy content creation would be useless to the customer, so therefore should not be available. By setting up this feature it means it can be developed with time and the differences will only become larger and more specific for each user.



This allows the user to be able to see the content stored on their server, they should be able to find these files using different methods. Searching by file name, date added, file size are all great ways to enable the best of asset management.


This feature allows a user to be able to search the site for the most relevant thing to them. A single search bar where a user can type in something they are looking to change, the results will list relevant FAQ’s, Files, Page Edit and Page View (with Live Edit Mode available). This helps a user not familiar with the CMS to easily find the relevant content.


Ludo Studio keep daily backups of sites for a week which are available if something goes wrong with the site. Something this CMS should allow the user to do is create their own backups of a site so they have peace of mind that they can restore themselves should something go wrong.


Have the webpage link up to the CMS so that the user has the ability to add/remove social networks from their footer, this gives the user the flexibility to add their social feeds when they are ready, not just when the site is being built.


Ludo Studio produc analytics of the users site so that they can track the success of their online marketing strategy. This is something they simply email the user on a monthly basis. The cms can include the files for the past 12 months available to download, it can also show a small insight for the past 12 months next to the file so the customer can view their stats. This will improve the analytics service as it would make it much more easily understandable and managable.


While the small features, alone, are barely noticeable, combined, they make a significant dfference when it comes to the user experience. Below are small features that are overall feedback from users of the cms on how to improve it.


When selecting a textbox it will paste the last item from the clipboard. This is useful when transferring data from one site to another.


Recap of the research

The research stage of the project is now over which means that it is time top reflect on my research, and the steps I have taken from the inital concept.

It evident that the research has allowed me to explore possibilities that were clearly innapropriate for the purpose of the project, but was only after extensive was it obvious that this was the case.

A List of things that have changed is made below.

The educational sector side was completely removed. The more I researched the more it became apparent that the purpose of the site was that it should encourge exploration at the will of the user. By trying to add educational features would only prevent the exploration element of the site.

The profitabilty of the service became defined more. Instead of charging users for availability of features, I found the best way would be to offer unlimited use of the features, and allow them to use it to meet people globally online. The profitablity comes from user becoming engaged in the ecosystem of the service and then buying the accessories that are available through the store. While this is optional it, it allows the user to be fully present in the engagement with the content and other users without any distractions.

The characters developed over time, and went from being one character, to five characters with different characteristics. This made the option for the customisation of the service much greater! This was influenced by a large ammount of research, including the trip to the M&M’s store (, the Angry birds characters ( & the kids movie research (

The content of the site changed in a large way too when I realised I would not be able to mix real imagery with cartoon imagery. Then I choose to move into a cartoon based site. That was realised through three main pieces of research, the virtual experiences, other kids games ( and the design for kids (

Developing a storyline was something that followed my research of the kids movies ( and storytelling techniques ( It meant that the kids could be more engaged in the content. I realised they could expore the world in a dfifferent way fi they were doing so with a character.

The site became much less bloated from jusing the virtual trips idea, as it meant the content could be simplified and categorised to maked the overall experience esasier to understamd for my target audience.

Making the CMS as user friendly as possible.

The CMS should be simple and while researching I discovered the shop talk show (Episode 240: Rapidfire 76).They discuss some verty important points throughout their hour long discussion.

Firstly, people working at the company change, both the developers and the clients. It is important that both parties have the ability to add and remove users from it’s cms.

Also, most clients will have no technological ability whatsoever, therefore it is important that the users have the most simplistic interface possible. A great way to do this would to have a live edit mode that allows the user to browse the site and change content just by clicking on it.

Screen Shot 2016-11-03 at 13.17.55.png




240: Rapidfire 76

Mockup of content management system

While using the couch content management system was reasonably simple to install and use, it is important to consider that a fully editable site would include its own content management system. Therefore this was the reasoning behind researching what good content management systems looked like. The influences of the interface design can be seen here;


After this stage I went on to create wireframes based upon my research, you can see these here;


Finally, I created actual designs of my content management system, you can see this here;


CMS Design

The website is designed to be a template to have a content management which would allow the website manager to swap all the content within the site to match the new exhibition. Below examples of what content management systems currently look like, as part of my research into content management system.

Things I need to remember from my research:

- Will it allow the user to add html tags
 - Colour selection
 - Background Image
 - Title font
 - Content font
 - iPhone/Android homescreen icon
 - Favicon
 - Not assume how much content is to be inserted.
 - Add instructions for content editors
- Statistics
- Media
 - Add/remove pages

From my research it would appear that CMS design isn’t important because it isn’t being seen by the user. But a well designed CMS can make changing a websites content much easier.

The most commonly used CMS is WordPress, it tries the hardest to be visually appealing. The other two, concrete 5 and radiant are functionality based and design falls behind that.

It would be interesting to create a visually appealing CMS that allows the user to visualise what they are editing.


Content Research

The museum will be split up into various sections, of different factual information. This allows the visitor to get real insight of what a Whalers life was really like. Images on the wall will turn into animated scenes on the iPad, there will be questions about the images. Interior of the museum will be dimly lit, with lights focusing on the actual content for the visited to see, this will create a much more immersive experience. Changing the boat within the museum to allow it to move and have people sit inside it, whilst wearing virtual reality headsets will create a truly realistic experience that is not only factual but visual.  The flow of the content will move through a Whalers life, showing the tools he used, his life on the ship, people you came across on his journey and other exotic animals he so along the way.

This is the information that is viewable when looking at the various animals around the exhibition;

Geographic distribution
Bone/ muscle skin Layers
Amount of people who have signed the petition/percentage of number of people who like whales
scale of the animal in com[parison to other animals
Life expectancy
Diet = Carnivore/Herbivore

6,000 BC – The earliest archaeological record of whaling is found inSouth Korea, where carved drawings dating back to6,000 BC show that Stone Age people hunted whales using boats and spears.

9TH CENTURY – Whaling begins in Norway, France and Spain.

12TH CENTURY – Hand harpooning begins in Japan.

1848 – The exploding harpoon is invented. The harpoon was fired with a cannon and used a motorized whale catcher. This enabled whalers to catch the fast-moving and huge rorqual whales.

1930 – 80 per cent of the great whale species are thought to be on the verge of extinction.

1946 – The International Whaling Commission (IWC)is set up by15 whaling nations to manage whale stocks.

1963 – The UK ceases whaling.

1972 – The population of blue whales falls to 6,000.

1990 – Seven out of the nine remaining whaling nations agree to stop whaling.

2003 – Iceland resumes ‘scientific whaling’.

2006 – Iceland resumes commercial whaling.

“Thar She Blows!”
Fin Whale
Antarctic Minkle Whale
Sperm Whale
Humpback Whale
Sei Whale

The captain
The mates

The boat steerers
The foremast hands

Length of journey
The whaling schooner, the smallest whaler, generally undertook 6-month voyages
brigs, barks, and ships might be at sea for three or four years

Right whale – Carnivorous

Fired in then bent with pressure

cut the meat

Polar Bear – Omnivorous
1981 – 22,000
1993 – 25,000
1997 – 24,000
2001 – 23,000
2005 – 22,000
2009 – 20,000
2013 – 18,000

2015-12-19 16.21.11 2015-12-19 16.21.17


Breakdown of Content

I have looked at the site to find out what content is relevant and is required in the redesign and what is irrelevant. It is worth noting there are a lot of pages that should not be shown on the main menu and that can be show on separate links like the returns policy that should only be shown when ordering a product. Here are my ideas of the required content for the redesigned version of this site.

US map with state selected
Individual language for state
Top Gun News

STORE (4 Sections)
– Concealment
– Duty
– Tactical
– Sporting

One Filter
– Ankle
– Waist
– Chest
– Pocket

Background Images like Diesel

– Sizing & Fitting
– Maintenance
– Returns
– Repairs

Contact Us


Wireframes & Designs.

A wireframe is like an architects ‘blueprint’ but instead of a building its of a webpage. It is the general hierarchy of the content, it excludes the images, buttons, colours, style, colour and graphics an focuses solely upon the functions, hierarchy of content and the different scenarios the site can be seen, desktop, tablet and mobile. Much like designing a logo for the first time, you must make sure it works in both black and white. The wireframe is drawn up in black and white, this can be done in multiple ways, there are many resources available for developers and designers on the web but you can also draw on paper, whiteboard or even a mockup within photoshop itself. Due to the simplicity of the concept of making wireframes, they are very quick therefore allows you to create many concepts in a small amount of time.

I also created physical designs with colour and images to help me visualise and decide which one would be best. I used colours that would best portray the business based upon the colour research, to provoke certain emotions in the user.

Here are my three wireframes & their physical design…

Number 1.



This wireframe gives the user something relate to, it tells the story of someone who comes home to discover their roof is leaking, then called acorn roofing to get it fixed. You get to see as as user the result of using the company, this tries to my brainstorm researching the sales techniques, having interested the user, now at the end of the page, a telephone number to contact the business. This method works in theory but comes across as cheesy, childish and unprofessional. I decided not to use this as my design.

Number 2.



The most professional and easy to follow wireframe, this is the one i decided to take through and actually design as a final website. It gives the user what it wants, a description of the company, confidence with using their services because of previous customer’s comments on the work that had been done and finally the contact details. This wireframe cuts to the chase and gives the user what it wants.

Number 3.



Very similar to wireframe number 2 in the sense that it is designed to cut out clutter and give the user what it wants, its style is also very similar. The drawbacks of this wireframe is that the ‘above the fold’ section of the site is simply an image with the logo and contact details which doesn’t particularly entice the user to scroll. The contact section of this page seems to be quite messy also.


Trip to Ferens Art Gallery

As a group we took a trip around Ferens Art Gallery to study the artwork, and gather information that we could use to help us understand the creativity that took place when firstly creating the art, and secondly arranging the artwork around the gallery.

The questions I asked myself about the images as I walked round the gallery were;

– What is the image content about, and what emotions does it provoke in the user?

– How does the visual layout of the artwork attract attention, and further interest in the artwork?

– How does the general layout of the art gallery and the presentation of work effect the viewer?

– How can the certain images manipulated for the web to its best ability?

– What do I personally like/dislike about the work, layout and general presentation?

I studied multiple images, and here are the notes that I have for each image.

Featured Image;