Week 4: Wireframe Construction for Concept Document

As a part of my contribution towards my group and our application process, I went absolutely crazy and mapped out the entire site in wireframes. These wireframes were created through the storyboards made the contact session we had this week (Friday 19th Aug.).



Wireframes: [created by Gabrielle Burey 43915316]

Wireframe: Login Page [1]

The login page will be accessed on the first page of the user's journey through HISPLORE (HISPLORE is the official name of our project). The page will ask for a username and password, new users are able to click on the "I Don't Have an Account" button where they are able to create a new account as shown below in wireframe 2. The information and options buttons are easily and universally accessible throughout the whole application. 

Wireframe: Create an Account Page [2]

The create an account page will simply ask the user for a username and password. For form checking and prevention of human error, the password chosen by the user is to be written again. After an account is made, the user will be redirected to the login page as shown in wireframe 1. The information and options buttons are easily and universally accessible throughout the whole application. 

Wireframe: TimeMap Main Page [3]

This page inhibits the main part of the application, the TimeMap (a combination of two interactive tools: a timeline and map provided by Google Maps API). A search bar will be provided universally throughout the application page (apart from the login page and create an account page - wireframes 1 and 2). A button to the user's account will be provided on the top left hand corner, this will direct the user to wireframe 7. Filters will be provided for the user to limit search entries to finding a more certain and direct collection of documents they are looking for. The filter includes: the category (ie. Books, Diaries, Articles, People, Photos, etc.) and the year range (some documents on Trove can go back a few centuries!). The information and options buttons are easily and universally accessible throughout the whole application. 

Wireframe: Pin Interaction [4]

When a user has searched for their query, a set of result will pop up as locational pins on the map (based on the latitude and longitude of the document) and also on the timeline (based on the document's date). This wireframe shows this interaction where simply the user will click on the pin and the document will come up allowing the user to see the results. 

Wireframe: Information Page [5]

The information page will provide the users a run-down version of the application with simple and coherent descriptions. The search bar, account button and option buttons are all available on this page. Clicking on the information button again will bring the user back to the original page. For more user understanding, the information button (when pressed/on the page) will change into a back button. 

Wireframe: Options Page [6]

The options page will allow the users to change the options where acessibility concerns come in. This means that the users can change the colours to suit their needs (to accommodate those who are colour blind) they can change the size of the text and also enable text-to-speech capability as provided by an external API. A "help me" button will be provided which will give the users descriptions of the options and so on. The options button will change into a back button to aid navigation. The search bar, information and account buttons are all easily seen. 

Wireframe: Account Page [7]

The account page will allow the user to see their pinned searches - a feature we have added to introduce more interactivity and enhance the application altogether as an educational tool. The same filters will be included as on the TimeMap wireframe 3. A back button is provided where the account button was. The search bar will be still made accessible throughout the site. The information and options buttons are easily and universally accessible throughout the whole application.