A very busy week it’s been! It’s all been about creating the presentation to present to the Broads Authority on February 12th 2019 and with that came developing working prototypes and designing user journeys and perfecting user personas too!

Information architecture

The information architecture is where it all began. We considered as a group how the app screens should be ordered and what the user should see at what point. We considered:

  • How the app should be accessed
  • Where landing pages should be present and what information they should contain
  • The point at which the user is able to choose a theme
  • Where the experiences should be in relation to the themes
  • How and where help and information should be presented
The agreed information architecture for the web app.

Firstly, we agreed that each site that we create this web app for should have at least two themes associated with it – the information architecture diagram above shows a location that potentially has all three themes associated with it, but we know that the likelihood of a single site satisfying all three themes well is fairly low.

The three of us each took a separate location to design a prototype for. Prototypes were designed for Breydon Water, Burgh Castle and Carlton Marshes. Somerleyton Brick Works were rejected because they are off the ‘beaten track’ and we don’t know enough about the history of the location without completing more research at a potential expense. This makes it potentially poor value for money to develop an experience here. Beccles Fen also hasn’t been designed for as it covers a lot of the similar themes as Carlton Marshes.

We agreed that the entry point should be from a QR code, positioned on a relevant sign or signpost at the location. The user should be able to scan the QR code with a QR code scanner on their phone and it will take them to a landing page on the web app which explains a little bit about the app and/or the Angles Way in general. From here, the user should be able to move on to a screen where they can select a theme to find out more about. The themes are the same ones that have been discussed in previous posts about this project.

After selecting a theme to explore, the user is presented with another landing page, but this time it’s about the experience they’re about to have and it’s to give some context before they use it. At this point, the user is able to also access ‘P.O.I Help’ – point of interest help, which is more like ‘P.O.I info’ as it would likely be information related to the specific location than actual help content.

More specific help relating to how to use the app should be available during the use of the experience.

The arrows on the IA diagram show the direction of flow. Most flows are bi-directional, meaning that it is possible for the user to navigate forwards and backwards.

User journeys

The user personas were created on February 5th and using these personas I created a user journey (for ‘Claire’, in particular), showing exactly how she’d navigate through a web app showing how Burgh Castle looked in c.300 AD with her children.

When used in conjunction with a persona, a journey should have a goal. Here the goal is simply to be able to experience the c.300 AD interpretation of Burgh Castle.

The user journey shows how Claire and her children would navigate through the screens of the prototype to use the experience.

You can see that the user (Claire) starts at the screen on the left, which is the web app landing page shown on the IA diagram directly beneath the QR code entry point. Following this there is the screen allowing Claire to select a theme to explore. She wants to explore the history, so taps on ‘Cultural’ (the black and white image of a man wearing old-looking clothing on a boat on the broads also indicates that this about the history). This takes her to a screen talking a little more about what she’s about to see and she taps the forwards arrow at the bottom of the screen to move forwards. Then, she is in the 360 degree view where she notices the ‘i’ in the header area which tells her some more information about Burgh Castle.

Creating the prototype

Creating the prototypes with Ameer and Namii on the afternoon of February 8th 2019.

We agreed a ‘global identity’ together, meaning that the header area on each of our prototypes looks similar with the same colours, fonts, icons and font used across all three prototypes. This creates a sense of unity and shows that we have considered the global identity. The global identity was wireframed by Naomi and I using Axure RP and it was ‘skinned’ (fonts, colours and sizes applied) by Ameer who used Sketch.

My own prototype required a 360 degree image that panned around as you move the device to show how the ‘experience’ would look. Whilst prototyping software like Axure and Sketch are very good for designing static web-pages, they’re not so good for designing content, such as this, which is more interactive. Once again, I found myself needing to code a prototype to enable me to do this. I coded a very simple web app using HTML, CSS and JavaScript (with jQuery) which runs in a mobile browser.

The app prototype is a single HTML page. Each ‘page’ of the app is a separate div (but are all part of the same class of ‘pg’) which is shown or hidden depending on which button is tapped.

 

Very simple jQuery code was used to hide and show the divs. The benefit of using jQuery is that it has basic animations such as ‘slide up’ and ‘slide down’ built into it, negating the need to code my own animations in CSS.

The global identity that we had come up with was very simple – it was just the dragonfly logo on the left of the header and ‘Walk the Angles Way’ written in an Adobe font called Sofia Bold on the left of the header. I got the font file, dragonfly logo and colour hex codes from Ameer and was able to code this very simply.

Ameer had also designed some dialog boxes which were rounded rectangles with the same font and green colours as the header. These were also easy to code and replicate. I believe with him also being interested in coding and development that he deliberately made designs that would be easy to convert into code, which was good news for me!

In order to get the ‘experience’ made, I visited Burgh Castle on Saturday February 9th and used my Nikon D500 and a Sigma 17-50mm f/2.8 lens at 17mm to photograph a 360 degree image of Burgh Castle as it is today. I took approximately 22 photographs and stitched them together in Adobe Photoshop as a panorama to create the image that you see below. I used a tripod to ensure that the photos were all taken from the same point and the same angle to help maximise the chances of the panorama stitching correctly. It was a bright day, but not quite cloudless, meaning that on some of my photos clouds were covering the sun and therefore a few of the images are darker than others, as can be seen in the completed image below. This isn’t the end of the world – you can see the lines where some of the images are darker than others but for the sake of a prototype it works. Photoshop is very good at creating panoramas and uses very complex algorithms to determine where images should be cut and stitched together and in the latest version of Photoshop (which I used – CC 2019), it can now use content aware fill to fill in any gaps – previously you had to crop these ‘bank’ areas out which could result in a very short, but very wide image. Content aware fill helps to maintain the aspect ratio. This was my first ever attempt to create a 360 degree panorama (I’ve been doing photography for 7 years now) and although it doesn’t line up perfectly, it’s good enough for the prototype.

I created this (near) 360 degree image of Burgh Castle by taking approximately 22 images of Burgh Castle at 17mm and stitching them together in Adobe Photoshop.

 

I visited Burgh Castle with my D500 and a tripod to create a 360 degree image of it.

There are some key differences between the experience in the prototype and the experience in what would be the final web app:

  • The web app likely would not feature a 360 degree photograph of Burgh Castle – instead it likely be a very high quality, textured, 360 degree ‘conception’ drawn in something like Autodesk Maya or 3DS Max by an artist who would have input from historians who could assist them in drawing the area as it would have appeared in the Roman times. It would probably be easier and quicker to get an artist to draw how the area would have looked rather than attempt to manipulate a modern day photograph, like mine, to include a complete fortress and warships and people.
  • The image in the prototype is just ‘panned around’ when the user taps on it (there’s no call-to-action for this either, of course in a real app there would be) – it does not move with the phone. The real app would have a 360 degree image that moves with the phone, but I did not have time to figure out how to code this, so instead I just used a very basic JavaScript/jQuery script which simply pans the image around the screen and loops this motion.
  • There would be no need to tap the image to start the experience in the completed app.
The image is panned around using this very simple jQuery code. The div it is referencing has a background image set in CSS and it just pans around when the user taps or hovers over the div element.

Of course, there are other differences too such as the help content being much more detailed and the text on the landing page and the info dialog box being different, but for the sake of the prototype it is just to demonstrate where this content would go and how it could possibly look.

All three of our prototypes were designed specifically with the iPhone 6/7/8 in mind, so whilst it does run on other phones, it doesn’t always scale correctly or look perfect. It was designed for this iPhone in particular because we have an iPhone 7 at university which we can use to demonstrate software on and we decided to use this device in our presentation of the prototype. Additional media queries in CSS or Flexbox could be used to ensure that it scales well to all modern devices.

Watch the video below of the prototype running on an iPhone 6.

My prototype running on a Samsung Galaxy S8 at Burgh Castle. The mobile broadband is strong enough here to run the prototype, but the prototype doesn’t scale as well to this phone as it does the iPhone 6/7/8 it was designed for.

 

I did code a landscape view using CSS media queries, but for the purpose of the presentation the iPhone it was demonstrated on had the screen rotation locked to portrait.

By coding the app prototype as a single HTML page with divs that are hidden or shown depending on which buttons are pressed, I was able to add some jQuery animations such as slide ups and slide downs which help to improve the aesthetic appeal of the prototype and also add a small interaction design element to the prototype. Ameer’s concepts (made in Principle) show similar animations, so I wanted to try and include some of my own too.

The prototype was built loosely on the basic concepts that were shown to the WI in Beccles on February 1st. I took their feedback onboard about misunderstanding certain button labels and removed all button labels altogether and replaced them with icons. Normally I am against using buttons that are just icons and feature little-to-no text to describe their actions, but in this case I am using simple ‘forward’ and ‘backward’ buttons (using a ‘backwards’ button to replace the ‘Go back in time!’ button that the initial concept had to go back to the experience from the help content and also to replace an ‘X’ button to exit the experience) and an ‘i’ for information (to replace the ‘?’ which confused some of the WI members). Hopefully these will work as they may be conventional icons, but only user testing will tell.

The prototype was built loosely on these concepts shown to the WI on February 1st.

Naomi made her prototype in Axure, which is fine because Axure projects can be exported as HTML and CSS files and run in a web browser. We exported her work as HTML and CSS files from Axure and then placed the files in their own directory within my own project work. I then linked the ‘ecology’ button on my landing page to the relevant HTML page from Naomi’s Axure export and that was one link from my prototype to Naomi’s. When Naomi was designing her prototype on Axure she linked the dragonfly icon on her header to the URL of the prototype landing page, meaning that it linked there too.

Naomi’s prototype had a few display issues on the iPhone and the Sofia Bold font wasn’t being displayed, so we wrote a global CSS stylesheet to fix these issues and used the ‘!important’ rule in CSS to override anything in any of the many stylesheets that Axure HTML exports produce, which worked beautifully.

It all linked really well and it’s almost as if they were coded exactly the same way by the same person, which is what we were going for.

The presentation

We had several days to create a presentation to present to the Broads Authority on Tuesday 12th February. We collaborated on this together using Google Slides and broke the presentation up into sections for each of us to complete. The presentation covers everything that we have completed over the past month or so:

  • An introduction to the project.
  • Our user research methods.
  • The limitations of our user research (specifically that we only had access to a few focus groups, so the scope for research was rather limited).
  • An introduction to user personas – what they are and how they are used.
  • A description of each of the personas that we have created.
  • A description of the content audit – looking at what site currently has to offer in terms of interpretation boards and information that can be displayed.
  • The overarching concepts/slogans we created, what each one means, what each one might make a potential user think and what users thought of each one.
  • What the mobile experience must be like.
  • Ideas for interaction design and animations between elements (designed by Ameer).
  • An overview and explanation of the information architecture and how the web app will be structured.
  • An explanation of the concept of user journeys/flows
  • A diagram of each of our user journeys, showing the flows and the directions of operation.
  • An explanation of what high-fidelity interactive prototypes are.
  • A slide dedicated to each of the three prototypes to explain what they are and how they work.
  • Ideas of how existing signage could be linked to the web app via the use of a QR code or similar.
  • How a potential website dedicated to this project could look and work.
  • A description of what happens next.

The presentation is available to view below.

The presentation went very well. We all contributed to its creation and we all spoke about the same amount during the presentation. Naomi and Ameer were great people to present with – they were confident and knew what they were talking about which helped to make the presentation go very smoothly and make us sound very polished and professional.

The reception was great – the Broads Authority and stakeholders enjoyed the presentation and commented that they thought we had put a lot of effort into it, had covered a lot of detail and also explained the technical jargon in a way that they could understand. All three prototypes were very well-received, they were impressed by the uniformity of them. Several stakeholders requested copies of the presentation and they were interested in inviting us to a board meeting to discuss this project with more stakeholders.

The only comment was from the Broads Authority and it was about the difference between the contextual help and the information specific to the point of interest (the site). The P.O.I information confused them a little bit because on the IA diagram it is shown as ‘P.O.I help’ but I explained to them that the little ‘i’ symbol usually means information which cleared up their query.

Time management

Throughout the project I have been keeping track of time using a Gantt chart.The chart makes it easy to how long tasks were expected to take and shows the order in which tasks were completed. The tasks were all completed in the correct order and on the whole the time plan was stuck to. It was realistic to include some gaps in the planning, these gaps often ended up days in which I completed other tasks or redid some tasks that I thought didn’t go so well. Time planning has played a huge part of this project, I’ve had to balance very short turnaround times with other university commitments which has meant that I’ve had to work very fast and be very productive.

Concluding thoughts

This project has certainly been very intense – a lot has been done in the month or so that I’ve been working on this. From hearing the initial brief to conducting three sets of research to taking findings from each and eventually producing a (semi-) working prototype, I have really enjoyed this project. So far we have covered just about every stage of the UX process to develop and deliver a high-fidelity prototype that has been constructed from the ground up using solid user research.

There hasn’t really been anything wrong with this project or anything that I’d change, other than the focus groups that we had access to. Of course, time and contacts prevented us from talking to a bigger variety of focus groups to get more insights and the nature of the project just means that the potential size of the user group is vast.

I feel that in the short time we’ve had, we have all done a great job and have made high-fidelity prototypes that work well and fit the theme as well as take into account the user research that we have conducted to produce a successful end product. I’m very pleased with all of the work that I have produced and the feedback and reception from the Broads Authority has been absolutely fantastic! Hopefully this proves that my idea and prototype could work and could be formed into a real working web app.

Next steps

Phase 2 will form BSc2b (Phase 1 has formed part of BSc2a in conjunction with the design toolkit tasks completed between October and December 2018 before this project began) and will be a collaborative unit with Year 2 graphic communication students. It’s my understanding that the graphics students will be focusing on helping us to develop the identities and signage and that side of the project, whilst we could develop what has been done so far. I’ve worked with graphics students in the past on private projects and have always found their knowledge, enthusiasm and expertise to be very helpful – they often provide a lot of insight into visual design, colour theory and typography which combined with my knowledge of usability, research and development helps to create a perfect product.

‘Evaluating successful user-centred design’ report

The report is now finished! It stands at just over 3,000 words which is fine and includes six case studies, the requirements only call for five. It also features dialogue directly from an industry professional and a range of examples of good user-centred design, from websites to apps to point-of-service systems. It was a very interesting report to research and really opened my eyes up as to what UX agencies really do the the variety of work that they receive. I’m pleased with what I have produced, but if I could do it again I think I would maybe some include images of the old and new systems which could help to illustrate user-centred design, however as the report is about user-centred design and not user interface design I decided not to include any.