DAREBIN COUNCIL UX/UI CASE STUDY

I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. I’m a great place for you to tell a story and let your users know a little more about you.

CLIENT - DAREBIN COUNCIL

Role – UX/UI Designer

UX – Card Sorting, Interviews and Contextual Inquiries, Research Synthesis, Defining Users, Building Personas, User Journey Map, Comparative Analysis 

UI – Wireframing, Prototyping, Usability Testing

Duration –   2.5 weeks

Project Partner – Michelle Eynon

Darebin_City_Council_Logo_edited.png

Project name 03

Role Title

I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. I’m a great place for you to tell a story and let your users know a little more about you.

Cell phone showing a mock-up logo

Problem

The Darebin Council website offers a vast array of services but we discovered users were finding the categories and layout to be confusing and difficult to navigate.

 

 

For the in-depth case study​ see below

Solution

Our research findings led us to re-name the categories of the headings, sub-headings and shortcuts which made it easier for users to find what they needed. 

We also built a payment tool to allow users to make bookings for existing services through the Darebin website rather than be directed to an outside site.

Overview

Access to information takes too many steps

No available booking/payment function

Darebin Council’s website does not currently provide users with a fast flow to information 

We redesigned the IA to contain clearer category names

and a shorter process to accessing commonly sought information.

Users are unable to make a booking for a service directly from the site.

Instead, users are redirected to an outer website.

We built a bookings and payment function so that users could stay on the website and complete a transaction for any service that required payment.

 

The City of Darebin is a large council area providing many services to a culturally and language diverse community.

Feedback indicated it was difficult for users of the council's website, to locate the services they needed.

Research and testing revealed the following challenges for users; 

Deliverables

Reconfigured IA, New Category Titles, Updated Shortcuts and built a Bookings and Payment tool

darebin illustration.jpg
new shortcuts.png

Updated Shortcuts based on survey findings

shortcuts1 copy.png

Discovery

12 Participants 

Screen Shot 2020-12-03 at 1.31.49 pm.png
Screen Shot 2020-12-03 at 1.33.18 pm.png
Screen Shot 2020-12-03 at 1.31.33 pm.png
Screen Shot 2020-12-03 at 1.31.22 pm.png
shortcuts1%20copy_edited.jpg

Prototype

Our re-design focused on two main areas:

1.Simplifying the usability of the website 

&

2.Improving the UI without losing its brand identity

User responses

Users appreciated how easy it was now to find information on services. They also found the new integration of making a booking and paying within the same website beneficial.

Further iterations 

We would conduct further usability tests for alternate tasks and continue to build on and improve the new IA.

We believe that these changes offer residents of Darebin and all users of the Darebin Council website, a seamless and enjoyable experience.

website.png

Card Sort #1 -Category Heading Confusion

To find out how users made sense of exisiting category headings, we conducted a hybrid card sort.

Only 20% of participants understood the categories of 'Discover Darebin' and 'Darebin Living'. Most exisiting headings had similar low scores of user understanding.

                                                                                                                                                      , 

20guy.jpg

"What is Discover Darebin & Darebin Living?!"

7 Participants 

CI -Completing a task took too long

We set participants a targeted flow and observed how they navigated the website to complete the task.

We discovered that 100% of users were frustrated with the amount of steps taken to get to the information they needed. 

Users also expected to be able to make a booking through the website and were disappointed that there was no function available to do that.

                                                                                                                                                      , 

30girl.jpg

"After all that!

Why am I now being directed to an outside website?!"

4 Interviews

Survey for most common council services

We created a survey asking about the frequency of use for specific services.

The results of the survey guided us in updating the shortcuts to better suit users needs.

  • Rubbish

  • Payments

  • Reporting an issue

  • Sports & leisure

  • Gardens & Green Spaces

  • Libraries

MOST COMMON SERVICES.png

We looked at City of Melbourne and Services Australia as comparable service sites.

We also looked at Glassons clothing which is a commerce site.

We took note of typography, font size, brand colour usage, colour contrast, locations of main menu titles and whether the overall design was busy or minimal.

We looked at other service websites to compare flow and design

Screen Shot 2020-12-01 at 1.32.31 pm.png
melbs.png
Screen Shot 2020-12-03 at 10.44.07 am.pn
services.png
glassons.png
Screen Shot 2020-12-03 at 11.04.08 am.pn
melbs.png
  • Image Led Information

  • Square Grid Format

  • Dropdown Menu List with Fast Access to Popular Information

  • Brand Colours in Design

Screen%20Shot%202020-12-03%20at%2010.44_
services.png
  • Image Led Information

  • Square Grid Format

  • Large Font Size for Accessibility

  • Clear Languages Icon

Screen Shot 2020-12-03 at 11.00.38 am.pn
roboto_edited.jpg
Screen Shot 2020-12-03 at 11.00.58 am.pn
glassons.png
  • Image Led Information

  • Square Grid Format

  • Minimal Background Design

Screen Shot 2020-12-03 at 11.02.17 am.pn

Findings Leading to Functional Design Changes

  • Changed the category and menu headings based on Card Sorting Tests

  • Created new shortcuts based on survey results

  • Restructured the IA for a faster flow to information based on Interviews and CI 

  • Added a bookings function to any service requiring payment after finding user frustration in CI

  • Change of Icon and Location of Language Tool from Comparative Analysis

"These make much more sense to me!"

Success with re-naming  -  On average, over 65% of participants made sense of our re-named categories

and headings

                                                                                                                                                      , 

Existing Shortcuts on Darebin Website
new shortcuts.png
Updated Shortcuts
Screen Shot 2020-12-02 at 1.40.05 pm.png
Screen Shot 2020-12-03 at 1.31.49 pm.png
Language Icon
Booking Function
Screen Shot 2020-12-03 at 1.33.18 pm.png

Findings Leading to Aesthetic Design Changes

Usability testing influenced the following changes:

  • The location of the dropdown menu

  • The location of the search bar

  • The size of the images

  • The layout of the news section

After implementing these changes, we did a further usability test and found that users agreed the updated version was

  1. Much clearer to understand

  2. Easy to read

  3. Easy to navigate

  4. Easy to make a booking and payment

  5. Pleasant to look at

usabilitytest.png

12 Participants 

50girl.jpg

ABS Data for Darebin used to create Personas

We put together our findings from the interviews with ABS demographic data for the Darebin area.

We then created Personas to represent the users of the council's website based on the combined information.

ABSlogo_edited_edited.png
research head.png

+

"I look for local facilities like swimming pools"

"You would assume you could book tickets on here!"

"I look up the days for green waste collection on my street" 

+

ABSlogo_edited_edited.png
  • 51.7% Female

  • 30-34yrs Median Age

  • 47% Not Married

  • Bachelor Degree+ Median Education

press to zoom

press to zoom

press to zoom

press to zoom
1/3
Dropdown Menu                  Size of Images                                                             Search bar in Header

CLIENT - DAREBIN COUNCIL

Role – UX/UI Designer

UX – Card Sorting, Interviews and Contextual Inquiries,

Research Synthesis, Defining Users, Building Personas,

User Journey Map, Comparative Analysis 

UI – Wireframing, Axure Prototyping, Usability Testing

Duration –   2.5 weeks

Project Partner – Michelle Eynon

website.png
Darebin_City_Council_Logo_edited_edited.
Darebin_City_Council_Logo_edited.png