Finished Website

www.misanjiexhibit.co.uk

Analysis of Work

I found this project to be very interesting as it tested my skills in more than one part of web design such as making a mock up and replicating it, using a new coding library in Foundation and approaching a website from a marketing point of view which was new to me.

If I could change one thing it would be how much time I set aside for aspects of the project. Trying to get the SEO to work took up a of time I could have spent improving the content management system or adding more interactive elements to the website. So next time I'll do my best to manage my time efficiently.

Facebook

Facebook easily integrates in to the website using a snippet of code that displays how many people like the page and shows if any of your friends on Facebook like it too. You can like the page from the homepage of the website or direct on the Facebook page which is www.facebook.com/misanji. On the timeline for the Facebook page there are status updates which informs users about what to expect from the exhibit and how many days are left until the exhibit.

jQuery/Foundation

I shall be using the Foundation CSS/jQuery library to create my website, this will be useful for adding calls to action and sliding image galleries on the pages of each element.

Google Analytics

Navigation

As per the brief the website requires a simple flowing navigation through out the website which can take the user to at least four separate sections. To do this I created four icons, each one has an image of an element with the text for each one underneath, when a user hovers over the icon a line shows below the text.

Misani | Final Mock Up

Domain Registration

I purchased the domain www.misanjiexhibit.co.uk for ease of access during this project. This will also help for when setting up Google Analytics and tracking statistics.

Misanji | Designing for Mobile

Above is the website viewed in landscape orientation on the Nexus 7, the browser realises there is no need to switch to the mobile version when displayed like this.

When the website is displayed in portrait orientation it switches to the mobile stylesheet, in this version of the website a few elements have been removed to make it easier to display content. The navigation is now just a simple strip of colours.

Devices Tested: iPhone 4, Samsung Galaxy SII & SIII, iPad, Nexus 7, Blackberry

Misanji | Revised Mock Ups

In this mock up I added icons of each element to the navigation and changed the gallery from the previous design to an image of the museum.

In this mock up I added a countdown to indicate how many days are left until the exhibit opens. I still needed another call to action so I decided to move this to another position.

The countdown is now displayed over the museum image which made room for the second call to action which encourages users to sign up for the newsletter. Social media icons have been added underneath the BMoS strip at the top of the page so users can easily access the social aspect of the museum.

Misanji | First Mock Up

The first mock up I created used a very basic navigation and gallery which I later decided seemed out of place on the homepage of the website and the space could be used for more important content like a call to action.

Target Audience

The museum is looking for a website that integrates interactive elements in to a website that appeals to both younger and older audiences.

What are similar websites doing?

MAGNA

As MAGNA is the most similar exhibition to the one described in the brief, I decided to use this as my primary research for the target audience. Their target audience ranges from young children to seniors and whole families. When first visiting the website it is clear that it is portrayed as an exhibition for the whole family by showing images of families/children interacting with the exhibition.

The navigation is clear and easy to navigate, each part of the navigation splits up in to a sub-navigation with further options for the user to select.

MAGNA Research

As part of my research I visited the MAGNA Science Adventure Centre in Sheffield which runs a similar exhibition to the one described in the brief. The centre is split up in to four separate sections, one for each of the elements; wind, earth, air and fire. Each section gives visitors a hands on experience to interact with demonstrations relevant to each element.

Their website uses a lot of graphical elements to show customers interacting with parts of the museum since it would be hard to convey it through text. I think this is a great idea and I shall incorporate it in to my website, using limited text and mainly images/video.

Magna | Science Adventure Centre