PROJECT OVERVIEW
Pilot is an internal web application that data analysts use to generate various financial reports for a financial services company based in Southern California. These reports support the investment group on a recurring and ad-hoc basis. I’ve spent time working with Margaret Farron, a Visual Designer from Avanade, to improve the user experience of the date picker in Pilot.
About this project: Pilot Date Picker
Problem: How might we make the date picker easier and more efficient to use for the users? We identified the following problems:
Users spend a lot of time selecting dates across multiple reports in Pilot
Users can select dates for which there is no data available (weekends, future dates, and past dates)
Date shortcuts are not easily accessible for users
Solution: I redesigned the date picker in the following ways to address the initial problems:
Enable users to set a default date in Pilot (e.g., "last month-end" or "yesterday") for faster date selection and more efficient completion of reporting tasks
Gray out date picker dates without associated data to reduce user guesswork time
Redesigned date picker with date math functionality for easier and accurate date selection, considering weekends, holidays, and valid dates, reducing the need for mental calculations
Timeline: From early-stage wireframes to building the first iteration, the process took about 1 month.
My Role: I took the lead on the UX/UI Design of the date picker and my colleague, Margaret Farron, provided feedback throughout the process.
Team: Myself and Margaret Farron (Visual Designer, Avanade)
Tools: Adobe XD, Figma
Please note: Due to legal & compliance guidelines, the company name and sensitive data has been removed from the mockups included in this case study.Before redesign:
Below: Demonstration of the date picker functionality before the redesign
Step 1: Usability audit
I performed a usability audit on the date picker in the application to identify opportunities for improvement.
Below: A screenshot of the date picker with annotations that point out areas of improvement prior to redesign.
Step 2: Ideation
I tested out some date pickers on popular websites such as Airbnb, Delta, and Google, and another financial services tool, FactSet, to get inspiration and asked my colleague for suggestions. Takeaways:
Date pickers typically have a calendar that visually highlights the start date, end date, and through dates.
Date pickers usually allow users to view future dates, but this is not applicable for this design since data is not available for future dates.
Offering a quick way to jump to a date makes date selection easier for users.
Below: Hand sketches I created to visualize some date picker ideas without focusing on the nitty-gritty details.
Below: Iteration 1 of the wireframes I created in Adobe XD
Below: Iterations 3 and 4 of the wireframes I created in Adobe XD
Below: The final 2 designs that I created in Adobe XD and tested with users prior to handing over designs to the developers.
Step 3: Gathering feedback from users & iterating on the design
I shared my wireframes with 4 users and gathered the following feedback:
Users preferred design A versus design B because it was easier for them to access the months and years in the side panels.
Users liked that the weekend dates and future dates were not selectable on the date picker.
Some users were unsure about having an “Apply” button on the date pickers. They expressed that the apply button might be frustrating when running reports for many different dates.
Users wanted more flexibility with quick date selection.
I leaned on these findings and incorporated the feedback with the visual design of the date picker.
Below: A screenshot showing the evolution of the date picker design throughout build (From left to right: Initial Design to Final Design)
Step 4: Handing designs over to the developers
After delivering the design documents to the development team, I discovered that the two separate calendar drop-downs wouldn't function as originally envisioned.
Taking into account the feedback from the development team, I discussed my options with my colleague and explored alternative options and collaboratively modified my design in order to achieve the desired functionality from a development perspective
I created user stories in Jira to ensure the requirements were documented and accounted for by the developers.
Step 5: Testing the date picker before release
I tested the date picker prior to release so that I could identify bugs and ensure the functionality met the user requirements.
I actively collaborated with the developers, providing comprehensive feedback on necessary changes to the date picker in order to align with user requirements.
Below: A screenshot showing the first build of the date picker in Pilot with sensitive data blurred out.
Step 6: Gathering feedback from users after the first release & iteration
Following the initial release of the date picker, I conducted interviews with 5 users to gather feedback on the design. Incorporating the user feedback, I made changes to enhance the design.
Changes:
Updating the label and functionality for the date math calculator to be more intuitive.
Updating the Year panel to function properly and decrease the amount of manual adjustments users need to make.
After redesign:
Below: A GIF demonstrating the functionality of the redesigned date picker after it was released to users
Reflection
Developing this feature required more time than anticipated, mainly due to the numerous micro-interactions involved in a date picker. Nonetheless, I found joy in problem-solving and engaging in discussions with stakeholders and my colleague to enhance the user experience of date selection in Pilot.
Working alongside my colleague was a valuable learning experience, encompassing ideation, user advocacy, and design handoff to developers. One significant lesson I gained from this project was the realization that certain design changes may only become apparent during the build and test phase. It was through testing the functionality with the developer that some features truly came to life. I am grateful for the open communication and collaborative spirit I shared with the developer throughout this feature's development.
If I were to re-do this project, I would want to create a prototype of the date picker and test the prototype with users to catch any design flaws earlier in the process. I also would consider the following design options to improve the date picker design:
Keep the quick-selection date chips below the calendar to save users even more time when making date selections
Test out different ways to move the calculator functionality closer to the start and end date fields to allow better focus on date math
Below: A screenshot showing an overview of the amount of work I did throughout the process of redesigning the date picker.