St Vincent, Balliceaux & Bequia interactive map project

The brief

The aim of this project was to produce an interactive map of the island of St Vincent, with Balliceaux and Bequia islands over a 12 week period.

The purpose of the interactive map was to teach the people living in that part of the world about their own history and culture.

As most of the people who live on those islands don’t have access to this information.

The main requirement of this interactive map was that it needed to be produced using word press, so that the website could be easily updated for future admins.

Group brainstorming idea session

There was no need for pleasantries in our first meeting as a group, as we all already knew each other and what disaplines everyone was doing.

I took control on the group because eveyone was a bit shy at first and from there, I suggested we do a group brainstorming session to generate possible ideas and outcomes for the project.

At the end of the session we all collectively decided that there would need to be certain features and requirements into order to make this map successful and to meet the client brief.

From this I took it upon myself to write down any queries that needed to be clarified and possible ideas ready for when we had our first client meeting with our client.

Client meeting

character mood board

I first contacted Christina Welch regarding a client meeting, this was to gather a bit more background information about the project. I also wanted to know what her hopes and thoughts for the final outcome of the project might be.

I lead the meeting for our group asking various questions and idea that I had previously wrote for this meeting. (A couple of my questions can be found in the image to the left.)

Christina went a little more into depth about the project and why there is a need for it. After clarifying everything that was needed, we then had the information needed to start this project.

Gantt Chart

character mood board

This Gantt chart was made for the purpose of displaying it when we presented our project ideas the our peers.

These roles were not set in stone, but it was what everyone started to follow and refer to through out the course of the project.

Wireframes for the UI

Due to me not being allowed to take on any of the branding for this project, I took it upon myself to find a role in this project. I decided that my task for this project was to make a protoype of our interactive map and how this map would work. I concluded that the best way to tackle this task was to create wireframes for the UI of the map.

The process of wireframing allows me as a designer to layout content and functionality of the map pages, which takes into account user needs and journey. Below is the user journey of how the user would navigate through the main features.

main page, you can click on either 3 of the islands
Once clicked on island, points of interest pop up
image point of interest - will display image and image information
3D model point of interest - will display 3D model of artifact
There will be a info button you can click to learn more
3D environment point of interest - there will be interactive 3D scenery

Implementing our teams brand

The branding for this project was created by the other designer in our group. I did not think the colour scheme or logo was up to a good enough standard for this project, but as this member refused to communicate with me, this was the content I had to work with and implement into my protoype.

The refusal of communication became a real issue in week 12 when we had to present our projects via ZOOM. There were clear inconsistencies with the brand, as I was failed to be notifed that the whole branding was changed at some point.

St Vincents original logo
St Vincents original colour scheme
St Vincents original typography

Map location points of interest

An important requirement of the interactive map was that it had to have 4 tabs with points of interest. E.g. You have a historical tab where all historical info and points of interest would pop up on the map. I needed a way to mark on the map where the points of interest would be. So, I used googles idea of using icons to locate where points of interest were.

The historical icon is inspired by an ancient statue head found on St Vincents, I created this icon in a application called Procreate.

The Ethnobotany icon is a generic plant illustration I created in Adobe Illustrator.

The Garifuna icon uses the Garifuna flag colours and is in the shape of a heart. My reasoning behind this is that the shape represents the idea of community. I created this icon in Procreate.

The Contemporary icon is inspired by the symbols at the forefront of the new St Vincents flag, this icon was created in Adobe Illustrator.

Historical icon
Ethnobotany icon
Garifuna icon
Contemporary icon

Development process of the protoype

character mood board

I decided for the purposes of the protoype I was going to make it for mobile first and maybe at a later date create it for PC.

The reasoning behind this is that most people on St Vincents, Balliceaux and Bequia will come from disadvantaged backgrounds. They will not have access to fancy PC's and laptop's, but probably have some form of mobile device. So, I felt this is best suited for mobile.

Using Adobe XD I started to create the prototype using the original branding and my wireframes.

Protoype of the interative mobile map

Using Quicktime player I screen recorded an example of what the prototype looks like and how it functions.

I then posted this in the group powerpoint so that the developer in the group could start to work on the real thing.

3D concept models of protoype

I decided to create 3D concept models of what the interactive map would look like on a mobile device. (I also created one for PC aswell.)

|