pendragon.online

Boads Authority Web App

Mobile web app with interactive experiences | HTML, CSS, JavaScript | Collaboration | For a real client

Define

The Broads Authority approached UX Design and Graphic Communication students at NUA and asked us to create a digital experience that would encourage residents of towns in the Waveney Valley (Norfolk/Suffolk border) to visit the Broads and specifically a Broads walk called The Angles Way. This was a group project.

Discover

We began by conducting formative ethnographic user research by visiting three key sites along the Angles Way with potential users – a range of people from Women’s Institute members to members of the general public and even people from housing charities.

Conclusions from ethnographic research

Walks were generally enjoyed.

Wildlife was a popular theme to talk about and admire on the Broads.

Learning about the heritage of the area was a popular topic to learn about.

Navigating the walks and the Broads was sometimes challenging.

Most of the people we walked with, the older ones included, enjoyed using technology – everything from smartphones and tablets to smartwatches and Fitbits.

Audio interaction and audio books were enjoyed, with one person commenting that he liked audio books because ‘you can close your eyes and imagine the story better than you could reading words on a page.’

A group of people graphic.

From this research, the Broads Authority suggested that three themes be considered for an experience: ‘Nature’, ‘Heritage’ and ‘Landscape’.

Develop

With the themes in mind, thematic ideas and functionality ideas were considered. Themes such as ‘an adventure for the senses’ and ‘follow the path to get lost [in the natural beauty of the Broads]’ and ‘hidden treasures’ were considered and app ideas such as mapping apps, VR and AR apps, instructional apps and even social media apps were considered.

In order to finally decide which experiences to have in the web app prototype, we created user personas of potential target users of the web app. Each persona has their own use of the potential web app that would be created, so focusing on their needs helped us to decide what to include.

Personas

Below are the three personas we created to help create ideas for a web app experience on the Broads.

Stock image of a woman with ginger hair in her 30s in a blue top on a deserted farm.

Clair

Mother of two children, one aged 10 and the other 13

Demographic

  • 42 years old
  • Sales assistant at Craghoppers, Lowestoft
  • Owns a 3 bedroom terrace worth £160,000
  • Earns £21,000 per year
  • Married to her husband of 15 years

Lifestyle

  • House furnishing: contemporary
  • Phone: iPhone 7
  • Computer: Toshiba Satellite notebook
  • Shops at: Aldi
  • Drives: Renault Megane
  • Holidays: Package holidays to Europe

Life frustrations

  • Often works late into the evening and has to be at the shop early in the morning to open up. Overtime is often not paid
  • Life sometimes feels a little ‘mundane’ at times - ‘go to work, work, come home, eat, sleep’ routine with no real time for exercise, relaxation or excitement in between
  • It would be nice to get outside and enjoy the countryside a little more without travelling too far
  • The children are at different stages of their lives and seem quite different to each other
  • She is concerned that the 13 year old is too attached to playing computer games or is beginning to hang around with the wrong people in town
  • The 13 year old has started to spend a lot of time with friends from school and she and her husband miss the company

Interests

  • Reading fiction
  • Sewing

Phil

Enjoys casual walking at weekends with his partner, Lucy

Demographic

  • 35 years old
  • Self-employed carpenter and decorator covering Suffolk area
  • Rents a 2 bedroom house in Stowmarket with his partner (£725 pcm)
  • Pays himself £24,000 per year
  • Been with Lucy for 7 years

Lifestyle

  • House furnishing: contemporary
  • Phone: Samsung Galaxy S7
  • Computer: Dell Inspiron
  • Shops at: Tesco
  • Drives: Vauxhall Insgina
  • Holidays: Camping trips or short weekend breaks away in the UK

Life frustrations

  • Work is often very busy and often doesn’t finish until the late evening
  • Although work is enjoyable, he wishes he could spend more time with Lucy
  • He spends a lot of his time working in buildings in towns, so doesn’t get to go outside as often as he would like
  • The nature of his works means that often he has to work at weekends, so there usually isn’t enough time to go and enjoy the countryside
  • When he does go out for walks for Lucy, often they are in the same famous locations such as Aldeburgh Beach, Orford Ness and Minsmere Nature Reserve. It would be nice to try some new locations

Interests

  • Craftsmanship and practical skills
  • Walking, mountain biking, ballooning, camping - but not too extreme!
  • Rugby
Stock image of a man with facial hair in his middle 30s next to a colourful hot air balloon with a youhg brunette woman stood next to him.
Stock image of a young man on the top of a mountain looking over a mountain range.

Rob

Enthusiast walker and Duke of Edinburgh scheme instructor

Demographic

  • 28 years old
  • Works at the Coastguard in Lowestoft, also a DofE instructor
  • Lives in a 2 bedroom house in Lowestoft (worth £110,000)
  • Earns £22,00 per year
  • Been instructing DofE for 6 years

Lifestyle

  • House furnishing: contemporary
  • Phone: iPhone X
  • Computer: MacBook Pro
  • Shops at: Tesco
  • Drives: Land Rover Freelander 2
  • Holidays: Walking/camping holidays in the UK

Life frustrations

  • The job in the Coastguard is good fun but often it is quiet and doesn’t stimulate him enough
  • There aren’t that many exciting places in Norfolk and Suffolk for the DofE students he instructs to complete practice expeditions and walks
  • The walks he sets them at the moment are usually just variations of previous ones he has done and nothing new
  • Not enough young people are interested in walking in the local countryside outside of completing their DofE - it would be good to encourage more youngsters to go out and walk for their own enjoyment
  • There aren’t many walks in the area that pass through places that the DofE students might know or want to find out more about. Each DofE walk has a ‘theme’ and often it’s hard to think of one for some locations

Interests

  • Swimming, kayaking, walking
  • Photography
  • Teaching and supporting youth movements

Ethnographic user research

Ethnographic user research is conducting research with users who are likely to use your product in the location that they are likely to be using it.

Ethnographic research was very interesting and showed that there were some similarities between the different groups interviewed. The findings are shown on the user research map.

Research map showing the common pain points, motivations and goals of each of the three user groups who we conducted ethnographic user testing with.

The map shows that:

Common motivations to walk in the Broads were:

  • To appreciate the environment
  • Find out more about the area
  • To go wildlife spotting

Common user goals of walking in the Broads were:

  • Social interaction
  • Exercise
  • Relax

Common pain points of walking in the Broads were:

  • Accessing walks
  • Lack of maps, information and signage on paths
  • The linear nature of the walks and lack of information on things to do nearby
Diagram showing a basic interface design and the order that the user must use to view the 360 degree experience.

One of the things we decided to include was a feature that allowed the user to explore history in a visual manner.

We proposed to create an experience that allowed the user to see how some sites looked centuries ago through the means of a 360 degree image that depicts how the site used to look.

We tested this idea out with the Women’s Institute whom we showed this diagram to. They loved the idea and besides a few small textual changes to the buttons, what we’d proposed went down well in terms of the idea and potential usability.

Information architecture

Visiting the sites where the web app would be used and after verifying potential user journeys and low-fidelity prototype screens with some potential users, we created a very early app prototype. This prototype allows users to learn about the history of the Angles Way through the means of a grid system, discover the wildlife on the Broads at different times of the year and also the 360 degree image experience.

The information architecture and app flow was very carefully considered. The app has been designed to be theoretically as easy to use as possible with the fewest taps possible to get the information you need.

The IA diagram shows how the user would access the app by scanning a QR code onsite, which would take them to a landing page, explaining the app and how it works. From the landing page, the user would be able to find out about the Angles Way or select one of the three experiences to enter. Each experience has its own landing page which instructs the user on how to use the app before taking them into the experience. The experience allows the user to find out information about the point of interest the experience is aimed at.

Information architecture diagram showing the flow of the prototype web app.

First prototype

This IA was used to create the first app prototype, which I coded using HTML, CSS and JavaScript. This prototype was a proof-of-concept which was presented to the Broads Authority, along with the ethnographic research and user personas, on February 12th 2019.

Shown is a user journey showing how a user would reach and then use the 360 degree image experience, showing the buttons that they'd tap on to reach this goal.

Diagram showing the different [designed] screens that the user navigates in this particular user journey with arrows showing which buttons they tap on to achieve the goal - which is to use the 360 degree image experience.

High-fidelity prototypes

Whilst the UX students and I had conducted a lot of user research and ideation, the Graphic Communication students started working with us to design an identity and user interfaces. High fidelity prototypes were produced using Adobe XD and featured a new colour scheme, brand mark and app style. Key elements on the web app were angled to suit the ‘Angles Way’ and a colour was assigned to each theme to give the theme more identity.

Landing page. A header image, featuring an image of the broads, shaped almost like a triangle, is at the top of the page. Underneath the header is a title ('Welcome to Oulton Broad') and text describing how to use the app against a dark blue background, with an orange map button at the bottom centre of the page.
Landscape page. The heading is at the top of the page, shaped almost like a triangle and features a yellow overlay on top of an image of a wooden structure. Underneath the header is text relating to the theme against a dark blue background, with an orange map button at the bottom centre of the page.
Nature page. The heading is at the top of the page, shaped almost like a triangle and features a blue overlay on top of an image of reeds. Underneath the header is text relating to the theme against a dark blue background, with an orange map button at the bottom centre of the page.
History page. The heading is at the top of the page, shaped almost like a triangle and features a red overlay on top of sailing boats. Underneath the header is text relating to the theme against a dark blue background, with an orange map button at the bottom centre of the page.
Big individual buttons for the nature, landscape and heritage themes, angled across the page. The buttons fill the phone screen. Nature button is blue with a reed image as the background. Landscape button is yellow with a wooden structure. Heritage button is red with sailing boats.

To make the experience easy to use and to negate the need for any kind of app to be downloaded and installed, it was decided that this would be a web app that the user accessed by typing a URL into their browser. The web app was coded using HTML, CSS and JavaScript. Animations were added by using the popular Animate.css library and the panning 360 degree image was created using the MarziPano JavaScript library.

The web app that was tested was more functional that then previous prototype. Users were able to navigate the history grid to learn about the area, use the nature finder to find out about the nature on the Angles Way and explore a 360 degree image of Oulton Broad. The web app also has a functioning map that allows the user to search for facilities such as toilets, cafes and public transport in the area.

Test

Testing took place with three members of the Women’s Institute. We simply gave them the prototype and asked them to experiment with it and feed their thoughts back. This was a very informal and relaxed usability testing session, but by being so informal the testers were able to open up and gave some useful insight.

Overall, the design was liked, and the biggest usability problems were navigational issues and contextual issues. The testers felt that some of the information in the nature finder was not relevant to all locations along the Angles Way and they struggled to understand the navigation buttons on the web app. They also didn’t understand the brand mark but did find the text legible and easy to read. Some of the language on the nature finder (such as ‘marginal species’) was criticised as being too technical.

What users said

We began by conducting formative ethnographic user research by visiting three key sites along the Angles Way with potential users – a range of people from Women’s Institute members to members of the general public and even people from housing charities.

Conclusions from ethnographic research

'The arrows look like sails on a boat.'

'The type size is big enough – I can read everything OK.'

'I don’t understand what that ‘squiggle’ is.'

'It would be good to know about activities in the area.’

'I don’t often see barn owls around here – why’s that an image on this?'

'I know what ‘marginal specie’ means, but does anybody else?'

'I think the app should tell me if no new unique species were found instead of show the same species each time.'

A group of people graphic.

Outcome

The outcome of this project was a basic web app that a user could use to find out more information about the Broads, built on user research.

Animations for the opening page (left), theme selection page (centre) and on the theme landing page (right).

The Nature Finder season selector (left), the screen where users can select plants and animals that fit the selected theme (centre) and the page showing the information (right).

Using the Heritage Grid by swiping on the screen (left) and tapping the directional buttons (right).

The 360 degree image experience uses the phone's gyroscope to move a 360 degree image around.

Evolve

The new prototype running on an iPhone held up outside of a big sign at the Norfolk Show that says 'BROADS'.

The prototype was developed based on the feedback and a new version was tested at the Norfolk Show in June 2019 by a Graphic Communication student and me. The newer prototype addresses many of the problems identified in the previous prototype by improving navigation and employing simpler language.

Thirty-two tests were completed with a large range of participants, aged between around 15 to 70 from a variety of organisations. This is the largest and most diverse user testing session that I have carried out to date.

Information was collected in the form of quantitative and qualitative data. Quantitative data was collected by assessing on a scale of 1-5 how well each user was able to navigate the app, how they found the layout and how they found the information in the app. Qualitative data was collected by asking the user how they felt about using the app and noting down comments.

Reception was generally positive with users liking the idea and enjoying the prototype, but some users still found navigation difficult and suggested turning the app into a game to make it more appealing to younger users.

Related

Enjoyed this case study? Have a look at some similar work!

Cura-T Facebook Chatbot

How do you make finding cancer clinical trials easier? Whilst interning at Earthware, I worked closely with Cancer Research UK to develop a Facebook Messenger chatbot to do just that.

Helpdesk Windows 10 Universal App

My final piece for A level Computer Science was a helpdesk app which runs on Windows 10. The app allowed users of Wymondham High Academy to report IT issues from their Windows 10 device.

Nellie's Nursery Website Prototype

From a hastily-made Wix website to a fully functioning prototype of how a nursery site could look and feel - based entirely on formative user research, research into existing conventions and customer needs.