Public Notices Website
Greenfields project – UX/UI design for a brand new digital publishing platform for Public Notices (registration required to access).
Project Overview
The primary goal of the project is to create a digital home for traditional print notices, making them more accessible to the public.
My role
UX lead
UI lead
Team
2 Product Managers
Back-end Engineers
Front-end Engineers
Project Manager
Industry
Publishing
Date
2023
Client
Media24
Problem statement
How might we create a digital platform for displaying public notices?
Process
- Stakeholder interviews
- User flows (Whimsical)
- Secondary UX Research (best practices)
- Wireframes (Whimsical)
- Workshops with Engineers and Data Science teams
- High fidelity UI Designs (Sketch)
- Interactive prototypes (Invision)
(For a more detailed process, please view this page on a desktop computer)
Process
- Stakeholder interviews
- User flows (Whimsical)
- Secondary UX Research (best practices)
- Wireframes (Whimsical)
- Workshops with Engineers and Data Science teams
- High fidelity UI Designs (Sketch)
- Interactive prototypes (Invision)
Catering for varied content
During stakeholder interviews we learned that there are two main use cases for clients placing Notices:
- Fulfilling legal requirements (lowest cost, only text and logos required)
- Commercial e.g. Government tenders and auctions (highest cost, multiple design elements required)
I therefore created one master template with optional additional components to create variations of the template that can be sold in tier packages.
Above left: A basic, text-based Print Notice. The amount of space an ad takes up affects the cost, and so notices are often crammed full of information in small font sizes, which creates an unfriendly reader experience.
Above right: The master template including logo and free text.
Without the limitation on space, we have been able to create an information hierarchy and make the page more scannable. We have also added interactive elements like print and share, as well as email and web links.
An example of an additional component available on the premium package, is a card with accordion functionality. This came about as I was analyzing the notices, and I noticed that tables were frequently employed to display large amounts of information. I saw an opportunity to break these tables up into separate interactive cards, allowing users to scan the page and only expand a card that they are interested in.
Above left: A table containing information for for multiple tenders as it currently appears in print.
Above right: High fidelity prototype showing how tables such as the one on the left have been re-imagined as cards with accordion functionality. This helps to alleviate cognitive overload and allows users to scan the page more easily to find content they are interested, and then view more details and access contextual buttons.
A home page focused on search
From the User flow we determined that the two main screens were the Home and listing pages.
I conducted Secondary UX research to understand best practices for classifieds and search functionality, and created Wireframes to test and refine my initial ideas with the team and stakeholders, before creating an interactive prototype to demonstrate the interaction design.
Above: The Notices home page on desktop with a two-panel selector layout, allowing users to perform searches and view results efficiently.
Client feedback
“I love this, because the one in print is horrible, where this one is user friendly and it has the option to download the tender document which is always such a schlep. This is the advantage we have in digital, we can set the trend. So this is very, very nice.”
Stakeholder
13 April 2023
Client feedback
“I love this, because the one in print is horrible, where this one is user friendly and it has the option to download the tender document which is always such a schlep. This is the advantage we have in digital, we can set the trend. So this is very, very nice.”
Stakeholder
13 April 2023