Lucidchart
Reimagining onboarding by introducing a new mascot to guide users through the frustrations of onboarding.
Role
I was a UX researcher, designer, and strategist. I particularly enjoyed designing and strategizing in this project.
Duration
3 months (1 semester)
Team
Aditi Saldanha, DaAsia Johnson, Ying Pan
Overview
This was a sponsored project by Lucidchart. We were challenged to re-imagine their onboarding process over a semester. We proposed a personal onboarding mascot to alleviate user frustration and instill more confidence in diagramming.
Tools
Figma, Sketch, Principle, Illustrator
Client
Lucidchart
PROBLEM
New users found their first diagramming experience on Lucidchart stressful.
Lucidchart's extensive functionality and unfamiliarity was both overwhelming and discouraging to new users. It affected users' confidence and ability to enjoy the features they did like.
Frustrated users who did not find joy in the software were not motivated to become premium users nor spread the word about their experience on Lucidchart.
Why?
How does this matter to Lucidchart?
PROBLEM STATEMENT
How might we better ease new users into diagramming on Lucidchart so they feel more confident diagramming?
SOLUTION
We introduced a personal onboarding mascot, Lucid.
A more enjoyable introduction.
Lucid is introduced and gets on a first name basis with the user to make the experience more enjoyable and comfortable.
The content strategy is more conversational to help ease users into the diagramming experience.
A more engaging tutorial.
Lucid guides users through a more engaging task based tutorial and provides words of encouragement after the completion of each task, instilling more confidence in users before they begin diagramming.
DESIGN PROCESS
We double diamond-ed.
Our team went through a series of diverging and converging throughout the design process. We challenged ourselves to think big and explore divergent possibilities in order to deliver a solution that fulfilled both user and business goals and was implementable.
DISCOVERY
We conducted a mix of qualitative and quantitative research to best understand the problem space and identify opportunities where we could create an impact.
Outlining the research plan.
Learning from NPS data.
We started by conducting a heuristic evaluation of the software to form initial assumptions and immediately noticed several problem areas, most notably being a lack of clarity and poor usability of functions. However, we were cognizant that our frustrations could not be assumed to be universal.
We analyzed NPS data provided by Lucidchart to further explore the problem space. The data confirmed some of our usability concerns but also revealed clear problem areas in users' experiences. Below is graph I created with selected data extracted from Lucidchart's graphs to highlight the important issues we found.
Users have trouble getting started.
1
Use use feature find the most in the first 5 weeks, suggesting trouble getting started.
2
Users have trouble with the most basic functions even after 30 weeks.
Use use feature find the most in the first 5 weeks, suggesting trouble getting started.
Using surveys to define the target demographic.
We conducted a survey to gain more insight into broader level behavior and goals of diagrammers. We found that there was a large % of diagrammers and visual thinkers who did not use Lucidchart, so we decided to target new users to Lucidchart.
User research.
We used findings from our survey and data analysis to guide our interviews but also encouraged free play to understand how users would use Lucidchart in their everyday lives. We chose to divide our interviews into two groups, new and seasoned diagrammers, as we believed they would approach Lucidchart very differently.
Through interviews and contextual inquiries, we found that both user types were easily frustrated and discouraged by not knowing how to use the software, but approached it in different ways. To illustrate these differences and better empathize with the users when designing, I created two user personas.
New Diagrammers
Don't know what they want to do but are willing to learn.
Seasoned Diagrammers
Know what they want to do but are easily frustrated by unfamiliar UI, and thus, quick to change tools.
KEY INSIGHTS
1
Users want to feel confident when using software.
Users are easily discouraged when they cannot figure a tool out, which consequently affects their mood there after.
"I was pretty bummed that I couldn't figure out how to manipulate the table properties."
2
Users tend to skip the tutorial because it isn't engaging.
None of the interviewees watched the tutorial as it didn't require any interaction and was easily skippable.
"I never watch tutorials. I like to think I can figure it out once I'm in there."
3
Users find getting started stressful.
The multitude of functions and UI layout overwhelms first time users, making them think the software is aimed at experienced diagrammers.
"I wouldn't use Lucidchart for quick brainstorming. It looks very complex. Draw.io is simpler."
Problem framing.
Our research and derived insights helped us see the most pressing problems users were facing and helped us define a design direction.
IDEATION
Shifting our product thinking from usability to user experience.
Lucidchart challenged us to shift our thinking from usability concerns to user experience concerns. With this in mind, we tried to look at the data from a new lens and asked ourselves - how could we make the experience more delightful and actually impact a person's life personally and professionally?
DESIGN PRINCIPLES
By understanding the pain points of our users, we were able to distill down design principles that would help guide our concept generation and enable us to cross check design decisions moving forward. Such practice helped us stay on track at a high level, stay lean with our time, and stay in line with our user and business goals.
DESIGN EXEMPLARS
With our principles in mind, we identified exemplars that we believed exemplified these principles and identified the design patterns they used to do so.
Lemonade
Makes signing up for insurance more understandable and captivating by being conversational and breaking the process down into smaller steps.
Duolingo
Makes learning easier and more fulfilling with an animated mascot that accompanies users through their whole journey and cheers them on.
CONCEPT GENERATION
We challenged ourselves to think divergently.
In order to think more creatively and beyond the existing system, we conducted a series of 'what if' exercises. For this exercise, we didn't let feasibility and viability constrain us in order to really explore the possibilities. We challenged ourselves to think about new user types, markets, and devices.
Framework
- What if Lucidchart partnered with _______________ (company)?
- What if Lucidchart used _______________ (device)?
CONCEPT SELECTION
We moved ahead with a personal onboarding mascot because it best aligned with our goals.
Hi everyone.
I'm Lucid!
A mascot with a purpose.
We didn't want the mascot to just be the face of the brand, but rather, actually have a purpose. Keeping our user and business goals in mind, we proposed the integration of our mascot into three key experiences.
WIREFRAMES
We produced basic mockups to conceptualize and prove our concept and reviewed each stage with our design principles to ensure we were staying true to our goals.
Getting Started
Learnability: 1/5
Efficiency: 1/5
Captivating: 5/5
Learning
Diagramming
Learnability: 5/5
Efficiency: 1/5
Captivating: 5/5
During
Diagramming
Learnability: 1/5
Efficiency: 5/5
Captivating: 5/5
.jpg)
Taking a step back.
Through continuous iterations and feedback from the team at Lucidchart, we realized that our concept was too ambitious. It required big changes to the system, and thus, was high risk and not a practical move from a business standpoint.
Embracing the new direction.
To better consider the practical needs of the business, we scaled down our concept to what was most relevant to onboarding and required the least resources and changes to the current system. We focused on smaller moves, moving ahead with what was most essential to an MVP while simultaneously thinking about future additions and the feature's long term strategy for success.
Fine tuning the details.
We developed high-fidelity prototypes to test and gather feedback. For better readability, I will focus on the design elements that we impacted on the screen, rather than the whole screen.
Getting Started
ITERATION #1
ITERATION #2
Learning Diagramming
ITERATION #1
ITERATION #2
SOLUTION
Ease users in.
Lucid is introduced and gets on a first name basis with the user to make the experience more comfortable and break the process down into smaller steps.
Solved pain point:
Getting started is stressful and overwhelming.
Familiarize users.
Relevant toolbars and elements are highlighted to acquaint users with and familiarize them with the canvas.
Solved pain point:
New users, regardless of experience level, get frustrated by the unfamiliarity of using a new software.
Teach the basics.
Lucid gives users 3 quick tasks relating to shapes, lines, and text to teach them the basics. Lucid offers encouraging words after each task is completed so users can begin diagramming on a confident note.
Solved pain point:
NPS data showed that shapes, lines, and text were the most troublesome tools for users.
TESTING
A/B Testing.
To test our concept, we conducted a miniature version of A/B testing with 8 participants (4 for each concept) and asked them to do identical tasks. To test the proposed concept, I created an interactive prototype on Principle to best simulate the changes.
Speed of task completion
Level of exhibited confidence
Number of errors made
Success metrics.
Seeing Results
EXISTING; 65s
PROPOSED; 18s
47s
Our participants agreed that the tutorial helped them feel more confident when they began diagramming.
While we were confident that our solution addressed the pain points users brought up, there were a few concerns we had about its implementation. We used the testing results to validate our concerns.
Validating our design concerns.
REFLECTION
What did I learn from this project?
1
Balancing business and user needs is key to the feature's success.
Launching a new feature is a huge move both in terms of risk and resources. While a new feature may seem desirable to users, it is essential to phase it in with smaller moves so usability testing can be performed with more specific metrics to assess potential.
2
We all have something to learn from
each other.
Our group was both smaller and included a non-HCI student, which made us the anomaly. This became an advantage because we had very unique ways of working. The non designer pushed us to more efficiently and not get caught up in the smaller details when our focus should be on the bigger picture.