Hackathon to Improve Nylas Dashboard Usability

Making the Nylas dashboard more intelligent, powerful, and accessible.

Arjun Kalburgi | May 26, 2021

At the Front-end, UX, and Developer Experience team at Nylas, we work to improve the usability of the Nylas dashboard and other top-of-the-stack Nylas products like Components. Over the last couple of weeks, we hosted a team Hackathon to work on whatever we’d like with the caveat to improve UX. Here’s what we did:

Want a PDF of this article?

Share it with a friend or save it for later reading.

Command Palette

Being a developer at a company that makes products for other developers means that you get the opportunity to “beta test” the tools that you would ordinarily be using as a consumer. Spending most of our time in code editors means we’re comfortable with keyboard shortcuts and command bars, so we wanted to bring that experience to the Nylas Dashboard for our customers as well. 

You can launch it with ⌘+K, or by clicking Search in the navigation. We made it smart — it knows which page you’re on, and suggests contextual actions. We made it adaptive, too — different people refer to things in different ways, so “user”, “account”, and “teammate” will all lead you to the same place. Finally, it suggests helpful keyboard shortcuts (like g -> l  to take you to the logs page) so you can complete your tasks as effortlessly as you’d like.

Quickshare Components

Nylas Components are intuitive and common UIs that you can drop into your existing app to get functionality like a Daily Agenda, or a Contact List, with very little implementation time. But what if we wanted to reduce that implementation time to literally zero?

We gave all components an option to be quick-shared: they receive a public URL which you can use to share with your peers and colleagues and they’ll get the same contacts or events that you would have shared in your app, but at no app creation cost to you.

The shared component can be edited and dynamically updated, and the public URL will update in turn — if you change the theme of your Nylas Agenda component, the public URL will automatically update without you having to do a thing.

New Nav

The dashboard’s main side nav needed an accessibility update, and alongside it, we updated its design and made it collapsible. These updates will improve the Nylas dashboard experience for users of assistive technology and power users alike.

The updated design improves user experience with larger click areas for each link, consistent icon style, and improved section separators. When collapsed, the nav takes up 73% less horizontal space, making it easier for power users to scan the wide DataTables on our Logs pages. 

For accessibility, we moved away from using <aside> in favor of <nav>, updated the sidebar organization using <section>s, and added aria-labels for the links to give more context for each option. Turn on your screen reader and tell us what you think!

Mobile DataTable

As most of our users are developers working from their computers, the dashboard’s desktop experience has been our primary focus. That being said, improving our mobile experience for browsing and exploring use-cases can go a long way. Therefore, we focused on revamping the mobile experience to simplify its layout and make it more accessible while keeping the functionality on par with desktop.

The revamped mobile design uses a list style rather than the table style, as seen in the desktop. Each list item has the same information as the desktop but is presented in a condensed way to prioritize browsing. We want our mobile users to be able to check if data exists more than check what the data is. The mobile experience also supports multi-select and includes an explicit link to view details.
To keep the mobile experience accessible for screen reader users, the desktop table is swapped out for an unordered list (<ul>). This does mean that there is some duplicate code in the DataTable component, but there are plans to refactor the Component to use named slots to help keep a more structured and DRY implementation.

Nylas CLI

Nylas’ has always focused on empowering our customers to easily be able to use our platform to build great products. That means the developer experience, from creating a new component, to building a new product with our APIS, is important for us at Nylas.
That’s why we’re excited to announce the alpha launch of our new Nylas CLI.Developers can quickly access our APIs from their terminals. With commands for most of our APIs, you can view, create and modify your entire email communication stack with a few simple commands.
Things we learned:

  • Team used this project to learn Golang.
  • We used Lambdas to create a light-weight solution for local web hook development.

Quickly authenticate an email account from your terminal:

Improving Developer Experience

Hackathons at Nylas give us the opportunity to unleash our creativity and find new ways to make our products more intelligent, powerful, and accessible. We know how much developers care about the products they build and our focus is improving the developer experience, regardless of how you access Nylas. We continually strive to update our products, and with regularly scheduled Hackathons, the sky’s the limit to our creativity. Take a look at the enhancements in the dashboard, and let us know what you think!

Speak to a platform specialist to learn more and sign up for a test account.

Arjun Kalburgi

Arjun is a Software Engineer on the Front-end team at Nylas. He loves working on UX, bringing Nylas' premium brand to life, and his house plants.