12 weeks
(Sep 2019-Dec 2019)
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.
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.
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
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
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
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.
Results
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