Client: Nylas
Designers: Diego Bustamante
Development: John Jung, Dan Radenkovic
Nylas Components are prebuilt UI elements you drop into any application. Create an easy-to-use, beautiful UX with just a few lines of code.
Nylas Components is a library of front-end JavaScript solutions that empower you to launch end-to-end productivity features fast.
Depending on the application’s complexity, apps can take anywhere between three and nine months to develop. Designing and building a front-end experience requires a significant amount of development work, feedback, and testing and can account for up to three months of development time. Speed to market is crucial in success, and you don’t want to risk delays due to reworking less than optimal UX. Not only does bad UX slow down your success, but it also can drive customers away. Studies show that 88% of users are less likely to return after a bad user experience, and acquiring a new customer can be 5x as expensive as retaining an existing one.
We first analyzed the different parts and items needed for each component laying down the basic structure for each of them. At the same time, we did full research on how other components were made and how they functioned.
The next step was iterating on the structure until we could simplify it until only the essentials were there.
Once the final structure was achieved for each component we created the basic Nylas theme and iterated on several themes to make sure it was fully white labeled, collaborating with the development team and creating the basic default teams that will go out at launch.
It was key that when designing the components we followed the Web Content Accessibility Guidelines (WCAG). Since the components are completely white-labeled and can be fully customizable we offered 5 AAA-compliant themes that will be fully accessible and users could apply instantly for people with disabilities.
Another challenge was making sure that components could work across devices and different resolutions, that's why we tested and designed them simultaneously on two different screens and mirrored the designs in smaller devices to compare how they will look on a tablet and mobile device.
To utilize the components you have to register for a Nylas, you can do so at dashboard.nylas.com. Once there, head to the Components tab and create a new Agenda component.
You'll be guided through the component setup and be given the option to tie your component to your calendar account. Review the Agenda Documentation.
During the setup process, you'll be prompted to provide a list of allowed domains.
Nylas Components can be used as a UI on top of any data that you provide. The data should follow the Nylas object standard.
More than 1000+ Companies are currently utilizing components by Nylas.
With as little as five lines of code, you can position your application as your customers’ core productivity hub with ready-made UX/UI. You no longer need to divert resources to build, maintain, and test front-end solutions and can free up engineering time to focus on other important business initiatives. In addition to saving months of work, incorporating pre-built UX/UI features reduces customer churn risk. Built and maintained by a team of Nylas engineers, Components seamlessly delivers modern UX features and functionality that drive customer loyalty and retention.
Nylas Components enable you to quickly implement user experiences that leverage the Nylas suite of APIs to support common use cases like viewing calendars, sending emails, or managing a user’s contacts book, eliminating the need to design user interfaces from scratch.
