Breathing Some 2021 Life Into An Old QTenders User Experience.

Whether you’re applying to a tender or in search of project support, the QTender platform is central to connecting the Queensland government with suppliers. For those of you who have interacted with the platform, you’ll know it feels like a web build from the 1990s. You’re faced with a wall of paragraph text and a small sidebar that screams ‘government’; I haven’t been updated in decades. Applying via mobile or tablet? Time to zoom in, as it’s not yet responsive. The entire online experience is difficult, yet it’s the only online platform available to submit government tenders. As an agency, we’ve had our fair share of experience using the QTender platform and working alongside government departments. It’s made us acutely aware of the nature of government projects and red tape that hinders fast, confident decision-making. It’s to be expected that the digital team at QTenders are conscious of their UX/UI issues, but are battling conflicting budgets, timeframes and approvals to make a substantial change. That’s where we come in. Our vision this month is to propel the digital experience of QTender forward to encourage the wheels of motion in digital transformation.

Positioning 

Let’s start with why we’re here. What’s the purpose of the QTender platform? For those of you willing to read through the paragraphs of content currently displayed on the homepage, you’d be hard-pressed to get a clear answer. The content is woven with legal terminology and statements that tell a conflicting narrative as to what QTenders represents and who its ‘customers’ are. Yes, the name is pretty obvious, but failure to reinforce a clear positioning statement leaves users uncertain. Not the emotion you want for first-time visitors attempting to navigate this platform. All it takes is one simple statement - ‘Find Tenders and Contracts in Queensland’. It addresses the purpose of this platform and hones in on the relevant audience (in this case, a customer segment based on geography). Clean and simple, people now know why they’re here and what they can do.

Navigation 

The time it takes to make a decision increases with the number of choices. So the current QTender sidebar menu will have you pondering for hours* on what action to take.*slight exaggeration used for dramatic purposes here* Multi-layered navigational structures put the burden of choice on the user and lead to confusion and uncertainty. We’ve therefore decided to completely strip out the current navigational structure. Instead, we’ve highlighted seven essential items along the top navigation to streamline the user experience. Commonly used pages are currently lost, deep within the sidebar menu such as the:

• Search

• Profile

• Notifications/messages; and 

• Help desk 

These are non-negotiables within the menu. To optimise space within our new nav, we’ve converted them into icons and followed the best practice UX pattern of featuring them within the top right corner.

Information Architecture

QTenders has a high information density. Between the hundreds of tenders and contracts, legal terminology, news articles and personal messages you’d struggle to catch a breath. Mindful, considered design ensures that these information-rich experiences are effortless, easy and welcoming. It’s why we start with a search bar within the hero banner. It leads the horse straight to the water. Users can filter and search for specific tenders and contracts, within a certain industry and/or location. All within a handful of clicks and hits to the keyboard. The current site separates current, closed and awarded tenders across three separate pages. We’ve consolidated these on the homepage via a wayfinder that filters the three categories at the user's discretion. Each card serves as a content ‘teaser’ highlighting the tender name, department + open and close date icons & labels. We’d compare this to a taster at your local brewery. That palette confirmation you need before you commit to the full stein. This simplified content format prevents users from attracting info fatigue and keeps the information presented in a clean format. Good design is about setting expectations through consistency. Therefore we’ve continued using this card-style format on the tender or contract listing pages + the use of icons & labels for open and close dates. The detail pages also feature accordions to accommodate the longer-form content ( the kind that we’re currently used to on the QTender site). The ability for users to expand and collapse accordions if required, minimises the burden of information and creates a better first impression.

CTAs

Bam - first up on the homepage is our major call to action. The search bar empowers users to track down their specific needs. It’s concise and simple to use, curtailing the need for users to rely on the main menu or inner page content. We’ve also converted any in-text hyperlinks to buttons. These have been split into primary (full, bold colour) and secondary (ghost, outlined) buttons. 

• As implied, our primary buttons serve to visually communicate crucial actions such as searches or submissions. 

• The secondary buttons are used to encourage additional content such as ‘view detail’ on individual tenders. 

It’s the consistency in how each of these primary and secondary buttons is used that creates heuristics (or mental shortcuts) for users throughout their online journey. For longer-form CTAs, we’ve introduced a new banner in all green that accommodates supporting copy. This has been used across the homepage and inner pages where relevant. However, with all CTAs - too much of a good thing becomes bad. We’ve been careful to use this sparingly for content highlights only.

Aesthetics

As designers, we play a pretty heavy role in readability. The content and density of information on the QTender platform are essential. It’s nuanced, specific, detailed and...long. The aesthetic challenge here is optimising this content to keep it engaging and relevant. So we decided to visually group information categories to establish consistency in the presentation. For example, Tenders and Contracts are grouped in light blue while News is listed separately in navy and uses a longer wayfinder box. Whereas timely messages are highlighted through a green promotions bar. By designing each grouping with its shape and colour, we create cognitive associations between each category and its content. This helps set expectations and keeps users making fast, more confident decisions online. To keep an aesthetic balance to the design, we’ve also maintained a healthy amount of white space and lighter tones. This increases retention and engagement on the important more colourful groupings and CTAs, without overwhelming the user throughout the entire online journey. All of our designs are based on a modular framework (aka building blocks). Each building block (card layout, hero banner, accordion, news article) is intended to be responsive and adaptable. This isn’t just simply to address the present need for responsive design (no-brainer these days). It also addresses brand continuity between devices, a lack of which leads to a disjointed multi-device experience. To put it simply, to go without responsive design or dev is blasphemy for your user's experience and your brand.

Can we get QTender on board? So what do you think? How many of you use QTender and what kind of difference would this make to your entire experience? We’d love to work more closely with QTender in redesigning their entire platform. Let’s hope they can push this through.

Do you need a hand? UX/UI analysis is our jam. If you’d like a free consult on your digital register here or drop us a line at greg@lamb.com.au. We’ll talk through your goals, and pain points and highlight a set of improvements to enhance your user experience.