Tool
Figma
Team
1 PM, 2 UI Devs
Role
UX/UI Designer
1. Introduction
1. Introduction
Problem
Problem
Problem
Problem
"When scheduling a recurring meeting. I have to toggle on 'recurring meeting' which leads to this confusing message and no additional controls"
- A Columbia University Professor
Solution
Solution
Solution
Solution
Improving the "Recurrence" functionality along with adding a conversational recurrence summary providing an edge to RingCentral.
My Role
My Role
My Role
My Role
I was in charge of the research & discovery, brainstorming, and interaction design of this project. I maintained a strong collaborative relationship with the Product Manager for feedbacks and the final decisions and circled back with the developers to ensure implementation would meet the deadlines. Finally, I worked with a visual designer, Alice Zhang, to finesse the designs and hand-off to the developers.
Team size: 5 - Product Manager | Poduct Owner | 2 Developers | Product Designer (me)
Duration: 1 month (Jun’19-Jul’19)
Impact
Impact
Impact
Impact
The users increased from 15 to 137.
Release Date: 5/31/2020
A quote that Chief Innovation Officer Matt Gerber from Western Academy -
"Using the integration between RingCentral and Canvas, an online learning platform, has been the biggest breakthrough for this school. Thanks to this integration, teachers are able to keep everything centered around one platform. Instead of having to send emails with a link to classroom time or office hours, they’re able to share meetings right on Canvas.”
2. Competitive Analysis
2. Competitive Analysis
2. Competitive Analysis
Microsoft Outlook
Microsoft Outlook
Microsoft Outlook
Outlook Calendar is one of the most used calendars in the professional setting. It uses seamless integration with apps such as Skype, RingCentral, and Zoom to schedule meetings.
Pros:
- Focussed dialog: This allows the user to take end-to-end recurrence decisions in one place, retaining his focus.
- Recurrence Summary: Provides a summary of the recurrence frequency, in the end, providing a context to the user.
Pros:
- Focussed dialog: Allows the user to take end-to-end recurrence decisions in one place, retaining his focus.
- Recurrence summary: Provides a summary of the recurrence frequency in the end, providing a context to the user.
Cons:
- Unfamiliar dialog interaction: Selecting the recurring meetings button opens a dialog box without graying out the background, defeating the "pay attention here" purpose of a dialog box.
- Unfamiliar dialog location: The dialog opens in the center top of the page, away from where the user is currently paying attention.
- Information Overload: The only text in the dialog are 8 different dropdowns in the small screen real-estate. This will overwhelm the user and lead to errors.
Cons:
- Unfamiliar dialog interaction: Selecting the recurring meetings button opens a dialog box without graying out the background, defeating the "pay attention here" purpose of a dialog box.
- Unfamiliar dialog location: The dialog opens in the center top of the page, away from where the user is currently paying attention.
- Information Overload: The only text in the dialog are 8 different dropdowns in the small screen real-estate. This will overwhelm the user and lead to errors.
Google Calendar
Google Calendar
Google Calendar is used in many professional as well as personal settings. It allows for great integrations with 3rd party apps as well as other Google apps.
Pros:
- Clean dialog UI:The custom dialog looks clean, with few options frequencies: Google calendar gives up to 8 suggested recurrence frequencies along with a custom option in an initial dropdown.
Cons:
- Too few options: When selecting recurrence from the dropdown or the custom dialog, there are few options, which can give a sense of "incomplete".
- Mutually exclusive options:The options in the dropdown are different from the ones provided in the custom dialog. This might lead to confusion and the user might end up spending time finding the desired option, which is not an efficient behavior.
- Information overload: The dropdown has about 8 unrelated and distinct options. Understanding each one to make the right choice can overload the user.
Inspirations
Inspirations
- Outlook's recurrence summary, although not perfect.
- Google's dialog box UI was clean and not overwhelming.
Conclusions
Conclusions
- Outlook covered all the use-cases in one place, providing a complete view for all the use-cases.
- The process of scheduling recurring meetings has a lot of use-cases and might need extra attention for edge cases such as setting up an end of semester check-in meetings last Thursday of every semester.
- Outlook covered all the use-cases in one place, providing a complete view for all the use-cases.
- The process of scheduling recurring meetings has a lot of use-cases and might need extra attention for edge cases such as setting up an end of semester check-in meetings last Thursday of every semester.
3.Initial Design Approach
3. Initial Design Approach
Learning from the competitive analysis, observing the interactions offered by Microsoft and Google, and keeping a professor's persona in mind, I began the design with 2 different approaches -
Approach #1 "Dialog interaction"
Approach #1 "Dialog interaction"
Approach #1 "Dialog interaction"
A similarity that came to light from the competitive analysis of Microsoft Outlook and Google Calendar was that they both offered a dialog for the recurrence functionality.
A similarity that came to light from the competitive analysis of Microsoft Outlook and Google Calendar was that they both offered a dialog for the recurrence functionality.
Approach #2 "In-line interaction"
Approach #2 "In-line interaction"
Approach #2 "In-line interaction"
A dialog is usually used to either obstruct a user's flow to ask for a confirmation or direct the user's attention to a specific task, however, I wanted to counter that with an inline approach, as this task didn't need to obstruct user's flow or immediately pull and keep his attention.
Concept testing
Concept testing
After a brief user-test with 2 designers and the PM, we decided to go ahead with the "in-line interaction approach".
A brief user-test with 2 designers and the PM, we decided to go ahead with the "in-line interaction approach".
After a brief user-test with 2 designers and the PM, we decided to go ahead with the "in-line interaction approach".
3/3 believed that a dialog would be more cognitively overwhelming than an inline approach.
With a decision between - low cognitive load versus a more focused approach, we decided that cognitive load holds higher priority than to isolate the functionality.
"A professor doesn't need the form to be complicated."
- A Product Manager
A professor doesn't need the form to be complicated.
- A Product Manager
"I like the dialog. It provides a focussed view for the complex decisions and dropdown - but it does have the potential to get overwhelming."
- A Senior Designer
4.Design iterations
4. Design iterations
Iteration #1: Accurate information architecture
Iteration #1: Accurate information architecture
After deciding to go with Approach #2, the next step was to organize the use-cases. This was key to achieving an accurate direction for the overall design of the functionality.
Some key aspects to investigate for the first iteration
- What would be the recurrence frequency? - Final options are 'Daily', 'Weekly', and 'Monthly'.
- How does the recurrence end? Final options are 'Specific date', 'Specific number of occurrences', or 'Always recurring'.
- Would there be a need to repeat the meeting multiple times in a week or month?
- If monthly, how to manage specific occurrences, like last Friday of every 2 months.
Outlook served as a great point to start. Listing out all the use-cases first and then cross-referencing them with Google calendar gave a complete list of use-cases to cover.
Iteration #2: Look&feel and Contextual Language
Iteration #2: Look&feel and Contextual Language
There were 2 parts to this iteration -
1. The titles and the layout of the dropdowns - we came up titles that sounded like a conversation -
Repeats every
Until
2. The way we tackled "Cognitive Overload" was a progressive reveal of dropdowns.
- Step 1 - Do you need recurrence? - if yes, check the box!
- Step 2 - Ok, choose the type of recurrence (monthly, weekly and daily)
- Now, let's help you pick the specific details.
- Step 3 - Finally, when does it repeat and until when?
The progressive reveal gently guides the user to the required fields, which reduces cognitive overload.
Iteration #3: RingCentral's edge - Conversational summary line
Iteration #3: RingCentral's edge - Conversational summary line
Recurrence summary was an interesting piece of this project.
Aspects I kept in mind -
- We needed a template that covered all the use cases
- The template needed to be generic enough so that it was easy to implement with very few variables
- The language needed to be easy to read and conversational
Iteration #4: Final iteration and handoff
Iteration #4: Final iteration and handoff
This was the phase where I worked with Alice, our visual designer, to finesse the visual design and help wrap up the UI of the project.
To tie a bow to this project, we finished the end-to-end flow.
5. Design Validation
Outlook released a "New look"
Outlook released a "New look"
Fast forward 1.5 years to 2020 November, Microsoft Outlook released a "New look" for the product. While setting up a recurring meeting, I came across their new recurrence summary.
2 observations -
- There was a stark difference between the old and the new.
- The new was surprisingly similar to what I had come up with!
It's a good feeling to see such instant validations to designs from such big brands.
