UX Designer
& Researcher
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
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.
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
Updated Shortcuts based on survey findings
Discovery
12 Participants
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.
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.
,
"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.
,
"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
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
-
Image Led Information
-
Square Grid Format
-
Dropdown Menu List with Fast Access to Popular Information
-
Brand Colours in Design
-
Image Led Information
-
Square Grid Format
-
Large Font Size for Accessibility
-
Clear Languages Icon
-
Image Led Information
-
Square Grid Format
-
Minimal Background Design
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
Updated Shortcuts
Language Icon
Booking Function
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
-
Much clearer to understand
-
Easy to read
-
Easy to navigate
-
Easy to make a booking and payment
-
Pleasant to look at
12 Participants
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.
+
"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"
+
-
51.7% Female
-
30-34yrs Median Age
-
47% Not Married
-
Bachelor Degree+ Median Education
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
