Table of Contents
join.me in an online meeting tool that allows users to connect instantly and provides simple features that help them run effective meetings. I began my career at LogMeIn working on the join.me product, specifically with a team tasked with finding innovative ways to grow our user base. While working on this product I designed a number of features, integrations, and tools, and supported other product teams with the complete rebrand.
I joined LogMeIn in the summer of 2015 and was placed on a newly formed team of developers known as the "growth" team. I was the only designer on the team, supporting roughly 10 engineers and 2 product managers.
Our overarching goal was similar to that of a growth hacker: design and build experiments that would help us sustain the exponential growth join.me experienced in its first few years.
The work we did revolved primarily around new acquisition channels and integrations, but also experiments that would improve our retention and reduce churn. This gave me an opportunity to design unique experiences on the fringe of our product as well as features and enhancements for existing user flows. While challenging, this was some of the most interesting and rewarding work I've done at LogMeIn.
As I grew more familiar with the join.me ecosystem, and as the needs of other teams shifted, I was frequently asked to step beyond my team's responsibilities and design core product features or help with long term initiatives. By the time I moved from join.me to a new product 2 years later, I had contributed to almost every app and interface to some extent.
Given the amount of work I contributed to join.me and the wide range of projects I worked on, this case study won't be a linear story about processes and challenges. Instead, I've picked some of my favorite projects and will give a brief overview of each, along with its related design deliverables.
If you're looking for a more traditional style case study that discusses the full design process, Prompt AI and Seeit are good examples.
One of the first projects I worked on for join.me was the creation of an admin console.
Before this project, customers managed their join.me users in a separate LogMeIn tool called AppGuru. AppGuru was built as a standalone product offering that allowed admin to manage users of any software, complete with license provisioning, roles, permissions, devices, and customizable user attributes. While it was powerful, the product never really gained traction and, eventually, became an add-on for enterprise customers that needed the user management other LogMeIn tools didn't provide.
When I began working on the new join.me admin console, I was given a document of customer feedback collected by support. My project manager and I then reached out to select customers, especially those who frequently reported problems, and talked to them about their experiences. Once we had a baseline understanding of the critical issues and required functionality, we set out to build something better.
Preliminary wireframes and mockups of the user management portal.
A critical issue we were solving for with our new Admin Console was the sheer complexity of the AppGuru interface. Admin frequently had to contact support for assistance and, in a few cases, even managed to accidentally delete all of their users.
We also knew that there were a handful of common tasks (adding/removing users, provisioning licenses, and assigning permissions) that admins did on a regular basis. This was in contrast to other critical, but infrequently used tasks like setting up groups, importing information, or running reports. Given this knowledge, we tried to make the most commonly used features the most easily accessible and hid many of the less commonly used features on secondary screens.
Common tasks like bulk editing users got priority over less common tasks like creating permission groups.
After a few months of design and development, we launched the new user management portal to our customers and, over the next 6 months, our support calls dropped from ~80 hours per month to less than 10. Here's are some screens from the final product:
Within my first year working at LogMeIn, the product teams decided that we should update the join.me brand.
Our new logo included bolder colors, simpler shapes, and a modern font.
At the time, join.me consisted of roughly 7 separate apps/interfaces (2 desktop apps, 3 mobile apps, a web app, and the admin console), plus a few integrations and add-ons. Beyond the product itself, there was our marketing site, support docs, ad-specific landing pages, and sales collateral that would need to be updated. Needless to say, this would be a massive undertaking.
Given the scope of the design work involved, I was asked to assist on building a design system for product interfaces in Sketch, with the relevant CSS for each element, as a starting point for the app teams.
The process of designing, building, and spec-ing out each component is beyond the scope of this page but after a few weeks of work we ended up with styleguide that looked like this:
Select elements and components included in our new join.me design system.
While the visual representation of the design system was helpful for all teams, there were also individual deliverables for specific groups.
For the product design groups, we built a shared Sketch library to increase screen design efficiency and ensure consistency across the interfaces. For the engineers we provided fully spec-ed mockups as well as Zeplin files to use as reference. And for marketing teams, we created brand guidelines for relevant features (forms, logos, colors, etc...) as well as a collection of rebranded screen mockups for use on the website or in collateral.
Once our design system was complete, I was asked to help with the rebranding of our in-product messages. These messages came in the form of cards, shown before or after a user's meeting, usually to promote feature activation or upsell opportunities. This seemed like a perfect opportunity to test the Sketch library.
Rebranded in-product messages built with our Sketch library.
The Sketch library worked well for a limited test like rebranding the in-product messages; it only took a few hours to come up with dozens of variations of each card. From here I continued to improve and maintain the library, as well as supported the rebranding teams as necessary.
Although my role in the rebranding effort was somewhat limited, seeing the vast implications of rebranding a product with millions of users was eye-opening. During the process I also learned a lot about design systems, the benefits they can provide if implemented correctly, and how to build them.
After the rebranding process, there was one part of join.me that remained completely unchanged: the logged-in web app.
This is the first interface a new user sees after signing up for a trial on desktop, so it's important to make a good impression here. Unfortunately, due to technical constraints and team resources, this entire portion of join.me was not slated for a rebranding at all.
I regularly modify the CSS on websites using Google Chrome's Dev Tools. Usually I'm simply tinkering to understand how effects work but occasionally I also use this to remove ads or to change fonts, colors, or layouts. To save these changes, I use an extension called Stylus which injects my custom style sheet after the page has loaded, to overwrite specified CSS attributes. Given this experience, I wanted to see how far I could rebrand the logged-in web app using only CSS changes.
Here are a few screenshots that show the existing logged-in web interface:
The existing styles didn't match the new website, desktop apps, or mobile apps.
Notice the system font (Tahoma) used almost everywhere, skeuomorphic buttons, default form elements, and inconsistent colors. This interface hadn't been maintained or changed much since join.me's beginning so, not only was the visual style dated but the HTML structure was a nightmare (absolutely positioned tables everywhere).
By only making CSS changes, I managed to update the interface to look like this:
After an afternoon of tweaking CSS, the interface is much closer to the new brand.
It's worth noting that this was not an official project; it was an experiment I created for myself to see how far I could push a design by only modifying CSS. I figured, since the primary reason for not updating the logged-in web app interface was a lack of engineering resources, my stylistic changes could be applied with virtually no development cost.
Of course, I know this is not a sustainable way to redesign an interface but, weighed against the option of no redesign at all and the already hacky CSS system in place, it seemed like a viable quick fix solution.
By the end of the experiment, the entire interface had been updated (some places more than others) including temporary screens like the onboarding flow, and secondary screens like the billing and reports tabs.
A few other rebranded screens from the trial onboarding flow, reports, and billing.
Unfortunately, these designs were never implemented. Instead, some functionality was moved out the the web app and pushed to the admin console while other screens were gated and redirected to entirely new pages. In the end, months after our redesign project officially ended, the only page that remained and got a redesign was the home page. Some of the outdated pages remain in the app to this day.
Even though this experiment didn't impact the final product, it taught me a lot about CSS. I now have a much better understanding of the cascading and specificity aspects of style sheets, general CSS attributes, and the limitations of designing without access to HTML, JavaScript, or functional code.
A key goal of the growth team was finding ways to increase the 'stickiness' of join.me. One way we accomplished this was exploring ways join.me could augment the tools and workflows of new and existing customers.
When I started on join.me there was an existing Chrome extension but, due to very limited functionality and tons of technical issues, it only had few thousand users and a 2 star rating. Since Google Calendar was so widespread among our user base, we decided that overhauling the Chrome extension might really help retention.
We began by looking at the user feedback captured in the Chrome Web Store:
A few reviews from the beginning of the extension overhaul project.
From the user reviews, we compiled a list of major and minor issues, enhancements, and feature requests. This allowed us to prioritize the work needed and create a release timeline.
Major issues like the constant login popup (about 20% of the negative feedback was about this), with technical fixes and low design cost, were tackled first.
A revised user auth workflow to solve our most commonly reported issue.
Once the extension was stable and the technical issues were addressed, we began working on enhancements and new features.
The second biggest area for improvement, according to our users, was to match the core functionality of the join.me app (start, join, and schedule meetings). While scheduling meetings was more complex than possible in the Chrome extension at the time, we decided to include a meeting viewer so that all of a user's scheduled meetings would be available at a glance.
We also restyled the extension to match the recent rebranding efforts. Here's what the new Chrome extension looked like after our revamp:
Our redesigned Chrome extension included new features as ranked by user feedback.
After the new extension was released we expected to see an increase of installs and better reviews on the Chrome Web Store, but it wasn't as impactful as we'd hoped. Part of the problem, we figured, was that the existing rating and reviews deterred new users from installing the extension. We decided to tackle this issue on 2 fronts.
First, we assigned a product owner to the extension and, as part of the role, responded to all recent and new feedback on the Chrome Web Store. Next, we implemented a feedback mechanism designed to boost our rating.
The general idea behind boosting our rating was, after every few meetings we'd prompt the user for feedback. If the feedback was positive, we asked them to leave a review on the Chrome Web Store. If the feedback was negative, we provided a form to submit feedback to the development team.
This way we could capture all of the relevant bug reports and feature requests without having those review negatively impact our public rating.
Our in-product feedback mechanism sent positive reviewers to the web store and negative feedback to our internal product teams.
This change, of course, didn't completely eliminate the negative reviews we received but it gave us an open channel to unhappy customers and encouraged happy users to leave positive reviews. Over the next 6 months, we steadily increased our rating in the Chrome Web Store and, as our overall rating increased so did our downloads.
Another experiment we conducted in the Chrome extension was converting existing meetings to join.me meetings. This new feature allowed users to add join.me voice and screensharing capabilities to any meeting in a user's Google calendar from the extension interface, and alert any meeting attendees to the change.
This was both an acquisition and retention experiment. On one hand this gave avid join.me users additional capabilities in their meetings, but this also allowed new users to easily add the same functionality to existing meetings.
Also, by building this feature into the Chrome extension, users could decide minutes before their meeting whether or not they'd need join.me functionality. This ended up being a huge differentiator for the join.me extension, compared to other online meeting tools.
Users could add join.me functionality to existing Google Calendar meetings on the fly.
With all the work on the extension was complete, the growth team moved on to new challenges. Overall the project was a success and, even though only a small portion of join.me customers currently use it, for those users it adds significant value to the product. As a result of our work, the extension currently has 4 stars and over 60k happy users. If you use join.me and Google Calendar, feel free to give it a try.
One major feature in join.me is that paid users can create a custom URL (eg: join.me/tim.hicks vs join.me/314159265) to host their meetings.
When someone navigates to a custom URL in the browser, they're directed to a page that lets them join the meeting (if there's an active meeting) or displays a "waiting for presenter" screen (if there's no active meeting).
This was core functionality and hadn't been changed from the first release of join.me.
Looking at user data, we realized there were tons of instances where users remained on the 'waiting for presenter' screen for minutes before the meeting began. We saw this as an opportunity to create value for our users.
One way we wanted to enhance the waiting experience was to let users customize what their meeting participants saw. The current waiting screen simply displayed a user's name and the waiting message but, since users can provide profile details in the app, we were also able to display that information. This was valuable for join.me customers because they could reveal their company, role, and personal bio, and also for waiting attendees because it reassured them that they were at the correct URL.
Waiting and active designs for the enhanced personal URL page.
One issue with the waiting state of this page was that the attendee had no way of informing the presenter that they were there without switching to another communication channel, like chat or email. We decided to solve that problem with a new feature we called Join Me Now.
Join Me Now would allow an attendee on the waiting page to send a notification to the presenter. This solution had the added bonus of allowing attendees to request fully ad-hoc meetings from the presenter's custom URL page.
Join Me Now allowed attendees to notify presenters from their custom URL page.
With the attendee experience figured out, the remaining design work revolved around settings, permissions, and notifications. In order to send a desktop notification, the join.me app needed to be running, so we created in-product messaging and notifications to alert the user that the app was still open in the background. (We would later add this functionality to the Chrome extension, allowing notifications if the app or Google Chrome was running.) Finally, we created the actual notifications that the presenter would see.
Product messages, settings, and notifications for the custom URL owner.
Join Me Now was successfully launched and continues to exist in the join.me product. By learning from our user data, we were able to solve a common problem and create a valuable new feature on a previously overlooked part of the interface.
During my time working on join.me, the growth team built about 10 integrations for various products, as well as an API so other developers could add to the ecosystem. Our hope was, that by embedding join.me into other tools, the product would be more useful and user retention would increase.
Here's a brief overview of a few integrations I worked on:
As soon as we rolled out Slack within LogMeIn, we knew we were going to build an integration for it.
Our goal with this integration was to allow users to instantly start a meeting by typing /joinme, and post the details to the channel for others to join.
It was simple and effective.
The join.me Slack integration was one of the first we built.
The Slack integration was unique in its authorization flow. For technical reasons, we had to also create an integration specific landing page and help site.
The original header on this page was 'Presto Simplistico!' but my devs informed me that it was gibberish. Personally, I think it was the highlight of my copy writing career.
The join.me for Trello integration allowed users to create and join meetings directly from the Trello board interface. This was another simple integration with minimal design work involved, and was fully implemented over the course of a week.
About 30% of the join.me user based was enterprise level subscriptions and, of those customers, many also used G Suite (formally Google Apps for Work) to manage products and licenses. Because of this, we frequently got customer requests for a dedicated G Suite integration.
When we eventually decided to build the integration, one of the first major design decisions was to visually match Google Material Design system instead of using our own native style. Since users would need to access the join.me app through their G Suite interface, we wanted the transition to feel natural and stylistically similar.
We also knew that, due to Google's dominance in the market, this integration would be an opportunity to attract new customers. For that reason, we began designing the interface with an quick onboarding guide that helped new users set up their accounts and customize the core features. We used 'cards' from the Material Design library for this.
Onboarding cards helped new users set up their custom URL and background.
The other significant part of the G Suite integration was the logged-in user interface. This was designed to match join.me's core start and join functionality, as well as the scheduling and Google Calendar features from our Chrome extension. Also, knowing this was an acquisition channel for new customers, we included a trial flow and upgrade prompts where necessary.
The main join.me G Suite interface, following Material Design standards.
While I contributed to other integrations (HipChat, Zapier, IFTTT, SalesForce, and Outlook), many of them had very little customer-facing visual design. On these projects, I acted mainly in a supporting role to the engineers, answering questions about flows and overseeing minor UX decisions. I was also responsible for creating any assets, both to use in the integration or to publish to their respective app stores.
Overall, the work we did on integrations for join.me gave me a lot of insight into building for external products and demonstrated the value a product can provide by working alongside our users' existing systems.
I'm currently in the process of building case studies, especially around the work I did for join.me, so this page is very much a work in progress. If you'd like to talk in-depth about any project you've seen here, shoot me a message and I'd be happy to chat.
Thanks for reading!
