How Office Timeline users can add their timelines into Google apps

About the product

Office Timeline is a timeline and GANTT chart maker that allows management and operations professionals visualize project progress. Office Timeline includes both an Add-in for Microsoft PowerPoint and a Web version, which is available for all types of OS.

As an add-in for Microsoft PowerPoint, Office Timeline offers a convenient way for corporations and large companies who operate in the Microsoft ecosystem to make use of their access to Office tools and easily create project timelines directly in PowerPoint, while importing data from Excel or Project.

“We have Microsoft users covered, but what about those who use the Web version of Office Timeline and work with Google Workspace?

Project goal

Provide Google users with a simple and effective way to add timelines directly into Google Slides, Docs, or Sheets using an add-on available on the Google Workspace Marketplace. This add-on should enable users to connect their existing Office Timeline accounts and easily insert their timelines into their documents with just a few clicks.

Project overview

Team & my role

The implementation team that worked on this project included developers and testers, who work in the Agile methodology, along with a Scrum master and a product owner. Throughout the implementation, Marketing and Sales departments were also involved as key stakeholders.

As the UX Designer on the project, I was owner on the following main tasks:

  • Process mapping & documentation

  • Secondary research (desk research on Google workspace environment and market opportunities for growth)

  • Primary research (user interviews with Google & OTL users) & persona development

  • Wireframing, prototyping & usability testing

  • Final design proposal & assistance during implementation

  • Analytics review & optimization

User goals

  1. Create timelines from Google Slides

  2. Insert already created timelines in Office Timeline within Google Slides, Docs or Sheets

  3. Edit timelines in Office Timeline and update them in Google environment

  4. Present project timeline directly in Google apps.

Project timeline

UXR & Design tasks

Research included exploring market landscape, user needs, Google Add-ons documentation and analyzing user goals in reference to business goals. I focused on the following specific tasks:

  • Explore Google vs. Microsoft market reach and create personas for both types of user/target audience

  • Identify and explore competitor add-ons: Vizzlo, Lucidchart, Gantt Chart by GANTTOphant

  • Investigate user needs through Appzi data analysis of feedback & VOC

  • Study Google documentation for add-ons: types of add-ons, development options and implications

  • Study Google add-ons Style guide, Figma library and creating a visual identity

  • Map the service of delivering an add-on in Google Workspace

Business goals

  1. Increase revenue by attracting a new user segment - users who primarily work within the Google environment (small & medium size companies)

  2. Increase retention of non-Microsoft PowerPoint users who use Google apps

  3. Streamline “embed” process of timelines in Google apps.

Research results

Market landscape

VoC (Appzi)

*Ranking from 1 - most important to 5 - least important

Google vs. Microsoft User Personas

Design deliverables

Process blueprint

The process blueprint helped us align on the project phases required to launch the Google Add-on. I based this blueprint on Google documentation, technical requirements and validations needed from key stakeholders. It was an entirely new process for the team and it required a unique approach of exploration, from both design and development teams.

Main user flows

The primary user flows included the following nodes that correspond to the main touchpoints of interaction:

  • User has/doesn’t have an Office Timeline account

  • User has/doesn’t have the add-on installed

Design iterations

The initial design iterations focused on wireframes for the add-on itself, as well as figure out what we would need on OTO’s (Office Timeline Online - Web version) side to make the experience as seamless as possible.

Initial add-on iterations

Initial OTO iterations

Final submission to Google Workspace Marketplace

Aligning interface with G Suite Add-on Guidelines & UI Design Kit

Iterations on hierarchy & value proposition

The homepage for the add-on went through a few iterations in terms of hierarchy of actions and also copy. I wanted to make sure that Office Timeline users have a clear, accessible way to connect their account, but also appeal to new users who haven’t interacted with the product before. We decided to also simplify the copy in order to reduce cognitive load and have an easy to reach starting point for new users.

How we made it easier for users to browse all their files

Since users can have hundreds of created timelines, we didn’t want to make users scroll in a limited space side-panel, so we decided to limit the number of visible timelines to the most recently used ones. However, due to technical limitations, users when browsing all their timelines would have had to log in once in the add-on and, then, log in again the web version of Office Timeline. The solutions was to create an easily accessible page created specifically for viewing and searching the entire list of created files. The UI for this page was a copy of user’s own created and managed list of timelines available in user’s OTO workspace.

Scenarios covered through replica page (with empty, error states)

Impact