LucidChart’s Tutorials are Unorganized-Can they be Better?
UX Writing & Design
Role
UX designer
What I did
Contextual inquiry, UI design, UX design, UX writing
Result
LucidHelper prototype
The Collaborative Software Market
Lucid Software is a giant in the collaborative software market but faces steady competition on all sides. Miro continues to race Lucid with whiteboarding software listing 60 million users to Lucid Software’s 70 million (Lucid Software, 2023; Miro). And, countless companies offer similar products; constantly pushing the company to improve its products. If Lucid fails to do so, it will fall behind. So, how can the company keep up?
Ease-of-use tends to be a consistent standard metric in comparisons between the two companies (Software Advisor). Without an intuitive and easy-to-use interface, Lucid Software cannot stay relevant. And, what do you need to ensure your software is easy-to-use? Excellent how-to guides. While we as UX designers would love to design a world where how-to guides are unnecessary, we must acknowledge that often how-to guides are needed.
Figure 1. Software Advice Rating Breakdown
Lucid Software's Tutorials
Currently, Lucid Software’s tutorials are not organized very effectively. Some tutorials are on Lucid Software’s main site and others are on the blog. Additionally, many discrepancies exist between tutorials. Some describe why you should make a certain chart, and others how to make them, with little differentiation in how they are presented to users. This leads to an unorganized and decentralized design that could leave users unsure of where to find help.
Figure 2. Lucid Software Tutorials
Contextual Inquiry- Where are Lucid’s Tutorials Lacking?
To specifically understand where Lucid’s tutorials are lacking, I brought in a new user and tasked them with accomplishing a tutorial on Lucid using any resources possible. Watching them create an Org Chart with the help of Lucid’s tutorials revealed a gap between the user’s wants and the actual tutorial.
Show Don't Tell
In my case, the user opened a template from Lucid. While the template was helpful, it didn’t show so much as it told. I.e., it gave simple written explanations and images rather than showing the process. The user specifically expressed a want to see and then do, “I want to see it shown to me rather than read it.”
Figure 3. Lucid Org Chart Template
“I want to see it shown to me rather than read it.”
LucidHelper
Seeing the need for shown–rather than told–instructions, I wondered if tutorials could act like collaborative documents. Instructors could act like collaborators in the document, showing how tasks are accomplished and giving space for the user to do the same.
After brainstorming several solutions, I landed on the idea of LucidHelper: an in-app collaborator who guides users through tutorials in real time.
Figure 4. LucidHelper Tutorial Welcome Screen
Lucidhelper demonstrates every step of the tutorial for the user before waiting for the user to accomplish the step themselves. This new tutorial flow allows users to establish an expectation for tutorials, and give instruction in familiar modes of apprenticeship. Lucidhelper is based on ideas of “Show, Don’t Tell” visual instruction, user freedom of choice in instruction, signposting for user orientation, branding matching to Lucid’s essence, and figure-ground to direct user attention.
Show, Don't Tell
Lucidhelper is based on “show, don’t tell” and scaffolded learning. Through LucidHelper, Users see an immediate example of what they need to do. Rather than bouncing back and forth between a tutorial screen and the app, users can learn about Lucid right in their documents.
Figure 5. LucidHelper Showing Rather Than Telling
This show-rather-than-tell instruction is correlated to the contextual inquiry phase, where I learned that users may want to see things done first for them. LucidHelper directly addresses this by accomplishing the tutorial in front of the user.
User Freedom
Users launch into Lucidhelper from Lucid’s help center. Within the flow, users have the option to:
-
Close at any time
-
Save the document they created with Lucidhelper
-
View a video preview of a Lucidhelper tutorial
-
Read a written version of the tutorial
Figure 6. LucidHelper User Flow
This flow achieves user control by allowing users to leave at any time, user freedom by giving users the choice to save the document, and flexibility of use by providing different mediums. Each of these being design heuristics from Jakob Nielsen’s 10 Usability Huestics (Nielsen, 2024).
These attributes ensure that if users feel they have learned enough from the tutorial, they may leave behind the scaffolding at any time.
Signposting & Taxonomy
At the start of the tutorial, users are given a brief overview of what they will accomplish within the tutorial.
Figure 7. LucidHelper Overview Message
This allows users browsing tutorials to quickly ascertain if they are in the right spot, and adheres to the principles of signposting and taxonomy.
Signposting:
A writing practice to indicate progress. Happens internally or externally. Internal signposting communicates progress with words such as: first, next, and then. External progress is communicated with an overview of concepts to be covered.
Taxonomy:
Labels the content of a document with titles and headings. Can then be used in conjunction with signposting to form a mental map of concepts to be covered.
Color
Colors remain consistent with Lucid software’s branding and design. This maintains system consistency and improves user understanding through pre-established heuristics (blue means button).
Figure 8. LucidChart Color Pallette
Lucidhelper uses the same color palette as Lucidchart, including orange elements for branding and blue elements for clickability. This helps differentiate the document and the tutorial items. For example, because LucidHelper’s messages are orange, the user will think, “Oh, these messages are directly from Lucid software as a brand, and they are different from the document actions.” The same thing applies to the design elements that Lucidhelper creates themselves.
Voice, personality, and logo
Lucidhelper’s voice and personality are that of a friend or coworker, maintaining friendliness while communicating intelligence. The logo perpetuates this and hints at the brand's logo with warm colors and curved lines meeting angles.
Figure 9. LucidHelper Logo
Lucid’s branding guidelines define the brand as smart, lively, and approachable (Lucid Software, n.d.). By acting as a coworker, Lucidhelper maintains the brand’s essence. According to color theory, orange is often perceived as energetic, uplifting, and happy–similar emotions to the brand’s essence(Cherry & Lustic, 2023). So orange is used in the logo. Additionally, Lucid’s logo includes sharp lines and contrast, Lucidhelper matches these sharp lines with curved lines of its own, perpetuating the brand but also carving out an identity of friendliness within it.
Figure-ground and Closure
Lucidhelper’s chatbox and cursor are highlighted from the rest of the document through blurred backgrounds and high-contrast colors. This creates a highlighting effect and communicates to the user that the Lucidhelper items are to be focused on.
Figure 10. LucidHelper Figure Ground and Closure
Lucid needs to maintain visual simplicity to achieve its goal of an excellent product. By highlighting items to focus on and creating a visual connection, Lucidhelper improves the usability of the interface without overcomplicating it.
Key Metrics & Success
Given limited resources, it is difficult to discover the efficacy of my design choices. Regardless, if I was a UX designer for Lucid, I would do the following.
Wizard of Oz Testing
Given the high complexity and cost it would take to develop LucidHelper, I would start by creating a simple Wizard of Oz testing model–a simple program that looks developed but is actually controlled behind the scenes by the testing team. In this case, someone would be actively collaborating with the test participants as a simulated LucidHelper.
​Likert Surveys
It is valuable to measure users’ confidence using LucidChart before and after interacting with LucidHelper. I would design a study with two groups of participants. One group would be told to make an org chart using Lucid’s current tutorial, and another would use LucidHelper. After accomplishing the task, participants would answer survey questions on a Likert scale measuring their understanding of the task, confidence with LucidChart, and overall enjoyment.
Figure 11. Pre and Post Surveys
Comparing the two groups of people, especially measuring the change in their confidence with LucidChart before and after the activity would be revealing. If there is a marked improvement in confidence when using LucidHelper in comparison to Lucid's current tutorials, then we would have the confirmation to move forward with development.
Wrap-up
By using “Show, Don’t Tell”, user freedom, signposting, branding matching, and figure-ground., Lucidhelper enhances Lucid’s usability goals and improves the user experience. Ensuring Lucid Software can outpace the competition.
What would I do differently next time?
In this project, I did not have the time to do nearly as much user testing as I would have liked. In future projects, bringing in users sooner and more often would be advantageous.
Works Cited
Nielsen, J. (2024, February 20). 10 usability heuristics for user interface design. Nielsen Norman Group. https://www.nngroup.com/articles/ten-usability-heuristics/
Pope, A. R. (2018). Open technical writing: An open-access text for instruction in technical and professional writing \. Open Textbook Library.
Lucid Software. (n.d.). Brand guidance. Lucid. https://lucid.co/brand
Software Advisor. (2024). Lucidchart vs Miro. Lucidchart vs Miro - 2024 Comparison - Software Advice. https://www.softwareadvice.com/project-management/lucidchart-profile/vs/miro/
Lucid Software. (2023). 70+ million innovators use lucid. Lucid. https://lucid.co/customers#:~:text=70%2B%20million%20innovators%20use%20Lucid,most%2Dused%20visual%20collaboration%20platform.&text=A%20consultancy%20for%20better%20business,software%20with%20the%20Lucid%20Suite.
Miro. (n.d.). Customer success. https://miro.com/. https://miro.com/customers/