A thorough process of designing or a product. Explained through an example of a date range filter.

UX component: Date range filter; User journey of selecting a date range.

If you are facing difficulties in building or executing a process, and understanding the purpose behind each of its steps, this blog is meant for you.

Design is a cohesive process, all the interactions a user makes collectively defines the User Experience of a product.

Thus, paying attention to small UX components is of paramount importance while building a product.

Redesigning of the existing component “Date range filter” was the first task assigned to me at my product design internship at Capillary Technologies, Bangalore(Summers 2018).

The Problem statement being: Users were facing difficulty in using the existing date range filter. This difficulty was found in the Testing phase of the component through Fullstory.

As this was the first task assigned to me, I decided to get evaluated at each and every step I was about to take in redesigning this date range filter. This led me to discover the joy of documentation of my design process.

As expected, documentation compelled me to be absolutely sure in what I was writing, even what I was thinking of.

Is this the correct approach?

Am I doing all the right things?

Am I missing something?

These set of choices were going to make my own design process. I had to define the series of tiny steps that converges to a robust solution.

Generally, as designers grow, we get to know what’s important to ask to understand the product better, the questions get refined from these

Who are the target audience?

What colours do the client want?

When is it due?


Why the product is important?

How are things working without this product?

This helps to understand the need of the product, to find its purpose (and if we think, every component is a product in itself).

This is my version of what Chris do – founder, CEO of BLIND tells in one of his youtube videos.

The process

The steps involved in the redesign of this UX component fit in the Design stages methodology recognised by the Interaction Design Foundation and defines a process with key objectives to design a UX component.

1. Understanding the purpose of the component

Why, What & When do you use a Date range filter?

Collecting the answers to why, what, when questions help us understand the purpose of a design component.

Existing design of the Date range filter. Screenshot from the Analytics tool.

Purpose: A filter which allows selection of a time interval for any analytics report. It also allows choosing two time intervals for comparison purposes.

2. Understanding our Users

This part includes the persona hypothesis which involves defining the kind of users using this component & understanding the circumstances of usage. This is done in order to assess the mental model of the users.

Persona building can either be descriptive or compact & precise depending on the working methodology you are using.

In redesigning phase, personas are generally provided since they were already made during the initial design of the product.

Here are a few examples of User personas if you wish to understand how User Personas are defined.

3. Assessment of existing design

This part of redesigning requires patience, time & empathy to understand the underlying motive of a user. To find answers to questions like,

What are the problems that a user is facing with the current design of the component?

What is stopping the user from achieving her goal?

Why is the current design of the date range filter not effective enough?

Assessment of existing design requires micro level analysis for which you need to document your observations & problems inferred from the existing design.

For the date range filter, these are the observations & problems inferred from each crucial element:

Opening interface of Date range filter, with Till date, Last time period & custom tabs opened. In order from left to right (Click to zoom)

Till date tabular button

Observation: Provides with 3 different tabular buttons-

  1. Till Date, Last time period & Custom
  2. Each tab is a separate way to select a date range.
  3. User selects a tab to go through a discrete set of steps to select a date range.


  1. Every tab is a feature through which the user can select a date range. But since each of it has different ways to select the date range, the user is required to learn 3 different ways of selecting a date range.
  2. ‘Till date’ term didn’t specify its meaning. Today’s date is inferred as ‘Till Date’ but in actuality, it is the last synced date of the database.
  3. Similarly WTD, MTD and YTD end up not defining themselves which are Week to date, Month till date and Year till date respectively.
  4. Result: Dead clicks and User switches to use the ‘Custom’ tab.

Last time period tabular button

Observation: User can select the last number of day/week/month to filter out the report.


  1. This requires the user to be certain about a time period.
  2. To generate general/comparison reports

Custom tabular button


  1. The user can edit the default time interval which leads to the extra step: Selection of the desired time interval from the calendar interface.
  2. The calendars to select ‘From’ and ‘To’ date are not labelled distinctly.


  1. The date range is selected by selecting ‘From’ & ‘To’ date from dedicated calendars.
  2. Since ‘From’ & ‘To’ calendars are not labelled distinctly, a user may try to select ‘From’ & ‘To’ date from the same calendar, if the dates fall into the same month.
  3. Analytics are available until the last synced date only, which differs from the current date. This information being hidden, a user often select the current date which leads to a failure.

Compare feature

Each of the Till date, Last time period & custom tabs are provided with a compare option.

Compare option(checkbox) allowing user to compare data of two time intervals (Click to zoom)
Compare option checked-in (Click to zoom)


  1. The user is provided with compare option with each Till date, Last time period & Custom tabular buttons.
  2. The user can select a tabular button and go through a discrete set of steps to select a date range.
  3. Each tabular button has a different parameter to compare dates.
  4. The existence of ‘Common stores only’ toggle button.


  1. The user can compare date while using any of the tabs.
  2. In inheritance from the date selection tabs, compare feature will also have three different ways of selecting a date range.
  3. ‘Common stores only’: The number of stores may increase for a particular brand over time. It is a desirable case that user wants to compare the analytics only for the stores which are commonly functional during both the selected time periods. So, a toggle button is provided to suffice the aforementioned requirement.
  4. These inferences give an idea of the problems a user might be facing and will provide us with valuable insights during User goal assessment.

These inferences give an idea of the problems a user might be facing and will provide us valuable insights during User goal assessment.

4. User assessment: Understanding motive & difficulties of a User

If you are redesigning a product, it is also required to find why the existing design is failing to communicate with users. For this user, behaviours are assessed, conventionally through user interviews.

Alternatively, products like Fullstory which provide recorded video sessions of Users on our product can also be used for assessing user behaviours.

Based on the observation of 25 distinct Fullstory session of our users. I derived a qualitative look on the user behaviour.

With these observations, we can conclude that most of the users which are using date time filter use ‘Custom’ for selecting a date range.

But why most of the customers are using ‘Custom’?

In one way, it could be explained and understood by understanding mental model of the user.

In a nutshell, User’s mental model is

What a user perceives the functionality of a product before using it.

And thus, it defines the User’s natural way of using a product, an obvious perception of how the product is going to work.

And, there is a significant difference in User’s mental model & Implementation model.

Difference in Implementation model and User’s mental model. Courtesy: About face by Alan cooper

So, putting in simple words, what could be the mental model for a date range filter? Or how a user would perceive a date range filter to be?

Answer- User perceives the date range filter as a tool to select a ‘From’ and a ‘To’ date, and the app would be showing the analytics for the selected time interval.


To which ‘Custom’ turns out to be the closest layout to the user’s mental model.

This doesn’t imply that ‘Till date’ and ‘Last time period’ should be removed, because users are quite used to them and use them to quickly/easily select a time interval.

That means, these are utility features for the date range filter. And should be displayed as feature to a simple date range filter.

5. Insights of Product and User assessment

Once you assess the existing design & User behaviour for the existing design you can sum up and write down the points which will shape your redesign:

  1. The mental perception of a simple date range filter(with a few features) collapses as soon as the date range filter opens up. This causes the user to have a sudden belief that he/she’s incompetent.
  2. Difficulty in understanding the flow of interactions for selecting a date range.
  3. Data/Analytics and comparisons are available till last synced date. The difference between the current date and till date is undisclosed to users, leading to dead clicks and bounce offs.
  4. Similar to selecting a date range, compare feature has a confusing and anharmonic flow.
  5. The existing design was not giving any warning to the User for clicks outside the date range filter dialogue box that they need to click on “Apply” otherwise the data filled won’t be saved.

6. User Goal assessment

User goals are what a user is trying to achieve. It is simple as the user’s mental model.

For example, User goals for Date range filter would be:

  1. To filter a report for a specific date range.
  2. To compare data for two date ranges.

7. Competitive analysis

Photo by rawpixel on Unsplash

Competitive analysis is understanding how other products show a similar component to their user.

Through this, we learn about other unobserved problems which may possibly occur(after we finish redesigning the whole component) and how competing products have solved them

For example, in case of date range filter, I studied the analytics tools available in the market in contrast to our analytics application. Specifically:

  1. Use of the app and their users’ perspective.
  2. Use cases of the date range filter present in this app.
  3. Similarities and differences in the date range filter they have.
  4. Solutions to our unique problems (if available).

A few analytics tools took into consideration were Domo, Google Analytics, Power BI & Tableau.

This lead to the conclusion that the date filter should be designed keeping the mental perception of their user in mind

  1. A simple date picker with a calendar interface allowing the user to select ‘From’ and ‘To’ date, labelled distinctly.
  2. Presets which makes date range selection efficient like: ’today’, ‘till date’, ‘last time period’ etc should be included as our user base is used to it.
  3. Use of simpler(obvious) terminologies. Terminologies can also be explained to the user via inductive text.
  4. Harmony in the flow of interactions.

8. Solution Hypothesis

With all the information gathered from the previous procedures, many solutions can be structured solving the same root problems.

Since we are solving for a simple date range filter, this step may seem to be unimportant, as the solution would again be a component allowing the user to select date ranges. But this step has a vital role when you design larger products.

Because, you decide the specific way the problems should be solved
, the technology, the platform(mobile device or smartwatch or Virtual Reality Devices etc) that should be used.

9. Possible solutions

Photo by Lucas Benjamin on Unsplash

Okay, it’s the time to get creative. This step allows you to explore the wildest structure, layouts, user journeys, storyboarding as much as possible.

But stick to low fidelity, we often dig deep in the first solution we could imagine and subconsciously find reasons to support it. Hence, overlooking what may have been overlooked.

Try different possible solutions, making lo-fed wireframes.

It will surely help you in making your own unique innovative design solutions. Something that you can call uniquely yours.

And since you’ve explored and documented other possible solutions too, you’ll be knowing the ins-n-outs of the design. It will help you to select a solution and you’ll have answers to mostly all the questions inbound towards you from the involved stakeholders, but always seek first to understand then to be understood.

Once you’ve finalised your lo-fed design, you’ll be ready to go with the User stories and Wireframes.

lo-fed wireframe, Date range filter
lo-fed wireframes-Last time period selected, Date range filter
lo-fed wireframe- compare feature selected, Date range filter

10. Comparison & Selection

Time to prioritise!

Sometime you may come up with more than one potential solutions. It attaches a sense of ambiguity on how to choose a solution unless you collect answers to the following question:

Which solution is closer to User’s mental model?

In what scenarios each solution may fail?

Which solution is easier to measure and is flexible for future amendments?

Which solution is easier to engineer?

And any other such question relevant to your scenario. Questions would help in prioritising, do the math and you would be able to select the one.

11. Hi-fed design

Good Interface design delivers good experience to a user.

User interface becomes the point of contact with the users when you try to deliver the best User experience you’ve designed through the process so far. Interface may depend on the UI guidelines you’re working on or a fresh UI theme which you may exclusively create as per your project.

Users like simple things. But when it comes to the simplicity of a product,

it is not only defined by how easily it works, every line which we draw contributes to the complexity of the product

So remove everything unnecessary, put the things without which the User goals won’t be achieved. Examine it, and repeat. Here’s an example of what I did for the date range filter.

Iteration 1&2, UI Date range filter
Iteration 3&4, UI Date range filter

Notice how the UI got simpler with each iteration. And the final UI of the Date range filter looks like:

Opening UI of Date range filter.
UI depicting functionalities of the Date range filter.


Several testing methods are used to measure the usability of design solutions to find out how the final output could be improved further. Fullstory is an example of this, which I used.

The design is tested and improved. It is a recurring process.

You can begin learning Testing from here.

Wrapping up

Design processes are evolving, moving from more-wrong to less-wrong. In the process discussed, many subjective choices can be made depending on your scenario & understanding. The process is purely customisable. If you have any suggestions, do share them!

It’s the first article I have written after learning & executing design as a student, as a mentee, as a freelancer; as a hobby, as a passion; waiting for the right time, learning enough things to deliver something to the readers.

Do clap!!! clap!!! if you liked it, if it was useful in any way.

Feedback fuels motivation, they are awaited!

Work. Empathise. Explore.

Source link https://uxplanet.org/design-thinking-designing-better-ux-components-459ecfdbcec8?source=rss—-819cc2aaeee0—4


Please enter your comment!
Please enter your name here