City of Melbourne

Improving mobile UI experience

Overview

The first online service we designed for was for removing graffiti and a key piece of information they require from the customer is a location.

A two week time frame to deliver the web form and no pre-existing mapping architecture to leverage. As an intermediate solution we used Google API’s to support the map module, as Google maps are widely used and assumed familiar.

After it went live online we received anecdotal feedback from internal staff that customers has said the form was difficult to use but not why. By conducting guerrilla testing we could quickly get insight as to what may be causing any pain points completing the form and quickly get any necessary updates into production.

There were 3 steps that the work focused around:

Validate the feedback and define the problem.
Observe pain points and identify opportunities.
Ideation and testing prototype.

1. Validating the feedback and defining the problem

What did we do?

Interviewed and observed two customers who had provided feedback, report graffiti in situ within the CBD.
Interviewed work area staff who receive customer data and feedback to clean graffiti.
Reviewed report metrics on usage.

What did we find out?

Participants specifically found the map difficult to use.
Participants didn’t see that they could type an address.
Participants didn’t see that they could use a GPS button.
Staff were finding the reported location wasn’t always accurate.

*Original map UI design from the first iteration.*

Problem statement

Providing location information is a mandatory step we require of our customers.
We’ve validated that there's issues with the map interface, using the pin when providing location data.
While it’s possible to use other methods to provide location, customers are not aware of these options.

Over 65% of graffiti reports received are made by customers using a mobile device.
We should be allowing customers to provide the location in their preferred format.
We should make it as easy as possible and the interface shouldn’t impede the ability to be accurate when selecting a location to help us find the graffiti.
We could quickly understand specific issues with the interface and any pain points experienced by observing customers making reports when using a mobile device.
By identifying the specifics of any issues, we can make better recommendations to improve the map interface.

2. Observe pain points and identify opportunities

What next?

Because we needed to investigate and identify issues quickly, we conducted guerrilla testing of the web form, setting tasks and observing participants behaviour and questions in order to see what specifically could be causing pain points.
We put together a test plan, setting tasks and choosing locations that would test different types of location data.

With whom did we test?

Eight customers.
Frequent graffiti reporters.
Hugely engaged with CoM.
Motivated to improving the public surroundings.

Where did we test?

Out in the field, in situ within:

CBD lane ways
Green park space

How did we test?

We located graffiti in the chosen areas as planned.
We asked participants to talk aloud as they used the forms to make reports.
We videoed them making report on mobile (Android and iOS) to document observations.
We noted any sticking points or uncertainty demonstrated and Q&A’d after test.

What did we find out?

There were a number of pain points observed:

The map interface was very difficult to navigate when moving the pin.
The page was unintentionally scrolled when trying to use two fingers to zoom map.
Location service permissions were missed when prompted by the browser.
Some got disorientated and lost in the map with relation to where they were and found it difficult to move the pin back to where they started.
GPS button to help re-orientate position wasn’t noticed and increased reliance on using the pin.
Not everybody wanted to use a map.

Opportunities

How might we afford customers choice when providing location information?
How might we make the map interaction experience more seamless?
How might we offer the GPS feature in a way that doesn’t break the experience if location services are unavailable.

3. Ideation and testing prototype

Ideation

The findings were reported to stakeholders and we conducted ideation based on the opportunities. Ideas were generated around the customer needs with the stakeholders, allowing them to contribute ideas they felt should be considered and provide different perspectives. We asked for these ideas to be sketched out and notated for reference reference during design of a prototype.

Testing prototypes

The test approach was the same as before, setting tasks out in the field, observing and documenting with video.
We needed to match as closely as possible the conditions tested before, so a click able prototype created with Axure was uploaded and accessible via a URL.
We tasked customers to provide a location via all three methods and observed.
We asked them to comment their thoughts along the way.

What we observed

During testing we found that customers preferred the ‘Use current location’ option and said it was great, so easy to use. Observing the interaction showed that they understood the options available, but chose ‘Use current location’ almost every time. However, the GPS isn’t always accurate and dependent upon phone tower the device's signal strength, which was a concern raised by stakeholders.

When customers used this option, in almost all cases the detail wasn’t checked and continued believing they had provided the correct location. When looking at the locations provided, it became clear that the signal strength required to keep it within a 5 metre radius wasn’t always available as some were way off.

We updated the prototype during testing

Incorrect locations were sometimes provided when using GPS as a standalone option - so we updated the prototype mid testing to allow GPS feature to be used in conjunction with the map as a visual reference. As a consequence customers paid more attention to accuracy when the map and GPS features in a single step.

What results did we see?

Customers interacting with a full screen map found it far easier and quicker to select the location.
Subsequently the page scrolling issue has been eliminated removed.
Customers recognised an alternative method to provide location than using a map.
Offering a free text input to help describe the location on a secondary step was seen as useful.

Updates to the interface design

Two clear options to provide location are now presented to allow the customer to choose their preferred method of providing a location.
Address input is now a stand- alone field at the very start.
The map feature is now a full screen making best use of the device's screen size.
Page scrolling issue that was observed with the previous design has been removed using full screen.
Pin interaction has been made easier.

The combination of pin interaction and using a full screen for the map has made it a lot easier for customers to find and pin point the desired location - the entire map is draggable with a fixed pin in the centre.

Before, customers had to drag a small pin icon, obscuring the desired location with their finger. Using any part of the map to touch and drag can ensure that where the map location meets the pin is always visible.
The GPS option was included within the full screen map to allow a visual cross reference when selecting this, ensuring better accuracy from the customer.
We included an additional free text input to give the customer an opportunity to provide any further description to help the work are to locate the graffiti.

Result

More customers are using the address input field than before, so the new presentation of choice is effective.
Customers feedback after implementation has been very positive, proving we have made the map far easier to use;

“The map is bigger now, it was crowded before, moving around with a single finger is very intuitive, last time that was what kept tripping me up”

“I think there’s a huge improvement. I think it’s a much easier way to find the location.”

“I thought it was great, really easy, gives people a few choices how they’d like to find something”

“The map was easier to zoom in and out with my fingers compared to last time, it was really finicky, whereas this time it was easy to scroll and move.”