Case Study - Selection Table

The Problem

Our current MobiControl console is using a mixed user experience of legacy and NGUI. Legacy has been around for many years and is not up-to-date with modern style components. MobiControl is using a component that has an old windows style look. It is a selection list that allows the user to move over an ‘Available’ list to the ‘Selected’ table. The user can take an action of editing, deleting and selecting with this component.

• Only add one list type at a time
• Old style and not intuitive
• Less productivity for the user to complete an action
• Takes up a large amount of real estate

The Approach

How can we simplify and modernize our current selection control for our users? To start off, we went through all the configurations in MobiControl that use this control. In total, it was being used almost 20 times. We documented and took screenshots of which platforms and configurations use it.

Mapping

As a team, we captured the behaviours and any edge cases from the current control being used. This allowed us to fully map out our ideas and brainstorm accordingly as a team. What we needed to keep in mind:

• How can a user edit a previously existing list?
• A user can enable multiple lists
• How can a user see more information from a list?
• How can a user delete a list?
• What happens if a user tries to delete a list being used elsewhere?
• A user can only enable one ‘Type’ of list per configuration

Sketching

Three sketches were created with similar interactions and behaviours. While converting MobiControl to the new look, we assess the experience to see how intuitive it is. Having actions accessible on each row is beneficial to the user to complete their task. Edit and deletion is achieved by one click of the desired row.

Decision

Once the wireframes were complete, all sketches and flows were presented. We thoroughly went through all options to make a decision on the direction we wanted to go and decided to take all three options to the prototyping stage.

• All sketches had the same functionality with slightly different behaviours
• Everyone saw the benefits of the options presented, but couldn’t make a decision to move forward with only one without user validation.
• Excellent chance to conduct A/B testing internally and externally with customers and validate the right solution.

Prototype

High-fidelity mockups were created for all options.

Test: Results

Option 1 / Checkboxes

• Quick and easy for them to find selection of a list
• Majority of the users brought up how our device list currently functions
• Previous UI interactions introduced in the console caused them confusion Users felt as if they needed to take an action after selecting a list

Option 2 / Call to action buttons

• Found the buttons quickly
• Took a brief second to figure out if a list was enabled/disabled
• Mentioned having the status inside a button required more work for the user
• Not as intuitive as they would’ve liked it to be

Option 3 / Toggles

• Very intuitive
• Understood how to enable a list
• Played around with the UI without a problem
• Mentioned it is consistent with how the UI in MobiControl is being handled

Outcome

Once our Design Sprint was complete, we finalized and validated our designs. The toggle approach was the most well received and preferred for our customers. Users were able to complete enabling, editing or deleting a previously existing list. Overall, all users found the experience to be intuitive and straightforward. Our users found that option gave them the best experience without having to get stuck. We moved forward with the toggle approach and incorporated it into our UI.