How we applied progressive disclosure technique to improve usability!

Different design patterns help us provide solutions to most common problems that we as designers face in our work. In this case, we explored progressive disclosure technique and applied it while redesigning one of the features of CricHeroes app.

At Digicorp, we have one Product review every week. Last week we reviewed CricHeroes.

“CricHeroes helps cricket players create a professional-grade scorecard for any match they play, anywhere, with any rules, as far as it is Cricket. Starting from batting and bowling statistics in a match to a wagon wheel for the batsman and auto-generated commentary, everything can be created on top of the scores collected by the app. ”

Cannot relate with the game of Cricket? Well, you can still continue reading. The article has more to do with redesigning an app feature than the game of cricket 🙂

So, like I mentioned earlier, we had this Product review meeting. The basis of the review was mainly the usability testing and user feedback that the product team had received since CricHeroes’ beta launch in October 2016. The review was focused on revisiting the “Start a Match” feature – one of the core features of the app.

The participants of the meeting included the product owner, product manager, principal designer & the product designer.

. . .

“Start a Match” User Story

This is how the user story of Start a Match feature was defined.

To Start a Match, user:

needs to select two teams,
has to select a captain and playing squad for each team,
enter number of overs for the match,
city/town should be auto-filled based on user’s current location, (if user hasn’t given location permission to the app, they remain empty and optional)
needs to select a Ground in the city / town selected above,
date and time should be auto-filled as per current date and time.
“Next” button gets enabled only after user has selected both the teams and overs per match.
“Save for later” buttons saves the match in database and takes user back to the MATCHES screen. It gets added as the “Upcoming” match.

Existing User Interface

start-a-match-new — CricHeroes – Start a Match feature redesigned

Identifying the Problem:

We discussed over and identified the usability issues in the flow, one at a time. We also included few of the feedback that we received from our actual users.

This is the main screen to Start a Match.
Everything that user had to do, to start a match, was there on this one screen.

Well, then what was missing?

The first problem was – too much information on the screen, which meant, too much for the user to do.
There was a defined flow in which the app wanted user to feed in the information (refer the user story above), but the interface was not guiding the user enough with what information to feed in first and what next.
Users were entering the information as per their understanding and missing certain fields. This was resulting into many validation messages being popped up/prompting the user to feed missing details.

Making the feature more usable

Well, different design patterns help us provide solutions to most common problems that we as designers face in our work. In this case, we explored progressive disclosure technique and applied it to make the entire flow more simple, minus any distractions.

What is Progressive Disclosure?

Progressive disclosure is a technique for managing information complexity. When you use progressive disclosure, you show only the information necessary at that point in the interaction. And you display more advanced functionalities of the app interface, as the user interacts with it.

It is a simple, yet powerful design pattern where the designer,

Initially, show users only a few of the most important options and
Discloses a larger set of specialized options only if a user asks for them.

To design a good progressive disclosure, you need to learn about your users, involve them in the design process, and interact with them.

The Solution

All we had to do now was, sequence the information and actions across multiple (but not too many) screens in order to reduce the feeling of overwhelm for the user. And we exactly tried to do that. We broke down each line item of the earlier defined user story and arranged it sequentially and in logical order.

Revised User Interface

. . .

The jury’s still out on the usability of this feature redesign. We have taken a first round of feedback from a few users we are closely working with, and so far we have received a positive feedback from them. New challenges would arise as we continue to build the product and keep seeking feedback from our users. One thing we would like to continue doing is revisiting the product already built and make it usable.

Have you applied progressive disclosure technique in any of your designs? Curious to see them!