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

Category

Engagement

Hypothesis

Making it easier to set appointments will increase contract agreements

Goal

At least 19% improvement.

Timeframe

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

Result

270% improvement

Client

NDA protected

Tools

Adobe Creative Suite

Team

Growth Lead

Design Elements

Palettes

 

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
 
 

Fonts

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