Interactive Calendar
Overview
My team and I were given a great opportunity to team up with Billy Gene is Marketing INC (BGIM), a well established online educational marketing company based in San Diego, California which has over 100k end-users in 75 countries and growing. BGIM's team consists of over 30 brilliant individuals with whom I had the pleasure of working with and getting to know.
BGIM's current event-booking calendar was in dire need of a fresh look and an improved user experience. We were tasked with a full redesign of the client’s outdated digital calendar to a modern, aesthetically pleasing, and highly interactive “smart” calendar. We wanted to promote ease of use by adding hierarchy, decluttering, and simplifying the visual aspect while making the product more intuitive.
My Role
As the leading product designer, I worked closely with the client's team throughout the entire design process to clearly understand the product requirements, pain points, and vision. I managed user research, conducted user test flows and user journeys, and provided sketches, wireframes, high-fidelity mockups, and working prototypes. I worked closely with our development and design team, tested the product, and signed off on the deliverables.
The Goal
The main focus was to improve the user experience. Our team had to design a way for the users to quickly sign up for any specific session with any particular coach on any specific day by using the online “smart” calendar. We wanted to place particular events on center stage rather than displaying many events, in a convoluted way, with no detail.
The Challenge
The client required a complete refactoring of their entire calendar platform which was set up on the stock Google Calendar platform. They also requested to have a single calendar to accommodate multiple sessions and numerous coaches. Their current calendar exhibited an overcrowded design which made it friction heavy and confusing to use. The calendar looked very homogeneous, it lacked personalization and clear information on the session and coaches. This led to clouded user flow and contributed to major usability issues.
We needed to design and implement a new framework that would operate beyond the stock Google Calendar design system while accommodating multiple custom functionalities that support numerous coaches and session types. The new design would continue to run on a single google account on the Google Calendar backend but display the updated UI framework with improved usability. The focus needed to shift to the sessions and coaches versus the number of events displayed.
User vs. Client
In order to dive into the design process, it was important for me to differentiate between the user needs and the client’s wish list. I used a very user-centric approach to help separate the objectives into their respective categories. It was essential to determine which objective would take priority and how we could approach the rest and deliver on each one.
USER NEEDS:
- Access session/coach data seamlessly
- Ability to register/unregister for future sessions
- Add sessions to personal web-based calendars
CLIENT NEEDS:
- Reflect Google Calendar sessions in real-time
- Convey all the different coaches and session types
- Retain end-users/students
- Modern and minimalistic user interface design
User Research
Our team was fortunate to find that the client had a large user database where they collect feedback from their end users. I worked directly with the Customer Success Team who had ample information from their feedback system. With the help of the feedback data, we were able to create our user personas.
When the team got together to discuss the pain points for our different personas: Michael, Emma, and David, we quickly realized they were all experiencing very similar pain points.
We summarized the key user problems related to signing up for sessions with the current experience:
PAIN POINTS:
- I am confused about which coach offers which session.
- Everything looks the same, it’s hard to sift through every single session to find the one I am interested in.
- I don’t have the time to figure it out. I get frustrated and don’t want to sign up for anything.
- The writing is so tiny, it’s difficult to see what is offered.
- I don’t know if I successfully signed up for the session.
User Flows
I wanted to understand what the user was facing when using the product. What exactly was their experience like? I decided the best course of action was to create user journeys and test flows.
It was clear that the end-users were bombarded and overwhelmed with data not relevant to them. The information was unclear and led to frustration and even led end-users to quitting the process. By mapping out their journey I was able to suggest that the UI should default to a daily or weekly view rather than the current monthly view.
The user test flow and proposed sitemap exercise reinforced our initial hypothesis that it was a simple process that was just being over complicated with the current experience.
Project Scope
In order to keep communication lines open internally and to ensure our teams were on the same page, I outlined some content and functionality requirements requested by the client. This created a morale of “we’re all in this together” and helped the developers plan which functionalities to prioritize and how they were going to execute the build.
CONTENT REQUIREMENTS:
- Date and time info
- Session type and session info
- Coach info and an image of the coach
FUNCTIONALITY REQUIREMENTS:
- Filter by Session type
- Filter by Coach
- Select any specific date
- Never-ending scroll feature
- Ability to switch between weekly and daily view
- Ability to register and unregister to any specific session
- Get error/success feedback after registering for a specific session
- Capture data/keywords to attach specific sessions to their coaches
Design
After a few iterations of rapid sketching, we had a good idea of where to start to refine and expand on for our design process.
Low-fidelity
Drawing up the wireframes helped us visualize that it was possible to simplify the number of screens needed to make the product valuable to both the client and the end-user.
What seemed complex at first, quickly became clear that if we show the events in "day view" as the default view - it is actually quite easy to process the data and accomplish what end-users came to do in the first place which is book a specific session with their coach.
We were able to minimize unnecessary steps, condense and simplify the process, and still arrive at the desired outcome.
Since the same session can be hosted by multiple coaches, we added a feature that gives end-users the ability to filter by coach and/or session.
Instead of making "day view" as a default screen, it was at this point of the design process were we decided to keep the product as a "day view" only and not allow for any other options. It didn't make sense to give users the ability to have a "week view" as we would return to our original issue - data overload. We confirmed our theory by conducting user-testing.
Although both "day view" and "week view" tests came back positive- end-users responded more positively when they were given the "daily view" product test.
High-fidelity
BGIM did not have an established design system so we had to improvise and work with what was provided to us. Once we landed on a solid design direction, we began to create high-fidelity mockups.
The mockups were then converted into prototypes which were then used to perform iterative rounds of user testing collecting quantitative user data. Prototypes were synced with Maze and sent to the clients team for heat map and usability tests sampling various teams and users.
The tests came back with overall positive user feedback except for a few preferential visual changes. Once we were done testing prototypes, the product was then shipped to the development team for development.
OUTCOME
Our solution allowed BGIM to continue using one google account (which was a client “nice to have”). In order for the new events to show up in the updated UI, a BGIM team member would add keywords to an event when an event is being created. Then our algorithm would look out for those keywords to match the event with the proper coach and/or session. Since the users are already logged into the clients product with their gmail account, google automatically registers that user to the event and adds the event info to the users gmail calendar/account.
Validating the design
After the first round of development, we went into full test mode with the help of the client’s team.
We sampled many departments ranging from the Customer Success Team to the Accounting team and Marketing team.
We observed how each user interacted with the product and asked for feedback.
After the first round of revisions, the beta version of the product was released to a minimal number of users which came back positive except for a few development bugs.
Conclusion
This project turned out to be one of my favorites to work on because we were able to make a complex product feel and look so simple. I truly live and breathe advocating for the user and therefore this was a huge win.
I learned that a developer only needs a single keyword to separate instances which is how we created sessions and coach filters using a single google calendar. Our algorithm searched for keywords and shaped the entire outcome of the product without having to make numerous google accounts for each coach and/or session.
From drawing on the whiteboard to using the live product, the success of this product was a team effort and I am so thankful for everyone’s input and hard work. We were able to refactor an entire calendar platform to operate beyond the stock Google Calendar design while accommodating multiple functionalities.
Since the product shipped, retention rates have improved by over 20% and session attendance has gone up by nearly 50% which is the problem my team was hired to solve. I anticipate that the design we laid out with an improved user experience and user interface is directly correlated with increased user satisfaction.
