Onboarding is an extremely important part of our process at The Beaverhead - we always make sure that the client is 100% comfortable with the new software and able to use all of its features and benefits. That’s why we are excited to introduce Spotlight, a new tool that will make it much easier to find your way around your new solution.

Introducing Spotlight

Spotlight is a component that highlights a part of the website by dimming the rest of the page. Its purpose is to aid the onboarding process by showing the user where an item is on the platform. While the user goes through settings and design options, hovering the mouse over a button dims the rest of the website and guides him or her to the part that is about to be manipulated.

[] (http://www.youtube.com/watch?v=7Mvq_nuPpB4)

With Spotlight, our users can easily see what every particular design option does without needing to contact support. It will make it easier to use the software and save time from training and guesswork.

To build this feature, we used an Open Source component - React Spotlight. This component implements the highlight function on a particular area of the website. Our developers then set up the x and y coordinates to tell the component where to go when triggered. This was the most challenging part of building this tool, as it involves a lot of patience and attention to detail. It is especially difficult with dynamic interfaces, where elements may be repositioned over time. Our developers also had to work out how to handle elements that are hidden, such as drop-down menus.

Until now, there was no interactive help provided for the user to understand design options and functions. Our product where we’ve used this function for the first time - https://ccb.events - is mainly used by non-technical users, who had to rely on the online chat to ask what different options mean. A stressful and time-consuming process has now been improved immensely thanks to Spotlight.

So how did we do it?

We approached the problem by splitting it into smaller tasks:

1. First, we looked into whether Spotlight would be the right fit for our project, in terms of the complexity of development and whether it's possible to add Spotlight on complex UX elements like drop-downs.
2. Then we made sure to select the right component. There are many Open Source Spotlight packages out there, so we trialed and tested a few to find the one that fit our needs best.
3. A proof of concept was then created. This was a very important step as the decision whether it was a "go" would have an impact on the next stages of the development.
4. Next, we got to reorganising the current implementation of the design options. We unified the options that were subject to Spotlight. This way we saved time when adding spotlight to the next design options.
5. Finally, we implemented Spotlight for each design option. There were 80 options in this product, most of them changing different areas of a calendar with a different position on the screen. The implementation was about writing code that scrolls the page for the user to the visible element, does the required action, such as clicking on the particular UI to expand the hidden content, and finally determines its coordinates.

This feature is a part of a wider revamp of our products’ design options. We've renamed them, regrouped them, introduced Spotlight, and now we are working on adding a short tooltip with information and a link to a help page with more detailed descriptions of the options.

We will continue finding more ways to make the onboarding process easier for our users, saving you time and money, but more importantly - ensuring you get the most value out of your new, bespoke software.

Would your business benefit from custom-built software that does exactly what you need it to? Drop us a line here and we can discuss your options!