I worked closely with the GoToMeeting and GoToTraining Android designers, as the design approach for this effort would impact their mobile offerings. We identified three goals for the redesign:
1. Focus on Attendees. For all of the products, the majority mobile user base are attendees as opposed to organizers. We ensured that our design decisions reflected the scenarios that our attendees would most likely find themselves in and addressed their most common pain points. (As an example, most attendees watch the screen without as much interaction as an organizer. So, having the toolbar automatically transition to full screen after a few moments of inactivity is especially important to attendees of the session.)
2. Incorporate Android conventions as appropriate. Wanting to take advantage of the inherent user expectations that come with Google's visual design language, we aimed to maintain many of the common components (floating action buttons, side panels, flexible toolbars, typography) and guidelines (depth & hierarchy, motion, bold use of color and illustration).
3. Maintain Citrix Visual Style. The redesign should still feel like part of the Citrix suite of products. To support that, we maintained as much Citrix branding as we could, specifically iconography, tone of voice, illustration style and color scheme.
Technically, this process started a year prior when I was working on the GoToMeeting for Android app. During that time, another colleague and I embarked on the following research:
From this information, we created a long list of ideas which we separated into three buckets: High, Medium, and Low priorities. We lobbied for high priorities to be include in the app redesign, while Medium and Low priorities were not as important (from a usability perspective) and may also have required additional research. Ultimately, the user data & ideas we focused on for the redesign supported the following user pain points we identified:
Once we identified our top priorities from a design perspective, we began to sketch these ideas out (see the first set of sketches below). Our explorations spawned smaller ideas, especially around interaction.
At this point, the project was de-prioritized for GoToMeeting, but resurfaced when I began work on GoToWebinar for Android a year later. With the mobile designers from GoToMeeting and GoToTraining, we continued our sketching exercise to align our product apps as much as possible (see the second set of sketches below).
The product teams had an aggressive time of about three months to implement the entire app, including any visual and interaction design updates. Before that clock began, we presented our aligned design thoughts to the product team to ensure we were still aligning with business goals and any technical considerations could be ironed out. Once the team felt confident moving forward, I continued with high fidelity designs and worked with the GoToTraining designer to conduct usertesting.com sessions for quick user feedback.
We did meet our target deadline, but chose to release only to a small subset of our users so we could monitor the app's quality via NPS score, crash analytics, and user feedback.
When a user joins a webinar, but no one is sharing a screen, they are taken to the waiting room, where they, not surprisingly, wait for the webinar to begin.
When a presenter begins screensharing, the waiting room information clears and is replaced with the content. Users can pinch and zoom and rotate to landscape.
After a few moments of inactivity, the user is automatically taken into full screen view, where toolbars animate out of the visible viewport. The two floating action buttons also animate to the corners for easy access while preserving as much real estate for the main content.
During a webinar, attendees can ask the organizers and panelists questions. When they tap on the ? floating action button, a side panel animates into the visible viewport. Here they can ask a question as well as see other questions that have been answered publicly.
With the redesign, we supported a product-wise release of Handouts, which allows organizers to provide documents for attendees during the session. Below is a prototype I created to demonstrate the user flow and icon animation to the product team.
The redesign is now available to 100% of our user base, which means that the NPS score and quality of the app remained stable and eventually improved. After that release, I conducted a couple of user tests to validate additional design elements: