Oulton Broad Visit – Tuesday 19th March 2019
During Stage 1 of this project, my course mates and I visited Oulton Broad, but the GCS haven’t had the chance yet. Upon suggestion from our BSc tutor, Chloe and I drove us students there to look around and take pictures on the 360˚ camera.
We set off from Norwich just before 2 pm, so the roads were reasonably quiet because everyone was still at work. The drive took about an hour, and it was nice to drive through some Norfolk and Suffolk countryside. Living in the city, I have no reason to venture out unless I am going home, so I don’t get to drive around a lot, let alone through the lovely East Anglian fields and trees. In hindsight, we should have taken public transport to test how accessible the location is, but it was more cost effective to carpool.
Our GPS took us to a different area than before, but we parked up anyway and took a walk. Equipped with our cameras and warm clothing we followed a pathway through the car park. Heading into a slightly wooded area, we walked past a peculiar looking petting zoo that looked neglected and run-down (although I’m sure it’s alive and bustling in the Summer) and then came to a boat yard.
A squirrel in the wooded area next to the petting zoo (Photo credit: Corrina Mark)
Things slowly started to look more familiar, and we realised that we were at the back of Nicholas Everett Park. We passed a mooring point with lots of boats and a bit further up, a docking station. It soon became apparent that this is a favourite spot for water-loving locals and tourists to enjoy the naturalistic beauty of the Broads.
A docking station next to Nicholas Everett Park (Photo credit: Jason Brown)
As we walked further, we came to a small pond with a little red bridge over it. There were swans, ducks and seagulls enjoying the pleasures of the still water.
Swans in the pond (Photo credit: Corrina Mark)
A calm day on the water (Photo credit: Corrina Mark)
Next, to the pond where there was a signpost of local amenities. We stopped to take a look.
Amenities sign (Photo credit: Jason Brown)
We spoke about the visual design, typeface and colour palette.
Assessing the situation (Photo credit: Jason Brown)
We thought that the visual design is simple and the main text is big enough to read. The bold, light green text against the darker background helps it stand out, but the smaller text underneath was quite tricky to read. We considered elderly tourists who might not be able to look up that far and who also may have impaired sight. Zach pointed out that the lower-case “y” on the typeface wasn’t lined up correctly, but I’m not clued up with typography, so I didn’t join in with the conversation. The subject that bore the most significant discussion was that the icons on the right-hand side are hardly visible! We were perplexed as to why there are white symbols against a light green background and thought it would look much better as dark green symbols against a light green background to mirror the rest of the sign.
A closer look at the symbols on the signage (Photo credit: Corrina Mark)
We continued to walk over the bridge and into the central area of the park. We walked up to the edge of the water, looking across at the old maltings that have now been converted to housing, and agree that this would be an excellent place to take the first set of 360˚ photos. Jason took the camera out and set it up on the tripod.
Looking across the water (Credit: Jason Brown)
He pressed the capture button on the camera but it caught the team off guard and we realised we had to get out of the way.
Our first (failed) equirectangular image
I thought it was a bit ridiculous, in this day and age, that the camera can only be used if the capture button is physically pressed. I thought about my GoPro Hero5 and remembered that it could be controlled remotely over Wi-Fi. I investigated the Play Store on Jason’s Android phone and found a Samsung Gear app that is capable of just this. I set up the technology on Jason’s phone while he rearranged the camera for another photo, and we were ready to go.
The Samsung Gear app (Photo credit: Jason Brown)
We all hid behind various trees and bins as Jason pressed the capture button on his phone.
A much improved equirectangular image
Now that we had an effective strategy, we were able to go around the park and take our 360˚ images.
The equirectangular image on the bridge
While taking the photo on the bridge, it suddenly occurred to me that this was a bit of a silly idea. The 360˚ experience is meant to be easily accessible by multiple people and not in the way of the general public. We couldn’t create an immersive experience on a small area such as a footbridge, next to a body of water where children could be present, ready to drop it in accidentally, and where many people will be passing through, so we took ourselves to a more appropriate area.
The equirectangular image next to the pond, not blocking the footbridge
The equirectangular image next to the dock
Retracing our steps: the equirectangular image next to the water (again)
The equirectangular image in the bandstand
Of course, someone was bound to capture the silliness of the afternoon.
Hiding away (Photo credit: Corrina Mark)
With the most essential part of the day complete, we took a stroll to a nearby underpass and took some photos of the surrounding area.
We explored more of the Oulton Broad area. (Photo credit: Jason Brown)
After this, we went for some food and a drink to discuss how our day went and review the pictures. On our way to the pub, I got talking to an older woman who was walking her dog, Penny. I seem to have a social magnet attached to me because somehow, I always have people come up and talk to me. I didn’t ask her any ethnographic questions whatsoever, I merely let the conversation flow, and she seemed to hit every nail on the head regarding the information I was quietly seeking. She likes to walk Penny 3 days a week in the colder months but tries to take her out every day when the weather is warmer. She mentioned that she frequently sees people of all ages walking around, visiting the coffee shops and generally enjoying the area. She lives a 10-minute walk from Nicholas Everett Park and sees a lot of the same faces in the area, suggesting that this part of Oulton is regularly visited by locals. Penny gets taken on a 10-minute walk from the house along with a 10-minute walk around the park on a cold day, but they venture out on The Angles Way if it’s sunny and she is in the mood. She said that The Angles Way is nicely accessible and during the Summer when the tables and chairs are put out by the local cafés, it turns into a trendy spot. She had a lot of charming things to say about The Broads, commenting on its beauty, openness and calmness, much in line with what others said during other user testing sessions.
Walking back to the car at about 5 pm, I observed the type of people who were walking around. There were school children, middle aged-dog walkers and older generations enjoying an evening stroll. This reiterated the fact that our app should be for a wide range of demographics, no matter how difficult it will be to optimise it for “everyone”.
Our parting sunset pt.1
Our parting sunset pt.2
Our day in Oulton was productive and enjoyable. We have a set of 360˚ images to work with and some valuable, even if random, ethnographic research data. Spending time together has further benefited our overall working relationship, and with such a positive start, I feel prepared to tackle the rest of the week.
Ecology and Biodiversity Talk – Thursday 21st March 2019
To protect the identities of those working for The Broads Authority who are featured in this post, I will be using pseudo names throughout my writing.
Throughout Stage 1, I kept encountering problems with my assigned theme (ecology and biodiversity) because of lack of industry knowledge. These problems included not knowing how large to make the experience, which types of nature to add (e.g. are the Broads more abundant with trees than insects, or vice versa?) but ultimately – is there enough hidden nature in Norfolk to make a whole app about it? I was only able to find a finite amount of information online, so this required specialised, expert knowledge of the area and what nature lies within. So, to hear that Bella was able to set up a meeting with an ecology expert at the Broads authority was exciting news and I felt hopeful.
We arrived at University at the usual time and the ecology expert, Elizabeth, and Bella, the Broads representative arrived at around 10 am. We began by introducing ourselves, and the graphic communications tutor wasn’t present to our BSc tutor introduced the project on all our behalves. He introduced the Finder concept, and as he was doing so, I could see a wave of confusion fall over Elizabeth’s face. It is a complex concept to try and explain, but our tutor did well, and she understood the idea by the end of the presentation.
The Finder slide in the WMM Phase 2 Primer presentation
Now, it was time for Elizabeth to talk to us about nature and wildlife found in the Broads. She seemed either shy or hesitant; I’m not sure which, and remained sitting on the other side of the room. I expected her to have either prepared a presentation, some hand-outs or even a list of things to cover during the meeting and I was surprised to find out there was none of this. I was sceptical of how much information we were going to be shown. When she started speaking we couldn’t hear her very well, so she came and sat in front of us with a map. This arrangement was a lot better.
A map of the Broads
The information I got from the meeting is as follows:
- Beccles and Geldeston Marsh are home to some very rare snails.
- Breydon Water is a protected Ramsar wetland site, an SBA(?) site and European protected site. It is the only estuary in the Broads.
- Wading birds are being helped by the RSPB.
- Habitats on the Broads include reed beds (Marsh Harrier rest here) and the fens, (rich with swallowtail butterfly, especially in Carlton Marsh), wet woodlands, peat soil, and swamp trees (home to a plethora of birds and insects).
- Carlton Marsh is part of the Suffolk Wildlife Trust, and they have also recently bought Peto’s Marsh, very rich.
- Climate change is affecting the water levels in the Broads which can seriously harm the aquatic species living there because salt water from the sea can get in and pollutes fresh water Broads.
- The warmer temperatures can also affect the stability of the food chain and all types of animals habits from small insects to large mammals.
- Footprint ecology. (???)
- Water voles are a fast declining specifies in the UK because of habitat destruction. Mink eat them!
- But, mink are being culled (humanely).
- All organisations across the Broads work together.
- Norfolk/Suffolk wildlife Trust/BTO/RSBP coordinate cleanups.
- People/places/wildlife because culture and landscape are blurred.
- The design needs to be accessible by everyone.
Much to my dismay, I found her presentation discombobulated and incoherent, in turn, it was very hard to follow, and I wasn’t sure how to make notes. Subject areas weren’t provided with any introduction or context so when animals and habitats were mentioned, I had no idea what to relate it to or how to interoperate the information. I felt as though I was reading a random fact book with no chapters. I found this to be a real shame because she has excellent knowledge of the Broads, but I don’t think a lot of what she told us can be carried through into our work.
On the other hand, the downfall of this meeting is also on me. I knew that I wanted to create an experience where users can find information about nature, but I didn’t have a set of questions prepared to ask her. Maybe it would have been better if I/we had a backup plan like a set of questions or a direction to steer her in. Upon reflection, the problem as to why we didn’t have the correct answers is because we didn’t know what the questions were. It was a small case of “the blind leading the blind”, and I’m glad that I’m learning my lesson now, so I am less likely to go into a meeting unprepared when I am working in the industry.
Group Work – Friday 22nd March 2019
This day consisted of a fast and efficient workflow, but I was unable to record each stage meticulously. For visual representation purposes, I have roughly recreated our thought processes along the way. All visual reconstructions images are stated in the caption.
Today, Corrina and I pulled our expert skills together in a fusion of user-centred design and visual branding. The results were very fruitful.
We have been fortunate during this project in the fact that we all get along so well. Working as a team is enjoyable and a total breeze. We all teamed up again, as per the paper prototyping session, to revisit our assigned pages and experiences, which were as follows:
- Jason and Chloe: 360˚ experience
- Ameer and Zach: Timeline grid experience
- Corrina and I: Core pages (my finder app still needed preliminary work done before we could prototype anything).
Throughout the project, we have found that a majority of us know how to use Adobe XD, so it was the natural choice for our prototyping tasks. I have been using it for a little over a year now, so I felt comfortable using it, whereas Corrina wasn’t feeling as confident but was up for learning along the way. Chloe, Ameer and Zach all have adequate experience too, so help was close if we needed it.
We began by creating the landing page as per our paper prototype. It included the logo the GCS had made, a title and a tagline. We used the brand colours navy blue and burnt orange along with the icons they had created to bring the app to life.
App icons from the GCS’s previous presentation of their work
(Visual reconstruction) First iteration
It’s always a great feeling when you see a functionality based creation come to life with the use of colour and graphics, but it also brings new challenges. Functionality-wise, I knew that we needed several critical elements on the page such as a logo, header, tagline, next arrow and the map button (if we chose to incorporate it) but now we had to consider the size and exact placement. Challenges included:
- Logo: When the logo is placed horizontally it represents AW (Angles Way) and can fit text underneath. However, it is meant to be vertical to represent a wiggly walking trail subtly, but this option doesn’t have room for copy.
- Headline: The headline is welcoming visitors to The Angles Way but doesn’t inform them of their exact location, in this case, that is Oulton Broad. The copy explains this, but it is not as eye-catching. “The Angles Way” is also shown twice on the screen now, which is overkill.
- Navigation: Will the user intuitively know to press the right arrow to move through the experience? We do not have the user test data to determine whether this is a good idea or not.
With these in mind, we came up with a new way to organise information on the page. The headline would now be location specific and welcome people to where they are on the Angles Way. In turn, the logo could stay the same and still say “The Angles Way”, we added navigational instructions for added clarity and placed a “Map” tab at the bottom of the page.
(Visual reconstruction) Second iteration
I briefly played with the idea of dual-coding (the use of text with a symbol) to guide the user through the app, but it quickly became a messy, space-consuming task. The text would have to be very small and would not comply with our user research of age demographics accessing the app.
Dual-coding considerations
Something still wasn’t quite right. We had all the essential elements on the page, but it didn’t look like the app experience we had envisioned. After a short period of staring and chin-stroking, we concluded that we needed a header image. Taking inspiration from the GCS app design, the featured image would cut off at an angle at the bottom.
App page design from the GCS’s previous presentation of their work
We knew that the app interfaces featured above aren’t functional designs, but we were looking forward to making it so. We chose an image from our trip to Oulton Broad earlier in the week, and as expected, it made the design look and felt more like a professional digital app experience.
(Visual reconstruction) Third iteration
Our final iteration only had a few minor tweaks. The logo was placed vertically on the left-hand side and the text right-aligned to show off the image. Then we separated “The Angles Way” text but kept the vertical logo and got rid of the navigational text at the bottom. We planned to perform user testing to see whether the arrow is sufficient and then we replaced “Map” with a location icon to help the page look tidier. It is the symbol used in the Google Maps app logo and throughout the app and other GPS services, so we are confident that it will not present any issues during user testing.
Final landing page design
Now that we were in a comfortable place with the landing page, we moved on to the theme selection. This took almost no time at all because we took the design straight from the GCS app design.
The theme selection design was quick and easy to make
The changes we made from the original design were:
- Background images: We used our pictures from our Oulton Broad trip rather than ones we found online, providing the app with authenticity and relates it to the real world.
- The contrast of coloured overlays: The contrast was brought down slightly as to not cause eye strain against the navy background.
- Text placement: Text has been placed on top of the images and inherited the same h1 properties like the title on the landing page.
When the user clicks on a theme, they are to be shown more information. At this stage, we didn’t know how much information we wanted to include, so I played with the idea of having a drop down information section. When the user presses on a theme, it could expand down to show information in an extension of the diagonal bar. That method would work well for the top item, but when applied to the other two, they would have to shift up to have the same amount of space for copy. The text area would already be small, to begin with, because of the angled box area around it (it would be unreasonable to rotate the text) and the whole thing would require animating as well, and we don’t have the scope for that in this project. As a result, we designed adjoining information pages after the theme selection and before the experience.
Ideating the user flow from the landing page to theme selection
The theme information pages needed to be in line with the rest of the app, so most likely inherit the angle, but required to have a lot of space for a paragraph of text. Keeping in mind the need for navigational buttons and the map button, we took inspiration from the landing page. We placed all of the elements in roughly the same place, changed the text accordingly and replaced the image with that of the same one in the theme selection, and it looked good. The only trouble being, it seemed almost the same as the landing page.
(Visual reconstruction) The first iteration of the theme information page – Nature
This wasn’t OK. The pages looked way too similar, and because they contain entirely different content, the theme information needed some distinguishing features. We played with some ideas on paper and agreed to replace the logo with the theme title to give the header image more affordance on the page.
Final theme selection information page – Nature
The page now looks neater and more concise. With the extra room at the bottom, I added navigational instructions to let the user know that the start of the experience is on the next page.
We repeated this for the other two theme information pages.
Final theme selection page – Landscape
Final theme selection page – History
The final pages of the prototype have been arranged the same as the post-it note IA and looked like this:
Landing pages prototype
All-in-all, each of us had a productive day. Jason and Chloe had developed the 360˚ experience to include information buttons and had matched the design of the dialogue boxes to that of our landing page with a header image with an angle. Ameer and Zach had a full prototyped version of the pages of the grid experience, again with a background image cut off by an angle at the bottom.
While reflecting upon the day’s events, the biggest challenge was incorporating the map. In between the “wider” design choices like image, text and logo placement, we spend a majority of the day pondering the best way to let users access the map. The main questions that kept coming up were:
- Do users access the map through a button or a swipe command? – During previous user testing, results showed that test subjects enjoyed a swipe motion instead of pressing on buttons.
- If it’s a swipe motion, how do we inform the user of this? – A pulsing arrow could be indicative of a “swipe to reveal” motion, but there isn’t a lot of space on the screen with the number of elements we already have.
- If it’s a button, where does it go? –This presents the same problem as the swipe motion about space on the page.
- Does the button include an icon or text? – It either needs to be one or the other. The icon is preferable to utilise space, but with varied demographics, we questioned whether everyone would know what location pin-point symbolises.
- Should users be able to access the map from every page? – Is it beneficial for users to view the map feature from anywhere in the app? In turn, will this obstruct visual design?
We had these questions in the back of our minds all day, and while prototyping the rest of the pages, we managed to solve all of them.
- Do users access the map through a button or a swipe command? – Users can access the map via a tab at the bottom of the page which can be pressed on or swiped up. The tab is a similar design to tab on a web browser, so users are expected to click intuitively. On the other hand, it is also identical to a divider in a physical file binder, so it should appeal to a wider audience.
- Does the button include an icon or text? – Due to the location symbol being regularly shown in a lot of everyday digital settings, we chose the location symbol because we are confident that people will intuitively know what it means. Jason has spoken about his interest in creating the map itself and using iconography so symbolise cafés, toilets and other amenities so that icon testing can take place here.
- Should users be able to access the map from every page? – This was a tough one. For our first iteration, we are keeping the map easily accessible from every page of the digital experience. We are very interested to see whether our user testing group picks up and will comment on this.
Conclusion
This week has been a mixed bag. Even though I felt slightly deflated from the ecology and biodiversity meeting, our trip to Oulton Broad and hard work on Friday brought my spirits back up.
I thoroughly enjoyed digitally prototyping our ideas in Adobe XD because it feels like the project is coming together, slowly but surely. As confident as I am using XD and creating functional screens, I’m still feeling very nervous about coding it all up and making sure it works.
I must admit my ongoing anxiety about the Finder experience as well. If all goes to plan, Elizabeth will send over an information structure as discussed earlier in the week, and I will be able to stitch it all together with a more focussed approach. In the meantime, I will be considering the aesthetic layout and coding up the landing pages.
We have achieved a lot and should be proud of ourselves, but the toughest part is still to come.