Retrofitting a better UX to an existing application</h1>
  • Project published:
  • My role:
    • UX research & consulting

This was a project to retrofit a better user experience to an existing application.

The application in question had been available as part of a suite of tools for a number of months, however it was not attracting as many users as had been hoped. I was initially asked to spend a very short amount of time (~3 days), doing an assesment and making recommendations to take the product forward.

Due to privacy issues, I won't be including any screenshots in this post.

With such a short time

weight input stage 1 weight input stage 2
Fig 1: Current implementation is a two stage process: Select units, then enter weight.

Phase 1: Initial review

Approach 1: Range input

My initial instinct for the weight input is to use a sliding range form input.

slider
Fig 2: Basic range input
basic weight input
Fig 4: Visually unified weight input

In Fig.4 I have styled the <fieldset> and <legend> surrounding the inputs to use the same styles as applied to a standard text input. I've also adjusted the inputs margins and padding to make the clickable targets extend to the edges, and added a highlight on the input that with the current :focus.

I've used <input type="number"> to enable a numeric keypad on mobile devices. Due to similar issues as those described for the range input type, I have disabled the browser default spinners on these inputs.

</section>