Usability can either make or break your business. Learn how to guarantee success.
On February, 25, I took part in the NYC OpenRecords UX Hackathon. It brought together UX, UI & product designers, user researchers, product managers and developers from NYC so that they could suggest ways to improve usability of the OpenRecords portal by New York City’s Department of Records and Information Services (DORIS).
In this article, I will share several UX and UI hacks I learned at the event. First, let’s talk a bit about the OpenRecords project.
What is OpenRecords?
OpenRecords is an application that simplifies submission process of Freedom of Information Law (FOIL) requests. The web app is really useful as it allows any New Yorker to get easy access to public government records, which brings data transparency in the city to another level.
The importance of OpenRecords project for NYC and its communities is quite obvious. It’s no wonder that the idea to launch a hackathon to improve its usability was supported by New York City Government, Google and several other companies and organizations (Beginex, The UX Lab, Usability Matters, Rise New York, etc). Michael Lapin of Beginex and Shannon Copfer Brace from The UX Lab were responsible for producing the event. Michael was one of the UX mentors as well.
Basically, the hackathon participants (10individual teams) have to offer UX/UI ideas for the following sections of the OpenRecords app:
- Making a new request
- User introduction and guidance
- Search, view and track past requested records
After the teams presented their solutions and prototypes, judges decided on the winners. Team #7 won “best overall” award. Now, let’s get to the usability tips.
Five Useful Tips to Improve UX/UI
1. Utilize Texts to Provide Context
Any website, especially if we talk about government sites, should be properly designed and structured to help navigate quickly and easily. And yet, even sites with impeccable structure may be confusing to users. These sites are navigable but their content — specifically descriptions for forms, calls-to-action, and dropdown menus — is not descriptive enough.
Let’s have a look at the example from the OpenRecords app:
When you want to request a record, your first step would be to choose a category. However, categories listed in the dropdown menu are not descriptive and don’t provide much context. As a result of that, an ordinary user can request a record in the wrong type of agency. Obviously, the agency’s employees will have to process the request and turn it back to the user.
Confusion is a huge drawback to any website. Make sure that visitors understand how to complete a required action.
For instance, the winning team offered to get rid of confusing dropdown menus and implement a smart search field. This allows visitors to start with a problem (they simply type in what they need to learn about in the field) and get access to a visually appealing page with related agencies. Like this:
Each agency has a short description:
This way any OpenRecords user can easily locate an agency they need, which, in turn, decreases the number of non-related requests and allows FOIL officers to provide more value to New Yorkers.
2. Make Web Forms Clear and Concise
Web forms (e.g. contact forms, lead generation forms, registration forms, order forms, and surveys) are the pain points that need to be addressed by every usability expert. The thing is, user-friendly forms show visitors that you care and help reduce conversion friction.
By what does “user-friendly” actually mean? When it comes to web forms, it means that they should be short, clear, and concise. Also, make sure that your website forms are visually appealing and catchy (here’s where a properly A/B-tested CTA is a must).
A picture is worth a thousands words, they say, so here is a great example of a web form:
Not too conversational and straight to the point.
3. Create User-friendly Conversion Paths
Have you ever came across web forms so long that you scroll them down for hours? I, personally, have. These forms are the worst as they literally kill usability. Even if a business offers good service, stumbling upon an order form like that, you just choose to find a better solution.
Unfortunately, the “Request a Record” form originally designed for OpenRecords was one of those forms. It is so long and confusing that I can’t even take and fit its screenshot on page.
All of the teams that took part in the NYC OpenRecords UX Hackathon addressed the issue. Some of them simply redesigned the form but others dug deeper to create a user-friendly conversion path. It features:
- Search bar
- Visually appealing tabs for related agencies
- Descriptive texts for every agency
- A succinct request form
- A clear CTA
This structure allows visitors to navigate between problem-focused pages to fill out the “Request a Record” form step by step. Users don’t feel threatened by a mile-long request form and are more likely to click “Submit” button.
4. Use Thank-you Pages
This one is simple. Website visitors should be able to figure out when a required action is completed successfully, and thank-you pages are just perfect for that.
Let’s imagine that you have filled out an order form to buy a pair of shoes and, after pressing the “order” button, you see this: “Your order has been received.” Quite misleading, right?
What does that message actually mean? Should I check my email for details? Is anybody going to call me about the order? Users shouldn’t think too much. Avoid misleading messages at all costs.
One of the ways to do that is to use thank-you pages. For instance, you click “order” to see a separate page with a thank-you message, order details, contact information and so on. You have to communicate to your visitors or customers what they should do next.
One of the competing teams created this design for the OpenRecords thank-you page:
Clear, descriptive, actionable.
5. Implement a Smart Search Field
Of course, this usability tip is not for every website, but it can often be really useful. If you have a small site strictly for providing potential customers with contact info for your brick-and-mortar store, you don’t need to have any search features whatsoever. However, if you have, say, an ecommerce site, having a smart search field is an absolute must.
Anyway, in case of OpenRecords, a smart search field has helped to revolutionize the app’s usability. Both Team #4 and Team #7 introduced this feature to revamp the structure of a long and cumbersome “Request a Record” form.
Here’s how it looks like in the winning team’s prototype:
A user wants to request a record about housing construction in Williamsburg, and a built-in suggestion feature automatically offers related areas of interest. This smart search option is much more convenient than the one with multiple dropdown menus and vague forms that OpenRecords project has now.
If you, like me, own a digital marketing agency, you come across multiple usability issues every day. And yet, even being in the position where I should know everything about things like user interfaces and user experience, I have learned a lot at the NYC OpenRecords UX Hackathon.
The UX and UI tips listed in this article are quite straightforward, but they demonstrate how important a properly designed web form can be. Every time you launch a new project, make sure you ask a UX consultant for help. This can make or break your business.
Photo credit: Shutterstock / Stock-Asso