Calendar Widget


Project Highlights

I was the Senior UX/UI Designer for this project. The MVP calendar product was based on essential elements gathered from surveys to potential users. The design was iterated several times, and each successive design was tested and analyzed. Overall, the calendar product tested as a winner by a substantial percentage.
Jump to design mock ups

  • All designs were conceived to be desktop / mobile compatible with minimal coding changes required
  • Desktop versions were coded to also to be responsive
  • All features had to be “bi-lateral” – meaning the full set of scheduling options had to be viable for both parties
  • The calendar product included robust notifications – email, SMS, alerts – notifications proved to be some of the most essential elements of the UX flow
  • Iterations simplified choices to encouraged usage and success rates

Growth Experiment

Increase overall engagement rates from potential users




Making it easier to set appointments will increase contract agreements


At least 19% improvement.


At least 1 month, and a 90 day tail, based on data from Google Analytics


270% improvement


NDA protected


Adobe Creative Suite


Growth Lead

Design Elements



The palette was altered for each of the six (6) calendar widget iterations. These two palettes are associated wiht the two winning designs.

Original font sample
Final palette option A
Calendar palette mobile first
Final palette option B


Montserrat font sample
Gotham font sample
Montserrat font sample
Gotham font sample

CTA Buttons

Calendar blue CTA button
Calendar orange CTA button

Calendar blue mobile CTA button
Calendar orange mobile CTA button

Design Mock Ups

Iteration #1 - adapted Bootstrap widget


Original calendar Bootstrap widget

Iteration #2 - extended Bootstrap widget


Extended calendar Bootstrap widget

Iteration #3 - full calendar


Full calendar product

Repeat times overlay

Iteration #4 - concise interface


Calendar concise UI version 1

Calendar concise - UX sequence

Iteration #5 - concise interface 2


Calendar concise UI version 2

Iteration #6 - mobile first


Mobile first calendar