top of page

UNDER CONSTRUCTION. PLEASE COME BACK SOON! THANK YOU :-)

Batavia Gallery mockup 2.jpg
BLOOD.png

batavia
Gallery Website

Showcasing the Batavia Gallery through a visually immersive and interesting, well-functioning and easy-to-use website

The Batavia Gallery website was a fictional practice microsite made for the WA Shipwrecks Museum to showcase their main centrepiece - the Batavia Shipwreck, along with its many new and old collections. Upon landing on the new microsite, visitors get engulfed in rich, powerful visuals which convey the dark and turbulent past of the Batavia shipwreck - with a colour palette of black (symbolising mystery), red (blood from the massacre) and gold (lost sunken treasures). 

​

Besides aiming to teach and portray a look and feel of olden-day history, this museum website also has an exciting, modern design with a technical creative layout that shows a displacement of words, text boxes and shipwreck-related images - all inspired by the chaos and destruction of the rough seas and smashed-up wooden ship planks washed up on the beach.

batavia_gallery_hull.png

SITEMAP

​

Here is a basic sitemap that shows an overview of the website navigation and the connections of each pages with some leading to the Batavia Gallery. As you can see, there are some improvements made on renaming pages, simplifying options and rearranging the hierarchy/order of functions.

CRE312 Portfolio - VOLUME 3 (single pages) Alexis Tay6.png

WIREFRAME

​

This is an example of a basic wireframe that shows the layout of content and how users will navigate and locate certain functions for the HOME page. Design notes on the side help to explain and support the decisions made over the design, layout and functionality. 

wireframes.png

DESIGN COMP

​

After the wireframes, the next stage is the design comp. This page shows the initial design comp for the HOME, ABOUT and EVENTS page which went through several edits of improvements from feedback.

​

As you scroll down, there is a irregular placement of some graphic elements, buttons and text (asymmetrical layout).The mood throughout the website gives quite a dark, dangerous and chaotic feel all related to the theme of shipwrecks and the dark history of the Batavia - with a relevant image background such as the swirling rough sea water crashing into planks and rocks, and buried treasures on the ground. Therefore, the type of image, reddy image treatment, colour choice of red (blood) and gold (treasures), displacement of graphical elements such as the button, background graphic shapes and text is the key in connecting all pages and sections with this constant dark mood and shipwreck theme throughout the pages.

​

Ultimately, the sense of mystery, danger and excitement with the visual look and feel of the website achieves the website goals to help attract the wide target market of young children, adults and seniors of museums (from local Perth citizens, international 

design comp 1 - home.png
design comp 2 - about.png
design comp 3 - events.png

The design comp is guided by the client goals for the website:

​

(1) To give visitors the same amazing experience of exploration, learning, and endless wonder – just like how they would experience the museum physically in person. 

​

(2) To achieve a separate and distinctive look and feel for the WA Batavia Shipwreck Gallery that can convey the unique attractions of the Batavia.

​

(3) To showcase the new collections.

FINAL WEBSITE

HOME PAGE 

​

This is the final version of the website with real captured screenshots. It was coded using Bootstrap and launched live on Wordpress. Each section of the home page leads to a new page that is found in the top navigation bar. 

In arriving to the final build, the initial prototype website went through user testing with a few candidates. A few of the testers were asked to carry out 8 realistic tasks and were also asked about their opinions through the “think aloud protocol” method in where users voice what they are thinking. 

​

Based on the results, many substantial improvements were made on the design such as change of logo, lightening image background for text visibility, easier location of info/pages and better wording of pages and buttons, links, etc. 

website final - HOME 2.png
website final - HOME 1.png

ABOUT PAGE 

​

Talks about Batavia Gallery plus interesting stories about its actual dark history of rebellion, mutiny and bloodshed. 

website final - Exhibitions & collections 2.png
website final - Exhibitions & collections 1.png
website final - Events.png
website final - About batavia 1.png
website final - About batavia 2.png
Website final - visit page.png

The mobile version shows that the responsiveness works well when resized to fit smaller devices. 

CRE312 Portfolio - VOLUME 3 (single pages) Alexis Tay copy 4.png
CRE312 Portfolio - VOLUME 3 (single pages) Alexis Tay copy 5.png
CRE312 Portfolio - VOLUME 3 (single pages) Alexis Tay copy.png

In summary, from the user testing, I found out that the website still needed a lot of improvement.

 

The 2 main issues were: 

  • Website identity issue: one participant thought that the website was mainly about the WA Shipwrecks Museum when it was supposed to be about the Batavia Gallery 
     

  • Navigation and finding information for tours, opening times and address was difficult. 

To solve these issues, I carried out a few more improvements which were: 

​

  1. Changing the logo to show that its actually about the Batavia Gallery. 
     

  2. Including a button link under the VISIT page to EVENTS which will make finding tours easier 
     

  3. Adding address and contact number in footer so it is always there no matter what page they are at. 

bottom of page