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 in 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 on 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 hopes 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 weaved with legal terminology and statements that tell a conflicting narrative as to what QTenders represents and who it’s ‘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 hereMulti-layered navigational structures puts the burden of choice on the user and leads to confusion and uncertainty. We’ve therefore made the decision 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 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 that 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 search 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 are used that create heuristics (or mental shortcuts) for users throughout their online journey.For longer-form CTAs, we’ve introduced a news banner in all-green that accommodates supporting copy. This has been used across the homepage and inner pages where relevant. Though 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 is essential. It’s nuanced, specific, detailed and...long. The aesthetic challenge here is optimising this content to keep it engaging and relevant.So we made the decision to visually group together information categories to establish consistency in presentation. For example, Tenders and Contracts are grouped together 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 own shape and colour, we create cognitive associations between each category and its content. This helps set expectations and keep users to make 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, lack of which leads to a disjointed multi-device experience. To put simply, to go without responsive design or dev is a blasphemy for your users experience and for 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 are our jam. If you’d like a free consult on your digital register here or drop us a line on [email protected]. We’ll talk through your goals, pain points and highlight a set of improvements to enhance your user experience.