Contextual Project Presentation and Links

Here are the links to my Museum Contextual Project based on the Amy Johnson Exhibition at Sewerby Hall and Gardens:

Blog:

Invision Application Walkthrough:

Presentation:

Advertisements

Improvements and Alterations

After reassessing my finished site I thought it would be good to try and age the app slightly and looked at the following to do this:

Placing the photographs in polaroid frames to give a vintage feel, similar to below:

Screen Shot 2016-01-17 at 14.00.20

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Screen Shot 2016-01-17 at 13.59.18

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

I looked at ageing the map overlay slightly, I changed the colour to do this but still feel this could be aged more using photoshop.  This is something I want to learn more about and look into.

Screen Shot 2016-01-17 at 13.54.54

 

 

 

 

 

 

 

 

 

 

Screen Shot 2016-01-17 at 14.26.56

 

 

 

I thought it would be good to add a texture to the background of each page similar to the examples below but was unable to implement these changes due to time constraints.  I thought a texture although subtle would add more depth to the app screens.

subtle_white_feathers Screen Shot 2016-01-17 at 14.31.42

 

 

 

 

 

 

 

Contextual Project Evaluation

This project has been a huge learning curve for me.  From the beginning when I had little or no knowledge of design principles or the software skills needed.

Things that I have learnt –

  • Project planning tools – Tom’s planner
  • Design tools – Adobe photoshop, Adobe Colour, Adobe Illustrator
  • Discovery phase – persona, style approach, mood boards
  • Importance of colour in design and using the correct fonts
  • Wire framing
  • Presentation tools – Prezi, InVision, Powerpoint

Areas that I need to look at and research more in the future:

  • Screen resolutions
  • Website/app navigation
  • All areas of the design process

Possible further app development:

  • Only designed for iPad in horizontal view needs also to be designed in vertical view
  • Could be developed further to work on visitors mobile phones

I looked to create an app which would engage visitors more and allow them to interact with the exhibition already in place at Sewerby and make their visit more interesting.  I have looked to include sight and sound engagement with the exhibition via the app which was my intention and I feel I have done this through QR codes, question areas, video and music.  In the app I did originally have three questions on each page relating to the boards of information but changed this to two questions on each page as I felt three was too many and visitors would loose interest after two.

Working through and following the Discovery Phase principals really helped me with this project.  The Discovery Phase and the idea of creating personas was something totally new to me, I understand now how each step of the discovery phase is extremely important in designing the best possible user experience and overall this is an extremely important design principle.

Have I been able to keep to Tom’s Planner schedule? Time management was a problem for me as I needed to learn the design tools having not used the Adobe Suite of programs before.  The research phase of the project I kept to the timescales, it was when I started designing that I feel I began to get behind my planned project schedule.  I had hand sketched ideas it was transferring those ideas into photoshop so that I could get a better feel for how the design would look, now looking back I feel I have a good basic knowledge of photoshop which I can develop further and I would also look at Adobe illustrator more and see how this compares.

I have used Moqups to design my wireframes, with future projects I want to learn and look at other wire framing tools including Balsamiq so I can then compare which I feel works the best and be used and developed further through the design process.

As this was a conceptual project I felt I could give more time to the design process and learn more about each step which will make it easier for me to transfer these skills onto new projects I work on.

My research into touchscreen we use in everyday life was quite eyeopening I don’t think we are always aware that new technology is being used more and more in public places and everyday life we just become more accustomed to it.

I was happy with the final design although I was disappointed I was unable to develop the game further, mainly due to time constraints.  I looked at Adobe After Effects to demonstrate how visitors would interact with it, this is something I would like to learn more about.

 

 

 

 

 

 

 

 

 

 

Final Designs

These final designs have been created using Adobe Photoshop CS6

Screen Shot 2015-12-29 at 12.27.50

 

 

 

 

 

 

 

Screen Shot 2015-12-29 at 16.07.53

 

 

 

 

 

 

 

 

 

Screen Shot 2015-12-29 at 15.54.56

 

 

 

 

 

 

 

 

 

 

Screen Shot 2015-12-29 at 15.55.14

 

 

 

 

 

 

 

 

 

 

Screen Shot 2015-12-29 at 15.55.26

 

 

 

 

 

 

 

 

 

 

Screen Shot 2015-12-29 at 15.55.43

 

 

 

 

 

 

 

 

 

 

Screen Shot 2015-12-29 at 15.55.54

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Map Overlays

Ground Floor

Screen Shot 2015-12-28 at 19.13.50

 

 

 

 

 

 

 

 

 

 

 

 

 

 

First Floor

Screen Shot 2015-12-28 at 19.11.58

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Sample Question and Answer Screens Overlays

Screen Shot 2015-12-28 at 19.16.32

Screen Shot 2015-12-28 at 19.16.57

Screen Shot 2015-12-28 at 19.18.05

 

 

 

 

 

 

 

 

 

 

QR Code scanning and information screens

Screen Shot 2015-12-29 at 16.25.48

Screen Shot 2015-12-29 at 15.56.07

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Interactive Game

Though my research of the target audience and demographic and I looked at including an area in the interactive application for younger visitors.  There are already some hands on exhibits within the exhibition and I looked at designing a game for this age group for them to access from the app.  These are the initial designs below, time constraints did not allow me to develop this any further.  Initial ideas for the game are for visitors to select items from a list which they think Amy Johnson took with her to Australia the items then move into the bag, and the visitor presses the red ‘start the engine’ button to see if they are correct.

Screen Shot 2016-01-01 at 13.53.31

 

 

 

 

 

 

 

 

 

 

 

The items then appear to move into the bag:

Screen Shot 2016-01-01 at 13.53.16

App Design

As the application icon is the first and initial part of the system I wanted to link this to the whole application in some way.  I researched product icons to learn how to best communicate through such a small area on the screen.  From my research I found that they need to be:

  • Simple
  • Bold
  • Colours reflect brand/product identity
  • Key elements reflect brand/product identity

From my research this is my finished design for the application icon.

Screen Shot 2015-12-28 at 20.09.27

User Journeys

User journey 1  – user selects question 1 from ‘Early Years’ screen and answers the question correctly

Screen Shot 2015-12-29 at 22.33.13

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

User journey 2 – user selects map to find location

Screen Shot 2015-12-29 at 22.32.33

 

 

 

 

 

 

 

 

 

User journey 3 – user scans flight bag QR code in memorabilia cabinet to find out more information

Screen Shot 2015-12-29 at 22.32.06

 

Amy Johnson Project Wireframes

The wireframes below for this interactive application have been created using moqups.com.

  • first page user sees when opening the application

Screen Shot 2015-12-29 at 13.32.26

 

 

 

 

 

 

 

 

 

 

  • Swipe to right for menu page below

Screen Shot 2015-12-29 at 13.32.41

 

 

 

 

 

 

 

 

 

 

  • swiping to the right reveals 5 similar page designs each relating to an area of the exhibition

Screen Shot 2015-12-29 at 13.32.54

thumb_IMG_3988_1024

 

 

 

 

 

Screen Shot 2015-12-29 at 13.32.54

thumb_IMG_3989_1024

 

 

 

 

 

 

Screen Shot 2015-12-29 at 13.32.54

thumb_IMG_3987_1024

 

 

 

 

 

 

Screen Shot 2015-12-29 at 13.32.54thumb_IMG_3985_1024

 

 

 

 

 

 

 

Screen Shot 2015-12-29 at 13.32.54thumb_IMG_3978_1024

 

 

 

 

 

 

 

Wireframe design for QR code scan results below:

Screen Shot 2015-12-29 at 13.33.06

 

 

 

 

 

 

User Journey Wireframe

FinalWireFrames