Date Time Picker

Improving Instabot’s core feature to help businesses convert more leads

Context

Instabot’s main value for businesses is to convert leads. One way it achieves this is through its schedule-a-meeting feature. However, the current scheduler is limited in that it’s a fixed design, obscures some important input fields, and not optimized for different devices. Addressing responsiveness/density of the scheduler was the biggest challenge. Solving this issue will deliver Instabot’s promise to increase conversion and reduce the cost for its clients.

We followed the tried and true design-sprint approach to establish design objectives, iterated on possible solutions, then implemented it in-house to save time/resource and reduce doubts.

I conducted a competitive analysis on existing schedule designs, sketched out possible designs, produced hi-fi prototypes, and hand off “pixel-perfect” design files for development. The team and I arrived at a schedule design that’s responsive and comes in two density for flexibility.

Process

Since the release of the initial scheduler node, Instabot’s support team saw a common theme with the tickets: the scheduler node design is too limited and not flexible enough. To get first-hand info, I sat on several calls with product manager, Aaron Lupo, as he troubleshoot with clients on what he/she is trying to do. I took notes and chimed in whenever it was appropriate. The biggest concerns revealed itself immediately:

1. “I pressed Confirmed and nothing happens”

2. “The calendar design takes up so much space.”

3. “I can’t see the input field you’re talking about.”

Working of insights gained from interviews, I framed the problem statement to get the ideas flowing: "How might we make the calendar design more flexible?”

A way to make the calendar design tighter was to reduce padding between elements to make it more compact. It’ll help a bit but will not change the design’s height substantially.

I researched on existing scheduling/calendar designs used by other companies; most use a pattern similar to Instabot. However, Calendly’s approach was the most unique in that it only show weekly availabilities at a time. Stepping back and viewing it as a user, it made a lot of sense — I want to book the appointment as soon as possible.

Adapting the design to show weekly availability and one row of time-slots will greatly reduce the calendar’s height. I took this chance to also address the overall responsiveness of the widget — if it adapts then users will likely see more content at a glance in bigger browser sizes.

I quickly put together some wireframe accounting for those changes and put together a prototype to test out the solution:

To reduce my investment bias, I gathered my product team to test out the prototype. They said the new design makes a lot of sense and seems more flexible. However, one member noted that he still likes the full calendar more since he has to do less clicking/scrolling. 

Accounting feedback, I redesigned the calendar so users can select between two densities during bot creation. Then I prepared the final designs, specifications, and delivered to the development team for implementation.

Reflection

Arriving at a calendar design that’s both flexible and shows critical info at a glance for users was the biggest challenge. I’ve overcome it through experimenting and testing out solutions that led to a final design that’s responsive and meets different needs.

The big takeaways from this project was that I should always make designs responsive from the start due to different screen sizes. It’s also a good reminder that I can never assume what people want (I’m not designing for myself) and sometime it is okay to break convention if there’s a good reason for it.

Since the release of this design, clients have reported that their number of demos book increased by 15% from last month. I will continue to work with the sales team and reach out to clients in the upcoming months to see if this is a trend or just a blip.

I would like to especially thank Aaron Lupo for letting me sit-in during his client calls to help me empathize with our customers that much more.