UCL Maps: technical challenges (part 2)

By Nick Dawe, on 4 June 2015

(Note, this post continues on from UCL Maps: finding the way to a new website)

Prototype development

Based on our user stories, I could start developing a basic prototype. However, it was obvious from the outset that there were be some technical challenges to overcome. In particular, I needed to address how an effective university map website could:

  • be mobile and touch-device friendly
  • be able to integrate route-finding tools, rather than expecting users to ‘hop’ off to another site to use these
  • make it easy to find a location.

As solutions to these were investigated, they were continually tested by UCL staff and students through task-driven testing sessions – which continually yielded useful results (even when it meant that we had to completely start again on some ideas!).

Design

UCL Web and Mobile Services has produced a helpful framework known as Indigo, which can be used to build UCL-branded responsive websites quickly and easily. This was ideal for us to use, as it removed a lot of the headaches of having to design and develop the site’s layouts, allowing us to focus solely on the map and its user interface (UI).

From our initial research and recommendations, it was obvious that a lot of the extra information on the current Maps website was not used (apart from the links to downloading map PDFs). Therefore the new site would have a map that would take as much of the available window space as possible, with a small UI taking up just a fraction of this.

A new map overlay also needed to be designed. While the old one certainly worked well, there were areas where its colour scheme didn’t have enough contrast against the Google Maps background, which could cause problems for some users. As a result, Rory Morrison, one of UCL Communications’s graphic designers, worked on a new version that could work best in this setup.

Responsive maps

The initial design, as displayed on any device with a small viewport, presented the map and then the UI ‘stacked’ below. While the UI’s own design was still being worked out, a new problem for touch devices became apparent.

Google Maps overrides the default scrolling behaviour of its maps. So, if you scroll on the map itself, the page won’t move up or down as you’d expect, but will instead zoom in or out of the map. This effectively meant that ‘stacking’ the map and UI created a site that was particularly hard to use, because the user wouldn’t be able to scroll to the UI if it was below the viewport fold.

This was rather frustrating, as the best solution found was to display an additional link to the UI for touch devices, which displayed on top of the map. All other devices would still let users scroll through content (meaning that we could still simply use the same Indigo patterns without any modifications).

However, for touch devices, the UI link would need to be fixed to the bottom of the viewport. On occasions when additional information would have to be displayed (e.g. a location’s details), the map would then be hidden, with the information filling the screen.

(Note – screenshots below are based on the final website)

maps-screenshot

UCL Maps website on mobile touchscreen

drayton

UCL Maps website location on mobile touchscreen

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Route-finding integration

As previously mentioned, another aim was to integrate route finding tools, based on CASA’s popular routefinder website. After CASA kindly provided us with the original source code and data, I was then able to work on:

  • developing a version of the route finder that could work on UCL supported technologies (e.g. PHP and MySQL)
  • updating it with new UCL locations and possible routes.

The technical details of this are out of the scope of this post, but another challenge was to then understand how best to integrate these tools with the main map UI.

Location route and directions (as displayed on final version of the UCL Maps website)

Next… how a UI was designed that could make it easier for users to find locations.

UCL Maps: finding the way to a new website (part 1)

By Nick Dawe, on 27 May 2015

This blog post is about the new UCL Maps website, which launched last month. If you have any queries about the site, leave a comment, or email us at digital-comms@ucl.ac.uk.


UCL can be a difficult place to navigate. Stretching from offices in the back-streets of Bloomsbury to halls of residence in Camden and Tottenham, members of the UCL community can understandably find it hard, and time-consuming, to work out how to get to a particular campus location.

The UCL Maps website has been run by UCL Communications for several years with the aim of helping with this. By hosting printable maps provided by the Geography Drawing Office, and housing a simple interactive Google map which shows key Bloomsbury locations, it has been used by large numbers of users (there were nearly 230,000 page views in the past year).

Screenshot of previous UCL Maps website

Screenshot of old UCL Maps website

Issues

However, over the past few years it became increasingly obvious that the site had grown quite outdated. Users, experts in Information Services Division and our own investigations, had raised issues including:

  • how terrifyingly difficult the site was to use on a mobile phone
  • the fact that some locations were not up to date (and the information on the site could differ from information on other UCL location-based technologies, such as the maps in the UCL Go! app)
  • difficulty in finding certain locations from the current listings: some users found it hard to find a location within the list categories we’d set up. Similarly, some locations were difficult to find as they were known by different names to those used in the listings
  • the fact that the website attempted to provide users with a huge variety of tools and resources, when the vast majority of visitors simply wanted to find the location of a part of UCL
  • confusion with another website: the UCL Campus Routefinder. This was an extremely helpful and well liked website originally produced by the UCL Centre for Advanced Spatial Analysis (CASA), that allowed users to find a route from one location to another. It was, however, in need of updating in terms of data and technology. Many website visitors were either aware of this site, or the UCL Maps website, but strangely not of both websites.

While there were clearly problems with the existing website, there was also another question: how should an effective university map website operate? What kind of tools and functionality should it have, and conversely, what were the potential sources of distraction that could be stripped out, so that users could more easily achieve their goals?

Initial research

We began to investigate this by collating past user feedback, and talking to existing users about what they wanted from the site. This was facilitated by running user-testing sessions based on interesting university map websites that appeared to have helpful user features.

I also used Google Analytics on the existing Maps website to track a range of ‘events’ on the site (that is, actions such as clicking on a particular location). Analysis of these events, plus insights of site usage provided by Crazy Egg’s heatmap and scrollmap tools, helped me to gain a better understanding of which features website visitors actually used.

Based on this research, as well as advice from experts elsewhere (notably UCL Web and Mobile Services), I was able to generate a list of user stories: key aims that our audiences needed to meet using the website. Some of these were reasonably easy to achieve, such as:

As a student, I want to find where out where a lecture theatre is so that I can attend my class.

As a new staff member I want to print out a copy of the whole campus so I can understand where the estate is based.

As a student who lives in Ifor Evans Hall, I want to know where cycle racks are available near the Main Quad, so that I can cycle into university.

However there was clearly a demand for integrated route finding capabilities, which fed into the creation of this user story:

As a new student, I want to know how to get from the Chadwick lecture theatre to the Darwin lecture theatre so that I can attend two consecutive lectures this morning.

The next task was to work out how to use these user stories to design and develop a site that would indeed help our visitors achieve their aims… which I’ll cover in the next post!

UCL homepage: the story so far

By John Anderson Burnett, on 8 May 2014

Six months ago UCL Communications launched a new UCL homepage; the result of over a year of research, planning, design and testing with Web and Mobile Services, Mark Boulton Design and a pan-UCL review group.

Here we take a quick look at how the homepage has performed against the project objectives:

  1. Improved navigation
  2. A better showcase for UCL’s strengths and characteristics
  3. Improved user experience across different devices

Happily the six-month review showed significant gains against our objectives and helped us identify opportunities for refinements (Something we’ll take a look at towards the end of this blog post). Unless otherwise stated the statistics are aggregated from 393 survey responses from members of UCL’s main audience groups.

1. Improved navigation

The homepage has seen a 35% increase in the proportion of respondents rating it easy or very easy to use and a 26% increase for clear navigation. The biggest increases were among prospective students, current students and academic staff.

Staff and student directory
As a group, Admin/Professional Services staff recognised a significant improvement against these factors. Some expressed concern, however, at the relocation of the staff and student directory to the staff gateway. This change was unintended and a consequence of technical limitations. Work is underway in Web and Mobile Services to improve UCL Search and restore the directory functionality to the UCL homepage.

Page length
The length of the page also concerned some respondents. The expansive and image-led style used in the news and events section is growing in popularity and takes inspiration from a variety of sources including news websites, such as the BBC and the Independent, other university websites such as Caltech, Harvard and Cambridge and social media sites like Pinterest.

Navigation elements of the site appear at the top to reduce the need for people to scroll in order to complete day-to-day tasks.

The CERN directory page and GOV.UK influenced our audience gateway pages.

2. A better showcase for UCL’s strengths and characteristics

The homepage has seen a 12% increase in the proportion of respondents rating the site as good or very good at reflecting UCL’s strengths and pedigree. Scores for design and imagery also increased by 10% and 11% respectively.

The survey also asked respondents to select between opposing adjectives to assess changes in perceptions of the site. This exercise demonstrated that respondents rated the site more favourably for all the target areas, with increases for the following adjectives:

Attractive Intuitive Prestigious Relevant Engaging Global Distinctive
13% 12% 9% 5% 12% 7% 12%

The biggest increases were among prospective students, alumni and academic staff.

News and events at UCL
The previous homepage had two slots to feature where UCL was appearing in the news. The new homepage is much more flexible and enables UCL’s Communications and Marketing team to feature different types of media, showcasing UCL’s impressive and diverse range of activity.

The new design routinely features eight different pieces of content, including national and international news stories, comment pieces, multimedia (video, audio and images) and social media elements.

This element of the page is primarily directed at external audiences such as prospective students and research collaborators.

The research showed that 79% of survey respondents reported that they scan the top two news pieces either always or most of the time, whereas 41% scanned the whole news and events grid always or most of the time.

3. Improved user experience across different devices

The proportion of users rating the mobile experience as good or very good increased significantly, albeit from a low baseline:

Oct-13

Feb-14

Increase

23%

38%

65%

The homepage was developed using responsive web design principles, so it adapts to display differently on different screen sizes and devices, such as mobiles and tablets.

Page load speed
Another central aim was to improve the page load speed. This benefits everyone, but is particularly important for people accessing content on their phones.

Measuring the performance one week after launch, the overall page load time had reduced by 22% from 2.8 seconds to 2.18, while on mobile devices it had reduced by 58% from 7.25 seconds to 3.04 seconds. This data is taken from Google Analytics.

Refinements informed by our analysis

Based on our evaluation and user feedback, we have identified the following refinements:

Staff and student directory
The biggest concern among respondents related to the staff and student directory. Work is underway to restore this functionality to the homepage. As a short-term measure the staff and student directory feature has been added to the staff gateway.

Length of page
Based on feedback from the survey, we shortened the news and events section. This section can be expanded or reduced in order to best showcase the activity of the university.

Audience gateway news feeds
Work is underway to include dynamic news feeds on the audience gateway pages. This will enable audiences to see filtered news that is relevant to them.

Illustrations for regular features
The homepage often includes regular features such as UCL in the media, the UCL Events blog and UCL Opinion. We commissioned a UCL Neuroscience PhD student, Matteo Farinella, to produce illustrations to help audiences identify this content and to differentiate UCL’s homepage from other universities.

Gateway link changes
Our evaluation revealed the links that audiences used most. Based on this, we reordered some of the groupings on the audience gateway pages. We also added a small number of new links.

What next?

UCL Communications will continue to evaluate and refine the homepage to improve its performance for UCL’s many different audiences. If you have suggestions or comments you can email is at digital-comms(at)ucl.ac.uk.

 

The Mystery of Google+

By Nick Dawe, on 14 April 2014

In November 2011, we decided to set up a page on the new Google+ social network, which was seemingly destined to take over the world of social media. Since its launch, there has been some debate over just how successful the network has been, and indeed we’ve found that our own experiences with it have also been difficult to evaluate.

Google Plus page screenshot

Read the rest of this entry »

Evaluating UCL’s social media from 2013

By Nick Dawe, on 6 March 2014

UCL social media infographic

There appear to be many ways to measure the effectiveness of social media work: from benchmarking our social metrics against other institutions, to looking at how we’ve increased our followers over the past year.

However, if we’re honest, we’ve never been completely happy with a lot of these approaches. While they can be useful, they don’t really tell us how social media has achieved anything tangible, or indeed useful for the university.

We’ve therefore decided to evaluate our work in a slightly different way this year. We’ve created an infographic report, which details how our social platforms have helped to achieve broader institutional aims over the past year. The report includes a range of ‘traditional’ quantitative metrics (e.g. likes, etc.), but also includes qualitative information such as short case studies and stories, which communicate, less abstractly, how all of this is actually helpful.

Overall, this is a bit of an experiment, and we’re still looking at ways of improving how we measure and communicate our effectiveness. We’d therefore value your feedback: have you found effective ways of using social media to meet your goals? How do you evaluate your activity?

(With thanks to Dan Sinclair for infographic design)

Introducing the new UCL homepage

By John Anderson Burnett, on 26 September 2013

The current homepage was introduced in 2009. To put that in context Barack Obama had just been elected President of the United States, everyone was worried about swine flu and the iPad was just a twinkle in Steve Jobs’ eye.

The need for change

An initial survey of >300 respondents found that – while the homepage was still rated highly for quality of content and aesthetics –  our website users felt that there was a need to bring the homepage up to date. The percentages below show the proportion of people who rated the following attributes excellent or good:

  • 28.4% – clear navigation and links
  • 37.5% – homepage reflects UCL’s strengths and pedigree
  • 23% – experience on a mobile phone

In addition, this research found that prospective students constituted two-thirds of traceable traffic to the homepage and were considered by UCL staff to be the most important audience.

The homepage project was born with the following principal aims:

  1. Improve navigation
  2. Better showcase UCL’s strengths and charecteristics
  3. Improve the user experience across different devices

The project team included colleagues from the Communications & Marketing office, Web and Mobile Services and Mark Boulton Design – a web design agency. Additional input came from an ongoing review group, including representatives from across UCL and the external audiences that the homepage serves, as well as a range of staff who helped test various aspects of the page.

Our approach

1. Improve navigation

To address complex navigational issues the revised homepage incorporates several new features:

a) Audience gateway pages for prospective students, current students and staff. These provide intuitive groups of links to serve users’ principal tasks, based on survey findings and focus groups. (NB the image below only shows the top of the page)

Screen Shot 2013-09-24 at 09.40.32

 

 

 

 

 

 

 

 

 

 

 

b) Global masthead. This navigational aid appears above the UCL banner. Readers may be familiar with the BBC masthead that is consistent thoughout the BBC’s website. The UCL masthead includes links to the audience gateway pages and the UCL search feature, which is currently being improved. In time this masthead will be rolled out to other sites to improve orientation and navigation across the UCL web estate.

Screen Shot 2013-09-18 at 10.46.51

 

 

c) Prominent primary navigation on the homepage itself. These links serve users’ principal tasks as identified through considerable user research. Prospective students are prioritised, followed by current students and staff. UCL’s research and collaborations are featured prominently and clear pathways have been provided to UCL’s faculties and departments, maps and buildings, alumni and About UCL sites. (NB this image only shows the top of the page)

Screen Shot 2013-09-10 at 13.36.58

 

 

 

 

 

 

 

 

The new homepage includes additional changes designed to improve the experience for prospective students:

  • The ‘Find a degree’ section at the top of the page; in phase 2 this section will include a searchable degree finder
  • The number of clicks through to the online prospectuses has been reduced from two to one
  • A clearer and more prominent link through to UCL’s academic department websites

Initial research comparing the new design with the old has shown a significant improvement in scores related to navigation. The project team will continue to measure performance against these parameters in order to continually improve the design.

Criteria Baseline  New design
Ease of use 32% 71%
Clear navigation 28% 71%
Intuitive 33% 75%

2. Articulate UCL’s strengths and characteristics.

With nearly 40,000 page views a day the UCL homepage has a very important role in communicating the institution’s strengths and ethos. Improving the navigation has been an important part of this to reflect UCL’s utilitarian principles.
UCL Homepage

Another development is the inclusion of a news and events ‘grid’ to showcase better the university’s outstanding and wide-ranging activity. The grid contains a combination of elements that can be used in a flexible format. The portrait view to the left gives an impression of what the grid will look like.

As well as news features and an events calendar the grid can include content from Twitter, Facebook, YouTube, SoundCloud and Flickr and UCL blogs. Additionally, the grid can include a featured quote from, for example, institutional partners, the wider research and policy community and employers of UCL graduates to reflect the impact and relevance of the institution, as well as the high regard in which UCL is held.

In phase 2 the audience gateway pages will include streamlined news sections, which will provide tailored content to each group.

In response to the research, the new homepage design features more and larger images. While not all content requires images, those elements that do will need images that are high quality and high resolution to support the new responsive design (see below). The Communications team is working to build a small stock of institutional images to support this, and a bank is available from UCL ImageStore, but content providers are asked to try to ensure that they have strong, distinctive images to support the content they submit to be featured on the homepage.

 3. Improving the user experience across different devices

The UCL homepage and audience gateway pages have been built according to responsive web design principles. This means that the page adapts to display differently on different types of device. The page you see on your smart phone will look a bit different to the page you see on your desktop. The structure and order of content displayed on different devices has been informed by research into the different tasks that users carry out on different devices. Currently up to 10% of new visitors access the homepage on a mobile or tablet. More generally the project team have built the homepage and gateway pages to be as inclusive as possible for people with disabilities or with limited bandwidth.

You can get an impression of the desktop experience from the screenshots above. The images below are representative of the smart phone experience.

Top of page

Homepage3Menu screen from three bar icon

Homepage menu

 

 

 

 

 

 

 

 

 

 

 

Staff gateway page

homepage4

UCL News post

homepage1

What next?

The new homepage will be launched on 2nd October. On behalf of the homepage project team thank you to everyone who has helped to shape this new design.

Launch does not signal the end of this project. The project team has established performance measures and will regularly review the homepage and gateway pages, supported by the homepage review group. Quantitative analysis will be combined with a comprehensive survey three months after launch to assess performance and identify opportunities to improve. We would be interested in any comments or questions you have that would help us to improve the site. Either post them below or you can email me at john.burnett(@)ucl.ac.uk.

Web and Mobile Services are working to improve the UCL search feature. This will power the degree finder search but will also provide an enhanced experience for searching the UCL website, staff and student directories and online research repository (UCL Discovery).

 

The UCL homepage: what you told us

By John Anderson Burnett, on 8 August 2013

The nice thing about UCL is that people aren’t afraid to tell you what they think. Nearly 300 people took the time to tell us their opinions on the current UCL homepage.

Respondent type % of total respondents
Staff 55%
Current Students 23%
Prospective Students 16%
Other 6%

This gave us some valuable broader data to add to our analytics and user testing and also helped us establish a baseline to measure success against.

Key findings

– The homepage is perceived best when it comes to content and aesthetics. More than half of respondents felt that it is is more attractive than dull and more relevant than inconsequential.

– There is a need for the homepage to be developed – it is currently being rated more as average than excellent (scoring 3.2 out of 5 overall). It was also found to perform poorly on smaller devices such as smartphones, which account for a significant and growing share of site visits.

– Ease of use and navigation are clear issues that need to be addressed – these are the areas that are pulling overall satisfaction down.

– Prospective students should be a core focus of the homepage – 33% of all respondents felt that they were the most important audience, followed by current students on 21%.

– The homepage needs to work harder to communicate prestigious and distinctive – currently only a minority feel it’s doing this well.

Navigation

The standout finding of this survey was that people find it difficult to navigate to information from the homepage. This was compounded by a sense that the homepage is too busy.

The homepage team is working to resolve these issues by creating audience gateway pages that will seek to provide quick navigation to serve users’ most frequent tasks. This approach should also serve to declutter the homepage by stripping out content intended for internal audiences.

One particular concern for respondents was that access to academic department websites was not well served and this will be taken into account in the new design.

The difficulty in accessing content was further compounded by people feeling that the search feature was not effective. Concurrent work by Web and Mobile Services to improve the search feature should further help audiences to access content from the homepage.

Audiences

According to our existing research, more than 60% of the audience-specific links that users click on relate directly to prospective students.

The survey revealed that, in addition to being the most common type of visitor, our range of audiences also felt that prospective students should be prioritised in the design. The homepage team will seek to do this by providing simple and prominent access to relevant information for prospective students.

Messaging

In addition to helping users to find what they are looking for, the homepage is one of UCL’s main communication channels. While respondents valued the news and events content, they felt that it needed to work harder to communicate the prestigious and distinctive nature of UCL.

The homepage team is reviewing how content is presented on the page with the aim of better representing the diverse and impressive activity of the institution, in addition to increasing engagement with this content. The team is also considering how UCL’s distinguishing characteristics can be better communicated in the design.

Turning research into stories

By Lara Carim, on 1 July 2013

I confess – I got excited about a spreadsheet last week. The homepage survey results are now in, and the project team has been busy analysing them.

Happily the findings corroborate what our other research has told us about what people use – and want to use – the homepage for, and provide some valuable context to our existing data. Many thanks to all who took the time to have their say, and congratulations to Cherry Trott in Library Services, who won the prize draw for £50 of vouchers.

Read the rest of this entry »

Would a website persuade you to part with £9K?

By John Anderson Burnett, on 30 April 2013

A full quarter of UCL’s income (£238m) comes from students and they consistently tell us that our website is their primary source of information for determining whether they should apply here.

The homepage and the UCL Prospective Students domain account for 43% of recorded traffic to the entire UCL website. Prospective students account for two thirds of all unique visits to the homepage.

UCL HomepageImproving UCL’s online experience

A cross-divisional team has begun work to redevelop these two domains as part of a coordinated project to improve the online experience of UCL’s audiences in general, and for prospective students in particular. Read the rest of this entry »