Lucidchart - Onboarding



  • Sukruti Shrivastava
  • Andrew Yang
  • Cayli Chase
  • Kaustubh Patil


12 weeks
(Sep 2019-Dec 2019)

  • Research
  • Prototyping
  • Ideating
  • Testing
  • Figma
  • Adobe XD
  • Adobe Illustrator


    The Challenge

    Lucidchart is a web-based online diagramming tool where users can create and share their diagrams online easily. With over 14,000 new users signing-up and using Lucidchart daily, our challenge was to redesign an onboarding experience to make them familiar and productive with the software quickly and efficiently irrespective of their technical proficiency or familiarity with any diagramming tool. Hence, improving engagement and retention with the product.

    Jump to the solution

    How can we make existing onboarding experience better?



    Getting to know Lucidchart

    We started our initial research by conducting a click-through on their software and noticed several issues which users might find frustrating and confusing.

    Data Analysis

    Lucidchart provided us with quantitative data to help us better understand users and their problems. The graphs below represent 'Feature Find' feature analysis where 'Feature Find' shows users where a particular feature is in the product.

    Lucidchart also provided us with NPS data and some useful information from their interview process. We analyzed the quantitative data and NPS data to know more about usability concerns. Following are some of the insights from data analysis-


    In the first few weeks of registration, users pay a lot of attention to shape, lines, and text


    Working with shapes, lines, and text is not that intuitive and users usually find trouble interacting with them


    Users who learn and transition from a skill level to a more advanced skill level are likely to be retained

    Insights from interviews

    We conducted contextual inquiry on users to understand what users expect from the software, their frustrations and pain points. We chose users according to the experience they had with the Lucidchart. Some of them were experienced in Lucidchart or other diagramming software, while others were beginners.
    Therefore, to have a better understanding of these users and discern their needs and goals, we designed personas which helped us guide our design process.

    Our team filtered through the provided data and explored Lucidchart further. We then modified some of our hypotheses. Based on the data and our hypotheses, we semi-structured our interview.

    We started our interviews by giving users some activities where they were given a specific task to perform and were given to explore the Lucidchart. We observed them and asked some questions related to what they did. Here are some critical insights that we got from the primary research


    Users find basic features such as line and arrow manipulation, text editing, dragging dropping, and resizing shapes non intuitive


    Feature Find icon does not stand out and users often find it difficult to search and the help articles are not that intuitive as a user would like


    It’s inconvenient for users to watch tutorials on youtube
    as it requires opening multiple tabs and is time consuming


    What if...

    In order to be more creative and divergent, we conducted 'what if...' scenarios, which helped us in generating more concepts. We did not think about feasibility and business constraints and went beyond imagination to explore the possibilities. So let's imagine: ' What if Lucidchart was taken over by...'


    After understanding the data and going through the research insights, we did discussions and brainstorming sessions where we came up with few initial concepts and low-fidelity wireframes

    Final Concepts

    Combining 'What if' scenarios and research, we generated a basic concept flow based on the them. The concept that we went ahead is the idea of watching tutorials in the same tab so as to not cause any hindrance to the users watching the tutorials while diagramming

    CONCEPT #1

    Feature Find Button Re-design

    From the interviews, we found out that the Feature Find button was not evident to the users as it looks like a part of the header and not a button. Therefore, to increase the discoverability of this search option, we re-designed 'Feature Find' option which brings more attention to this feature.
    We used magnifying glass instead of the binoculars making it a more universal icon for the search option

    CONCEPT #2

    GIFs and Videos to watch tutorials

    Iteration 1

    Introduction to video tutorials which lets users watch the tutorials for complex learning.

                              Iteration 2

    Redesigned it to give users access to GIFs in addition to the videos. GIFs help users to learn more simpler tasks easily which saves time and makes them efficient

    CONCEPT #3

    In-tab Videos

    The current design provides a Youtube link which opens in another tab.This feature allows users to view the videos in the same window which provides users a better experience as they don't have to go back and forth to view the tutorials

    CONCEPT #4

    Screen Position

    Users have the option to move around and resize the tutorial screen position wherever they want to, on the canvas. This provides convenience and does not cause any hindrance to the users while diagramming.


    We conducted testing on users by using Clickable Mockup and Scenario Simulation. We used phone screen to simulate the small screen and tried to adjust the position according to how users wanted and to check whether it is convenient for making diagrams while watching video tutorials.


    • Conducted this test on 5 users.
    • Four out of five users found this feature useful because it reduced the time of going back and forth between the tabs which is frustrating while diagramming.
    • Three out of five users liked the option to move the minimized screen to their preferred location.
    • Four out of five users did not like the idea of just watching videos, they preferred Gifs over videos for simple tutorials

    What I learned

    Usability to User Experience

    In order to have more ideas, sometimes we need to think beyond the problem space. At first, we were stuck on basic usability issues and were not able to think in terms of user experience. However, divergent thinking helped us a lot to generate more concepts and ideas, and after having some brainstorming sessions, we were able to think in terms of not only usability but also user experience.

    Creating cheap and dirty designs

    It is important to iterate fast on a design and keep the design dirty and cheap and not get stuck on a particular idea.

    © Sukruti Shrivastava 2020