I added a search component that would return results based on the entered keywords. The important aspect to note here is that the search returns results on any topic entered and is not limited to searching the specific page the user is on.

Users are able to launch into a page tour of their current page by selecting the “Show me around” option.

Based on early usability testing on Fleet 3.0 pages and frequently asked questions from VisionLink Unified Fleet, we were able to come up with questions and answers to provide for users. We also included links to our main help center articles for users to learn more about the particular subject.

From here a user can launch right into the main help center to access articles, tutorials, additional frequently asked questions, and more.

Easy access for users to contact Cat Support by creating a ticket.

I wanted to kick off the experience with a short welcome video that had the option to be skipped. Through this process I learned that it was always important to make the user feel like they were in control. Allowing users to skip through this process was a must. 

From there we launch into the application and ask the user if they’d like to take a tour of the application. Again, providing them with a choice to continue or skip. 

After that, the tour begins with an overview of both navigations that are consistent throughout the application. This is important as they both have different functions and are key to moving around the application. One thing I thought about was if it was crucial to highlight both navigation bars or do we let the user “discover” at least one of them on their own. Because I knew that one of the navigation bars was going to include multiple callouts which would equal multiple clicks for the user, I decided to cover the side navigation bar in just one step. 

From there, the user moves onto the top navigation bar where they are met with interactive tooltips that use motion to show how each component behaves. Motion was important here as I realized we as a company had a huge opportunity to gain trust with our users. By showing the user what would happen when they interacted with parts of the application, we are giving them a preview of what to expect. Realizing that fear of a new UI and frustration could kick in at any moment, by providing examples of what to expect, we lower the risk of potential opposition to the application. 

The last step in the tour was the help icon. This is where we let users know where they can go for help and invite them to tour their current page. Allowing the last step in the process to be “Help” reassures users that we are not leaving them cold in a new experience. This was important to call out to reduce friction and again lower the risk of potential opposition to the application.

To date, the designs have already been used by other teams as they begin to adapt WalkMe for their platforms. This has allowed me to make revisions and additions to the components in order for them to work for multiple use cases. I’ve also collaborated with other designers from these teams and we’ve been able to collectively come up with new styles and variations of components. Using Figma to house the design documentation has been easy for viewers and designers.

Another aspect that has been interesting to be a part of is how teams take the designs and implement them back into WalkMe. This has given me the opportunity to provide feedback on how to get the CSS in WalkMe to look exactly like what I’ve created in the design system. It also showed me where possible technical limitations have presented themselves and I’ve been able to take that feedback back to my team.

The design system is broken down into three parts: “Documentation”, “UI Elements”, and “Outstanding”. In “Documentation” I’ve compiled many of the component asks from the initial product team who set out to use WalkMe first. This served as a starting point for me as I used it to compile a list of components that needed to be designed. It also includes notes that were put together by the initial product team around best practices when designing these elements.

All components will fall under “UI Elements”. This is where anyone can find everything from color hex codes, to rules around how components should be styled. Everything is clear and concise so there’s little room for interpretation. Viewers and designers can find mobile and desktop versions of these designs. Again due to this document living in our Figma design tool, designers are encouraged to contribute to this document by creating designs for their own use cases or collaborating with me on alternative versions to what already exists. Viewers are also encouraged to contribute by leaving comments, questions, and design requests.

Lastly, I always want to keep a log of what has yet to be designed. These are usually requests that I’ve received from teams and I’m storing them separately until I come back to them. Once a request is received, I take the notes from the requestor along with any visuals they’ve provided and make notes for myself to help me when I circle back to it.

The biggest learning curve throughout this process was learning what WalkMe features were available and aligning my design with those features. This required learning the tool itself and getting familiar with their offerings. As I am used to designing freely with very few limitations, this was an adjustment as I had to ensure before I began any work that WalkMe could support my designs.