Role: UX Designer ✧ July 2022
Project Overview
Just stopping by? Here's a TL: DR version for you.
✳︎
Team
1 UX Designer ◦ 1 Senior UX Designer ◦ 1 Project Manager ◦ 1 AI Engineer ◦ 2 Front-End Developers ◦ 2 UX Researchers
⏣
Context
The Adobe Illustrator team was building a web version of their software. Illustrator had been a marquee desktop application for several years and taking it to web meant redefining the learning curve.
✎
Design Challenge
Evaluate the existing onboarding process of Ai web (beta) and re-design an apropos onboarding and learning experience for first-time users (FTUs) of Adobe Illustrator web.
⌗
Process Highlights
100+ 'novice' Illustrator user's surveyed remotely to learn about tool familiarity and learning preferences. Developed Attribute: Sub-Attribute framework to define onboarding. Collaborated with ADRS teams and published findings in Adobe Goldmine. Conducted testing both virtually and in-person of 500+ beta testers who were FTUs.
✶
Impact
12-15% improvement of task completion rates using Splash Sensei.10.7% reduction in first time user (FTU) drop of rates. First exploration of Adobe Sensei AI inside Illustrator as a web platform.
Glimpse into the experience of onboarding using Splash Sensei (recommendation) into Adobe Illustrator web (Beta)
Recommendations
Due to the constraints of the Non-Disclosure Agreement, several recommendations that were pitched to the leadership and the team have been omitted from the scope of this document. Two final favorites, one for each segment i.e. Loading Experience and Tool Learning have been detailed ahead.
Splash Sensei
The primary recommendation for the Learning Experience of Adobe Illustrator (web).
01: Could the loading experience be more than a 10 second space?
02: Could onboarding be made interactive?
03: Could it be used to teach new user Illustrator?
04: How can we leverage the goodness from the desktop version?
Here's a story to help explain Splash Sensei better:
This is Bob.
Bob loves to draw, and occasionally plays around with Illustrator.
Bob likes Illustrator, but as a friend.
Bob, loves the splash artwork.
He really wishes that he could make such an artwork too!
but, he has so many questions
but, he is an absolute novice at Illustrator.
Enter, Splash Sensei!
With Splash Sensei's help, Bob becomes learns Illustrator quickly.
Additionally, their relationship has now bloomed into something much more meaningful.
So what exactly did Splash Sensei do?
Interactive Splash Illustrations
User simply hovers over any particular illustration of choice to enter the learning environment. The artworks are selections from previous splash illustrations of AI leveraging the goodness from the Desktop versions. Moreover, it also celebrates the rich marquee history that AI and its assets held in the Adobe product suite.
A screen full of illustrations is a radical idea, however, it creates a sense of intrigue, awe, brand, and welcome.
Welcoming FTUs
Reinforcing safety. It is important that users feel comfortable making mistakes, because they will.
Observation: Drop off rates with Adobe Illustrator were the highest with FTUs (First time users) caused by the overwhelming number of tools, techniques, and unfamiliar drawing paradigms.
People using a web tool want fast results and can get frustrated much easier if they cannot find quick solutions. This makes an error-friendly learning environment crucial.
Smart coach marks and tool tips powered by Adobe Sensei
The user gets kickstarted with a skeletal outline illustration of the overall illustration. The user can tinker with the artwork to get familiarized with Illustrator. As soon as the user clicks on any section of the artwork, Adobe Sensei understands the context of the click and provides recommendations of potential next steps
User clicks on the penguin body. Adobe Sensei understands the potential next steps following the click and recommends changing colors. A coach mark pops up guiding user through the next steps. Highlights and popups handhold the user through each step until the desired result.
Smart suggestions to help returning users as well.
Adobe Illustrator has over 80 to 90 distinctly different tools. Nobody can remember everything immediately. Repetition is a key way of transferring information from the STM to the LTM. We wanted to do this with Sensei as well.
Say a user returns to this tutorial through Splash Sensei and wants to change colors of the penguins. However, they have forgotten what was taught to them and wish get one of the exact colors given in the palette. The factor of correlation takes them to the color swatch tool. Adobe Sensei understands the tutorial steps, notices the delay in performing an action. Creates a coach mark prompting the user towards the 'Eyedropper' tool.
Areas yet to be explored:
I did not do everything. (Shocker)
It is vital to acknowledge that the concept discussed above is not a fully-developed product, however, has the potential to navigate discussions towards a certain direction in the future. There remain certain questions that are unanswered and are under scrutiny and ideation by the design team. They are as follows.
Splash Illustrations change every year.
How do we train sensei and accommodate a constantly changing graphic?
Sometimes, advanced knowledge of Ai is needed.
Does a novice user need such advanced training during onboarding?
Many 'correct' ways to do one thing.
How does Sensei accommodate alternate ways of achieving a single result?
Are new vector drawing paradigms possible?
Alternate recommendations that were explored by delving deeper into the specificities of vector drawing.
A 'pen tool' and 'an actual pen' behave very differently.
Understanding that the scope of our challenge also spanned other vital areas of tool learning, a few concepts for teaching vector drawing tools were also explored. These concepts were in their nascent stages of realization and acted as the springboard for teaching one of the most powerful AI tools, the pen tool. Another recommendation was conceptualized in collaboration with the Machine Learning and AI teams and was referred to as Mr. ML. Moreover, the project leveraged the potential of an ongoing parallel project that aimed to reduce the learning curve of the 'pen tool'. Due to non-disclosure clauses, I cannot discuss the details of this recommendation here. However, a few initial ideas have been documented below.
Dot to Dot game wherein the user is simply supposed to match similar colored dots using the Pen tool. With level-ups, special powers, and even rewards, this method had the potential to be a good segway into familiarizing with the tool. It also had the ability to be scaled up to fit the entire Illustrator tool set.
Sandbox Bringing in the innocent joy of drawing on the sand at the beach. This experience becomes a marker for a very organic and natural form of drawing. With the advent of the new pen tool, the idea of a sandbox comes into the picture. Sandbox mimics the organic lines and shapes of a user using the new pen tool.
Project Venus: Foundations
The recommendations discussed above were the results of several months of research studies, ideation sprints, iterative feedback loops, and documentation.
For the sake of brevity and succinctness of this case study, the same has been detailed out as an optional section below.
Looking back
I had great time with some amazing learns.
Learns:
Gained valuable insights into user-centric design and working within existing frameworks. Focused on addressing the needs of both first-time and returning users. Ensured adherence to Adobe's design guidelines for a seamless experience. Developed a deep understanding of onboarding and learning within business, web development, and time constraints. Understood the value of cross-functional collaboration in driving impactful solutions. Explored new ideation and research avenues to enhance the design process. Engaged with AI tools, techniques, and teams, leveraging them to improve workflows and user experiences.
@Adobe Design, It's been a pleasure.
Enjoyed this case study?
Check out some of my other work:
