A busy week, starting with catching up with the graphics students on Monday to see what they have been making to spending two days off-timetable doing ‘interchange’ events to presenting our project to the Broads Authority on Thursday 14th and finally assigning roles to the team on Friday 15th.¬† A great week!

Monday March 11th

As well as experimenting with CSS Scroll Snap, on Monday Ameer and I caught up with the graphic communication students in the afternoon to see what they had made. At this stage, they had completed working on the visual identity, coming up with a lot of very nice-looking assets, a brilliant colour palette and a very smooth prototype of how an app for our project could look in Adobe XD. Look at the video of it running below on Chloe’s MacBook.

The video shows a lot of their new assets that they have developed for this project, as well as drawing inspiration from the landing screen and aesthetic that Ameer developed in February when we first presented this to the Broads Authority. For example, see how they designed the landing screen in comparison to Ameer’s February prototype:

The graphic comms students liked Ameer’s initial design and in addition to the slanted image angles, also added colour coding to the different themes, for example the cultural diversity (they changed some of the names of the themes to names that they thought might be easier for the general public to understand) theme has an orange colour, which is carried over into the app experience landing screen, seen below.

Colour coordination was added by the graphics students to help the user keep track of where in the app they are.

You can see here that the graphics students looked at the information I provided them with which details which sites fit the three themes best and followed my recommendation that the 360 degree image experience works best for the sites about cultural heritage. In this example, they’ve used my image of the church at Ashby St. Mary to illustrate the cultural heritage theme.

Their prototype was not designed entirely based on what Ameer had made previously or what they had seen from us, they had gone and researched similar existing apps such as the National Trust posters which also use colour consistency to produce a strong visual identity. Interestingly, the National Trust posters actually have similar themes to the app we are producing for the Broads Authority – one is based around the heritage of a building (Ickworth Hall is the example shown below), one around nature and one around investigating how people used to live (the Romans, shown below).

The graphic communication students investigated how colour was used consistently in the National Trust app (courtesy Chloe Turner).

Building on from Naomi’s ‘Hidden Habitats’ idea which was presented on February 12th, the graphics students researched similar apps and found that the RSPB Identifier app allowed the user to identify birds that they have may have seen by asking a series of questions to eliminate possibilities and furthermore it offered a ‘badge’ system for the user to collect points or badges each time they successfully identified a bird. They linked this to encouraging the user to return to the app and identify more birds – something that Naomi and I as user experience designers would need to test to see if this was true or not.

On Friday 8th they spent some time selecting colour palettes for the app, as explained in my post from that day, they wanted to go with something that wasn’t the cliche green or brown to use for an outdoors app, so the palettes below were considered:

Initial ideas for colour palettes from the graphics students.

They asked us how we felt about these colours and in the end we selected the palette below.

We felt that the orange text and the dark grey/blue background looked mysterious, inviting, premium and also modern. We also felt that they would translate really nicely onto a web app –¬† it would look really modern and aesthetically appealing, as you can see from the video of the prototype that the graphics students made in Adobe XD.

They also created a brand mark, shown below:

The brand mark created by the graphics students.

The brand mark is an abstract ‘AW’, but it also looks like a meander of a river and could be interpreted as the treadmark of a boot, which is something that the students have explored before. It looks modern and also not cliche at all, which is very nice to see.

Using their brand mark as inspiration, the graphics students also created some potential icons for our project:

These icons are designed using their design language and feature variations of their brand mark. They experimented with how changing the shape of the brand mark could be used to form icons, such as an icon for each of the three themes. The landscape icon depicts hills, the heritage icon depicts a windmill and the biological/ecological icon depicts birds flying. Various other icons such as forwards, upwards, downwards and backwards buttons can be created by altering the shape of the brand mark – as well as a close and search icon. These icons have not been put through any kind of user testing and with icons being a very subjective matter (as my testing on my own work about a year ago will prove!) there will need to be testing done to make sure that they are logical, easy to understand and can be adapted to different situations, such as working on different-sized devices and also against different coloured backgrounds and images. The graphics students appear to have stuck to very conventional icons, so hopefully the icons will be understood, but I can’t help but remember that when we got the Women’s Institute to test some concept interfaces for us on February 1st some fairly conventional icons such as a ‘?’ for help and an ‘i’ for information were misunderstood. This just proves that we cannot rely on ‘what’s conventional’ alone to get us through this.

We [the BSc students] haven’t had a lot of time lately to really delve deep into what the graphics students have designed. On Tuesday 12th and Wednesday 13th March we were all off-timetable and attending non-course related sessions and on Thursday 14th we were at the Broads Authority offices delivering a presentation about what we did. However, we have all seen the images shown in this post and we all really like what they have done on the surface. We think it looks like a really good start and could be an appropriate interface, typeface and design language for this project.

What the graphics students have designed is a great start!

In order to create the work they have completed on the app prototype on Adobe XD, the graphics students have also been out and collected some leafs and other bits of nature from the area and started creating some prints from them. They hoped that these would help them to think creatively about how they could produce a design that related to the nature of the environment by using textures and shapes. This helped them to create the identity that they created which didn’t use cliche colours in order to depict the theme of nature.

The graphics students in the design studio creating prints of leaves (courtesy Corrina Mark).

 

Printing a leaf (courtesy Corrina Mark).

I am looking forward to seeing how they develop this going forwards.

Additionally, Chloe Turner has also been working on creating collages – as mentioned a little in the previous post about this project. Chloe’s use of collage produces a visually-appealing image that can be used to express several different seasons or activities in the form of one image. The idea of this is that these could be used to advertise the project and also appear within the app.

Chloe’s collages form a part of the visual identity (courtesy Chloe Turner).

The image above is a screenshot from Chloe’s own reflective work, in which she explains that the collage also cements the group’s agreement to not produce a cliche brand. They aimed to produce a brand that was different to that of other National Parks, though they have used marketing material from current national parks and similar organisations (such as the National Trust and English Heritage) to begin creating a visual identity for the Angles Way project.

It’s been great to see the amount of work and attention to detail that the graphic communication students have put into this project in just a week. I probably haven’t done it justice in my write-up, but the next steps are to assign jobs to different people and then keep developing these ideas and combining them with our research and coding ability in order to produce something that could well end up being quite spectacular.

Tuesday March 12th and Wednesday March 13th

I spent two days participating in the NUA Interchange Day, learning how to get my dream job and improve my professional practices on the 12th and finding out about domes and how they can actually be applied to just about anything on the 13th.

Two days off timetable has meant that I’ve had twice as many reflective journals to write because not only am I writing my own work from this week (as well as that of the graphic communication students), but I also had to write all about that in the same amount of time! This has made this week very busy indeed, but I got a lot out of the two sessions and it’s great to support these kind of events – especially as they benefit me directly by expanding my knowledge, improving my professional practice skills and contributing directly to LO6 of my grade.

A full account of my experiences can be read here!

We all enjoying building the giant dome!

Thursday March 14th

Fast forward to the 14th and it’s presentation day! Today we presented our work to the board of managers at the Broads Authority at their offices in Yare House, Norwich, to see what they thought of our work and whether or not they felt we are on the right kind of lines or not.

The presentation that was delivered was the same one that was delivered to the Broads Authority when they visited NUA on February 12th, but with several key modifications:

  • It included work that we had completed since February 12th, most notably:
    • All of the work that the graphic communication students had produced – they made their own slides and sent them to us to include, many of the slides appear in this post as the images above!
    • Information on the three key prototypes that we have begun to develop: the 360 degree image experience, the history app on a grid template (documented here and here) and the nature identifier app. We did not show them any live prototypes of these however, just talked about them and diagrams of how each worked shown.
  • Several slides were modified, notably:
    • There were fewer user personas documented in detail on the slides.
    • The two main personas that we focused on (‘Geraldine’ and ‘Claire’) were much-reduced in content.
    • Ameer’s interaction designs were slowed down to allow them to speak whilst they were running.
    • The information architecture diagram was simplified.
    • The image on the introduction page about user journeys was changed to hide all text on the screenshot to negate the potential for the audience to be distracted by the text on that image.
    • The user journey for Naomi’s ‘Hidden Habitats’ app was modified to include fewer screens and make sure that only one line was shown.
    • The image on the slide about the project website was changed from the image of my old project work to a picture of the current Water, Mills and Marshes running on a phone.
  • One additional slide was added – a map of the Angles Way with the sites that we have visited marked on the map to show the board members where we have visited.

The vast majority of these changes were made to update the presentation to include an additional months’ worth of work and to cut down its length, as well as make it easier to explain and understand to a less-technical and/or less-informed audience than whom it was originally designed to be delivered for. We only had approximately 20 minutes to deliver our presentation¬† – 10 minutes shorter than the original presentation from February and we had more content to cover.

These changes had to be made by us in approximately one hour in the morning as we hadn’t been in to see our tutor to discuss the changes since last Friday. We used Microsoft OneDrive to edit and collaborate on this. By storing the document in the cloud, we were all able to edit it at the same time on our computers which massively increased the editing speed. OneDrive is also a Microsoft product, so the format of the PowerPoint presentation is exactly the same in OneDrive as it is on your computer stored locally. This means that when you do download it the presentation looks and functions exactly the same. Sometimes when you download a presentation made in Google Docs or something similar in Microsoft PowerPoint the formatting can be a little off.

Naomi and I editing the presentation shortly before we left to go and present it.

The presentation itself went really well and was well-received. There were some small IT issues which weren’t our fault, but we all recovered the presentation really well. The three of us spoke with confidence and enthusiasm which kept the board members gripped and interested in what we had to say. Our exuberant presentation style meant that we were able to deliver a passionate presentation that was understood by the board members and got them to ask us questions at the end and suggest extensions. Jamie’s delivery of the graphic communication students’ work and the information about what is going to happen next was very informative and also very well-received by the Broads Authority.

We hadn’t practiced the presentation at all, but managed to deliver it on time and with professionalism. I felt that all three of us really knew what we were talking about, so we were able to just stand up at the front and tell the board members all about our work that we have invested nearly 3 months in so far. One of the audience members from the February presentation left some feedback for us which we acted upon for today’s presentation – his two main points were:

  • Slow down the animations in the interaction prototypes so that users aren’t looking at those whilst Ameer is speaking about them.
  • Continue to define ‘UX terms’ such as ‘user personas’, ‘user journeys’, ‘interactive prototype’ and ‘ethnographic research’ in a way that anybody could understand.

We ensured that we did these two things for this presentation.

The presentation was delivered at the Broads Authority offices in Yare House, Norwich.

The reception and feedback from the board was excellent, with many of them commenting on how they felt that the presentation was professionally and confidently delivered and was gripping. Some very good points were raised:

  • They asked how children could be included. Naomi explained that whilst the app was ‘designed for everybody’, it was unlikely that a child would have a smartphone, so ideally a parent would accompany their child when using this app. I explained that this could help to turn using the app more into a family or even group activity, but could still have solitary purposes too.
  • Suggesting other points of interest to visit based on where you’ve been and which experiences you’ve used was raised. I explained that initially we are looking at a small section of the Angles Way, but if this worked and was ever deployed to the whole 93 mile walk then perhaps the scope for other points of interest could be increased. The board suggested that ‘contrasts’ could be used – for example if you visited the wetlands of Carlton Marshes at the eastern end of the walk, then perhaps it could suggest you visit the woodlands at Thetford Forest at the western end. Two contrasts there!
  • It was asked if information or experience was at the centre of our app – the answer given was that both are equally important, but ultimately finding out and having the information backs up the end for the experience existing in the first place.
  • The board wanted to know if the QR code or a URL would be easier for people to use. We couldn’t give them a straight answer as we haven’t really researched it yet, so this is something that we need to do. Interestingly, after the presentation and questions, one of the board members asked what a QR code was. We can’t assume that everybody knows what they are or how they work.
Our presentation on the board in the boardroom and ready to go!

The discussion about the QR codes gave us an opportunity to try out these solar-powered Wi-Fi boxes. We are having a full demonstration of how these work on Thursday March 21st, but essentially these are little devices that will be installed at the locations tat run entirely on solar energy and provide Wi-Fi access. They also contain local storage which can be used to house data that the user can access when connected to the network. This data is not accessible on the World Wide Web, rather only the local servers, but the way that our app would work is that at each site one of these little devices would be installed that the user would connect to to access the content, which negates the need for mobile broadband. At the moment all you see in the browser when you connect to one of these devices is a generic landing page, but it does not take you there automatically. At the moment you need to type in the IP address of the device into the browser URL bar to access the content. This isn’t user-friendly unless you tell the user exactly what to do with the IP address to access the data.

Content on the Wi-Fi boxes is fairly generic at the moment.

More about these devices on March 21st.

Jamie also suggested Oulton Broad as a potential location to conduct user testing for Angles Way apps, because:

  • It is accessible by road and train easily – so we can get there.
  • Being on the edge of Lowestoft, the second-most populous town in Suffolk, there are a lot of people we can conduct ethnographic research on.
  • There are currently no interpretation boards at the site detailing some of its history or relation to the Angles Way.

It seemed at first that the board weren’t that interested, but upon being asked they all agreed that Oulton Broad would be an ideal test candidate.

It was a very successful day with a lot of progress made and a very good presentation delivered! The Chairman of the Broads Authority said that our idea ‘ticked all of the boxes’ by getting people to go outside, improve their health and improve their well-being – whilst also having fun and learning about the environment around them.

We visited the Broads Authority offices in Yare House, Norwich, to deliver our presentation.

Friday March 15th

We spent today with the graphic communication students, looking in more detail at the their work and completing paper prototyping exercises to determine if assets are in the correct location. We then created a small prototype in Adobe XD and then found some random students at university to give us their thoughts on the prototype as they used it. Jamie also told us that between now and next week, myself, Ameer and Naomi would need to get to grips with the jQuery Mobile framework because this is what we’re going to use to build the evolutionary prototype. Next Friday is the day where we will be starting to make the prototype.

Paper prototyping

Jamie introduced the graphics students to the idea of paper prototyping and soon we were creating prototypes with elements that we could move around and experiment with. Naomi did a great job of fully introducing the concept to the graphics students and ensuring that they understood what we were doing. As we were creating the paper prototypes we noticed that we were discussing a lot about the order of the screens in the app and what should go on each screen, but we couldn’t fully agree on the answers to either. We decided that it would be best to get the post-it notes out and write on each what each screen was going to have one it and the order in which the user would access the pages. This was essentially a small IA session and it was good to get the graphics students opinions on the IA of our app.

This is how we arranged the post-it notes to design a very basic IA.

We concluded that the app experience should begin with the user being instructed on some physical signage on how to navigate to the app. The app itself begins with a landing page which introduces the user to the point of interest that they are at. We decided that this page would be very visually pleasing with little distractions. From this page, the user would be able to swipe downwards to reveal a map of the location – or perhaps the location in the relation to the Angles Way – we never actually discussed what exactly the map would be of or what it would have on it – just that there would be a map. The map was an idea that was initially rejected on January 29th when we discussed what we could do, but near enough every round of user interviews and research that we have conducted since then has resulted in at least one person suggesting that a map would be helpful – Carlton Marshes and Beccles Fen were two locations where the focus group suggested a map app could be helpful.

Considering interaction, we also proposed that the user would be able to swipe right or tap a button indicating that there was further content where the page would ‘slide’ across to the ‘theme selection’ page. On this page we proposed three simple buttons that the user could tap on to select one of three times, much like what was made for the prototype in February. After careful consideration we decided that we liked the colours and shapes that the graphics students had used in their prototype for this screen, and so paper-prototyped a similar screen. The idea of it being clutter-free, colour-coorindated and the shape of the buttons looking ‘angled’ was well-liked.

We split into three pairs and each pair focused on a screen. We paired one BSc student with one BA student.

Finally, the user would be able to navigate to the ‘experience’ page from here – which we didn’t prototype. In the prototype I made in February there was the ability to find out some location-specific information on the experience page by tapping on the little ‘i’ button on the page. Naomi suggested that this ability be retained, but due to the user testing conducted in Beccles where we got the Women’s Institute to give their thoughts on concept designs and their confusion of the ‘i’ button, we change this to a burger menu and one of the options in the burger menu is to find out more information. The other options would be a button to go back to the landing page and maybe one other option, not fully considered yet. The graphics students suggested that the traditional ‘three line’ burger menu icon could be replaced with three lines in the shape of their ‘AW’ brand mark as part of the visual identity and branding of the app.

We created very low-fidelity paper prototypes of the landing, theme selection and map pages.

After we had finished creating our paper prototypes, graphics course leader Martin and graphics tutor Amy came and visited to come and see how the project is going. We showed them the paper prototypes we had made, explained the project to them and the graphics students also showed them what they had made on XD. They were impressed and interested to see the project developments.

Zach and Corrina showing the paper prototype to Martin and Amy.

The graphics students saw that prototyping on paper was quick and easy and allowed us to move elements around to consider the organisation.

User testing

We did a very basic user testing with several random students that we found in the student lounge in the afternoon after the graphics students had modified their original XD prototype with the work that we had done today in the paper prototyping session. This was almost ‘guerrilla’ testing really. we just approached several students, politely asked them if they had a few minutes to test an app for us and got them to try the app out on a MacBook in XD. We asked them to tell us:

  • Their thoughts on the fonts, colours and images
  • How they’d expect to navigate the app
  • What they thought the app was for and where it would be used (i.e, at home or on-site)
  • Anything they didn’t like or wanted to know more about

On the whole the reception was pretty positive. Both testers were able to navigate the app intuitively and the use of colours, text and photographs were all liked. One thing that came up as a big problem was that users didn’t really know what the app was about – they guessed ‘national parks’ and ‘Broads’, but didn’t see that it was meant to be some kind of ‘digital experience’ for the Angles Way at all. There was clearly a big lack of context in our little prototype, but reflecting on this:

  • We set out to test basic functionality and the navigation ideas more than context – which were both positively received.
  • Zach mentioned that if you are using this app, you will already be at the Angles Way – i.e., the location in which it is intended to be used. So, does it need a lot of context anyway?

It seems that we are on the right kind of lines with this idea, even if our test that we did today were a little basic and the user group very very limited! Ideally we would have tested this on more users and had a more complete prototype to test on a device that it was intended to be used on (a smartphone, as opposed to a laptop), so that we could find out how users really felt when using it and if swiping was a preferred navigation method.

What’s next?

Next week is going to be another very busy week.

These past two weeks have probably been two of the most intense, most diverse and funnest at university. The writing is very hard to keep on top of, but the amount of practical vs theory and the different types of activities that I’ve done over the past two weeks have made these some of the best times at university to date. There’s been paper prototyping, coding, user research, presenting and lots more. Next week looks like it will be a continuation of that.

On Monday we have no scheduled sessions, so I hope to be spending this day looking at jQuery Mobile and experimenting with what that can do. We were introduced to it today, but I will write more about that next week once I’ve had some time to see exactly what’s possible with it.

On Tuesday we are going on a private field trip to Oulton Broad to identify locations for interpretation boards and we are also taking the 360 degree camera along to see if we can create some images of Oulton Broad to use in a prototype and find some locations where we can instruct users to stand and use the experience. We’ll be looking for things like manhole covers and other static objects that we could direct the user to and get them to stand at. These objects need to be fixed and not likely to move, so manhole covers, corners of streets, drains and so on are all good options.

Wednesday is the day that I expect to take delivery of 4,300 copies of Storehouse Issue 18. I haven’t said a lot about Storehouse in the reflective journals of Year 2 (I was mentioning it all the time in Year 1), but essentially Storehouse is the university magazine, made entirely by students to showcase student work. I joined the team in October 2017 as one of the heads of the Storehouse Online Team and helped to develop the very first Storehouse website, which was launched with Issue 16 on March 15th 2018 – exactly one year ago today! Starting with the development of Issue 17 in May 2018, my role changed to co-editor and since then I have been in a much more ‘managerial’ role, delegating tasks, managing people and teams and ensuring that deadlines are met. I still have some involvement with the online team, but in October 2018 I handed my duties to Ameer who has been developing the new website. I’ll write a more detailed post about all of this once Issue 18 has launched in the coming weeks.

On Thursday we are all in a taught session developing what was done today and on Friday we are going to begin developing an evolutionary prototype using jQuery Mobile.

But, most importantly of all, everybody is coming round to my house on Monday evening for pizza! We’ve all become good friends and can have a laugh together. Ameer and I decided it would be fun for everybody to get together and have pizza and socialise outside of uni. We also went and had lunch together today – working with these students has been great so far! I often hear horror stories about university collaboration projects – but we have quite the opposite!

Messing around today – we do have fun!