.png)
Role: UX|UI Designer
Team: EnergyCAP Design and User Experience
Tools: Figma, Confluence, Miro, Maze, Adobe Suite
We designed this improved date picker to replace a standard, restrictive component, offering energy managers flexible options for selecting custom intervals to support better data-driven decisions.
Engaging directly with customers to gather insights about user needs, pain points, and feature priorities. Using Maze as a key tool, I created detailed correspondence and interview scripts, developed research analytics documents, and organized insights into Miro through affinity maps and other user research boards to visually structure feedback and key themes. I also managed follow-ups to deepen customer relationships and gain further insights.
Our redesign of the date picker began with in-depth user research, including interviews and surveys with energy managers, to understand the limitations they faced with the existing component.
Objective: Replace the current standard date picker component with a custom-designed date range selector tailored to the specific needs of energy analytics.
Scope: The new date picker will provide flexible options for selecting and comparing custom time intervals, such as fiscal quarters, seasonal periods, and custom dates, enabling energy managers to perform detailed, precise data analysis within EnergyCAP.
Key Requirements:
User-Friendly Interface: Intuitive design with clear labeling, easy navigation, and accessible quick-select options (e.g., "Last 7 Days," "Previous Month").
Custom Range Selection: Flexible date range selection allowing users to specify daily, weekly, monthly, and fiscal intervals.
Enhanced Accessibility: Ensure full keyboard and screen reader compatibility, meeting accessibility standards for all users.
Integration & Consistency: Seamless integration with EnergyCAP’s visual and functional design standards to provide a cohesive user experience across the platform.
Outcome: This new date picker will streamline date selection, improve data filtering precision, and support informed, data-driven decision-making.
Insights from this research guided the initial sketches, focusing on flexible custom intervals, fiscal and seasonal options, and quick-select presets. We developed wireframes and interactive prototypes to validate functionality and ease of use, testing each iteration with users to gather feedback on navigation, labeling, and accessibility. Based on feedback from each testing round, we refined the design to streamline workflows and improve accessibility, ultimately creating an intuitive, flexible date picker that supports precise energy data analysis and aligns with EnergyCAP’s analytics needs.
.png)
.png)
The control will either open based on the selected date or the user's current date. As you move forward and backward the control will figure out what years to show.
.png)
.png)
The control will either open based on the selected month or the user's current date. As you move forward and backward the control will figure out what years to show.
User picks a single day as the end point for the 7 day range and all days in the date range will appear as selected. 'Last' indicates that this will be a rolling range.
.png)
.png)
User selects the day
User selects the beginning and end day in the range.A ll days in the range will show as selected.
.png)
