Date interaction
When.
June
Role & Collaboration.
UX Designer
Tools.
Adobe XD / Illustrator
The Brief.
Elements (the SaaS product) reporting currently has an option to switch between manual and automatic date entry for each report.
The brief was to recreate the reporting date functionality within the new v6 design style.
Initially I had a conversation with the Product Manager to understand how the functionality works and its purpose. The PM provided me with details of the task flow, showing me the existing interaction and providing requirements for the new design.
It was expected that I would recreate the existing interaction, however there seemed to be an opportunity to simplify it, reducing some of the complexity and ability to misunderstand the various icons and actions.
Defining the task flow.
One example of the confusing flow is the seemingly similar but different terminology for switching between automatic and manual date editing. Depending on the mode, the wording to change the date is different, override in automatic mode and edit in manual. Both of these actions put the user in manual mode and allow you to edit the date.
Existing reporting date editing feature.
This seemed over complicated so I created a new interaction to make this a simple selection between manual and automatic. Progressive disclosure only shows the edit options once manual mode is selected. This reduces the cognitive load on the user and makes it clear what mode they are in.
What resulted is a simple to use interface, that doesn’t take up space within the card but provides the edit functionality upon clicking the icon.
Design iterations.
Once I had an understanding of the task flow I looked at two different avenues for creating the design. I needed to ensure it felt part of the v6 redesign therefore I looked at current design patterns being used, also being careful to ensure the correct typography, colours and icon styles were being used.
I also looked at existing design trends for inspiration, trying to understand current design thinking around date selection, popover design and filtering. This took me to design systems from Adobe to AirBnB and Google as well as looking at Dribbble and investigating research in this area.
I looked at existing pop overs and design patterns already created to see if I could find reusable components and ensure a similar style to the existing v6 redesign.
I decided to use radio buttons instead of a toggle switch as there isn’t an immediate change given the user is required to undertake additional actions.
Inspiration, best practice and trends for date pickers, pop overs and radio buttons. These are familiar patterns and therefore I felt it was important to ensure I didn’t introduce something new that users would need to learn. The product is complex enough therefore where we can use interactions and icons that people are familiar with it will make the user experience more pleasant.
I designed a couple of options, the first concept I decided against as this style didn’t fit with the overall design patterns created for v6. Would look and possibly feel different to other interactions. The second design concept was closer to the UI needed, the familiarity is provided by keeping the buttons the same as those already used in the design. I wanted to use progressive disclosure to ensure users don’t see unnecessary actions and reduce cognitive overload.
Following feedback from internal testing with developers, product and customer service teams I made some small adjustments to the UI. This included moving from a toggle switch to radio buttons and adding information text where data is uneditable and included from another source.
I also felt the design was slightly unbalanced with the auto date showing on the right and the editable date below the manual button. I moved the auto date below the button to provide visual consistency across all data fields. Finally, I increased the text size and contrast for accessibility purposes to ensure they meet AA standard.
Design solution.
The design is with the technical team to build, test and put into production. Ultimately further analysis with users would be advantageous. Usability testing both versions of the workflow would provide further insight into the effectiveness of the redesign, or provide areas in which it can be improved. However, when redesigning an entire complex SaaS product it is unrealistic to be able to test every workflow, therefore internal testing using the prototype was sufficient to be able to move this into development and production at this stage.
