ULI Cover II.jpg

Knowledge Finder Tutorial

An Onboarding experience to set users to the long-term success of using the website's features.

 

My RoleUser Survey, User Interview, Usability Testing, Visual Design, Interaction Design

Team:  Jiahao Zhou, Bichen Xu, Mahima Rao

Tools:  Adobe XD, Figma, Principle

Duration: 3 Months

Context: Cornell UX Capstone Project

INTRODUCTION

Background

In 2019, Urban Land Institute (ULI), a real estate non-profit organization has launched the new version of their online library system - Knowledge Finder (KF). New KF possesses a redesigned user interface and several new features including a new search engine, joining the online webinars, discovering past events, etc. Our research results show that users had troubles using these new features, either they could not utilize these features well for their needs or they didn't know the existence of these new features.

user1.png
user2.png
?.png

How might we onboard users to successfully use the new version of the Knowledge Finder?

SOLUTION

A quick look at our solution...

We designed a user onboarding checklist that allows users to select the tutorial based on their own needs. We believe such a non-intrusive manner would best suit the diverse user groups of ULI and motivate users to explore the full functionalities of the knowledge finder with their own interests. 

 

RESEARCH

Who are the users of Knowledge Finder?

Basically, all ULI clients are potential users of Knowledge Finder. It means it covers all diverse user categories including ages, occupations, nationalities, and membership levels. All these tell us about how different they can use Knowledge Finder, and the different issues they might encounter while using Knowledge Finder.

ages.png

A Wide Range of Ages

(Range from 18 -46+)

jobs.png

Various Occupations

(from students, architects, to financial advisor, etc)

culture.png

Different Cultures

(from USA, Europe to China, etc)

membership.png

3 Membership Levels

(from Leader, Full to Associate levels)

RESEARCH

The Survey helps us to confirm the user needs & pain points.

Take account of the diverse user groups that KF may hold, we conducted a user survey and collected 47 Knowledge Finder users with different backgrounds to participate in order to understand users' pain points and needs. 

"Could you quickly walk us through the last time you used KF?"

While asking users to walk through the last time they used KF, 86% of users reported they've encountered a circumstance that related to difficulty or issues from their past experience.

1.png
2.png

What difficulties have you encountered while using KF?

67% of users indicated that they encountered the problem of finding the paper they want, as we also found that "searching for papers" was the most frequent user behavior of using KF. Some other options we gave in the survey include "use new search interface", "join the webinar" and "find events".

What would you do when you encounter difficulties?

Nearly half of the users will give up when encountered the problem. This result indicated that the lack of onboarding experience will greatly reduce users' retention rate of using KF.

3.png
4.png

Do you know or have you ever used the keyword search feature of the new KF?

Most users are not aware of or haven't used the new search technique. Not only the new search technique, but our survey results also showed that most users haven't used many advocated features of the new KF since they still hold the assumption that the new KF was just like the old version of KF which was just a search engine of the research paper.

INSIGHTS

Through the survey and early research, we concluded the following insights: 

survey insight.png
 

MARKET RESEARCH

I found existing products to discover potential opportunities...

We looked into three products that contained successful user onboarding flows for webs on the market: SmartSheet,  Google Hangouts, and GrowthHackers. Combined with the user survey results, the marketing research helped us look for the potential opportunities that we could bring to KF, and we also had a better understanding of the advantages and disadvantages of applying these different types of user onboardings to Knowledge finder.

google hangouts.png

Google Hangouts uses classic modal window slides to onboard new users which provides an overview of some best features of the product. Such a format is suitable for content that is general and easy to understand.

Smartsheet provides a step-by-step onboarding process as it requires users to pay attention to the different locations on the website. This method more clearly informs the user how and where to get started. Such a format is suitable more for more complicated content.

smartsheet.png
growthhacker.png

GrowthHackers uses a progress checker during the onboarding process. Like a game task list, such a format motivates users to explore the product and its features themselves and is suitable for most kinds of products.

 

Lo-Fi PROTOTYPE USER TESTING

From research to design, which type of onboarding is best suited to KF?

The preliminary research process helps me address the design decision on the low-fidelity prototype. However, even though all three of us had an idea and direction in mind,  we were afraid that we may preconceive with our designer bias. Therefore, we were not sure which tutorial could best suit KF until we hear the voice from users. 

That's why we designed all three types of user onboarding we discovered may be the most valuable from the marketing research: Slide, Step by Step, and Checklist. We then conducted a round of observation-based user test with the librarian of KF's and 4 Knowledge Finder users by asking them to use all three types of onboarding prototypes we had designed in a disrupted order.

slide low fi.gif

A "slides" onboarding puts all onboarding contents in one-time after users' first login

01. Slides

User Feedback

feedback icon.png

Users mentioned that they found it hard to learn all the new features in just one time. Especially it contains an entirely new interface, and some new searching techniques have many steps and are not easy to remember.

no.png
interactive lo fi.gif

02. Step-By-Step

User Feedback

feedback icon.png

Some users told us that they probably want to explore the website and do something straight ahead in their minds. Such a tutorial might break their interest in exploring the website.

no.png

A "step-by-step" onboarding" triggers every time a page has a new feature to introduce.

giphy.gif

A non-intrusive checklist allows users to explore the tutorial based on their own needs.

03. Non-intrusive Checklist

User Feedback

feedback icon.png

Overall we received very good feedback. Users think such game-like mechanics would excite their interest in exploring more content. Also, they mention that they like the fact they could easily come back and review it.

yes.png

INSIGHTS

As result, we decided to move on with the "checklist" as our final design solution. Based on the first round of user tests, we generated the following 3 important insights about the "checklist" tutorial:

  • Users can avoid viewing the onboarding they might have already known.

  • The checklist was non-intrusive which could lead to higher engagement for users.

  • The checklist-type tutorial could provide a more personalized experience regarding the diverse user groups that KF has.           (For example, due to different membership levels, users' permissions to access the KF contents are different. The checklist could help personalize the onboarding contents just for users with a specific membership level )

 

DESIGN SOLUTION

Final Design

After gaining feedback from ULI and users, my team iterated based on the lo-fi prototype and I used Figma to create the High–Fidelity Prototype. Then, I compiled the design solution into video instructions via Principle.

A welcome window will pop out which informs and reminds users of the functionality of the hidden flashlight button  once users log-in to the KF for the first time.  

The flashlight button will be consistently hidden on the bottom right side of the pages as a FAB.

welcome + hover.gif
open checklist (longer)

The checklist allowed users to explore the tutorial and learn the new features or search technique spontaneously, which greatly reduced the possibility of them to skip the tutorial. 

During the user testing, we found that a proportional pop-out window with the animation playing may help users more compared to an onboarding tours. Since users won't be interrupted as they are watching the tutorial and actually operating the task at the same time. 

The watched tutorial will be placed at the bottom of the list, and users are more than welcome to re-watch the task anytime they need to.

go throgh tutorial.gif
4. search keyword.gif

During the user research, we found that many users always already had a question or request in mind, so that they might more likely to just search those questions directly rather than explore the entire tutorial.

In this case, I added a search to filter feature. If the guidance they are looking for does not exist, They can still use the old method: contact KF for help!

ITERATION

With valuable user test feedback, I organized the design iteration

Though the presented works were my final design solution, we have invited ULI staff and 2 peer designers to evaluate our product from a usability level after the design prototype has been first created. Here I am listing some important iterations I've made based on the evaluation.

1. Flashlight Button's Default Location

new.gif
old.gif

Original Design

The flashlight button fixed at the bottom left corner of the page like a Floating Action Button. However, this could annoy some users as it's kind of obtrusive and may be a detriment to the usage of the rest of the interface.

Iterated Redesign

The redesign helps resolve the problem by making the appearance of the flashlight button less obtrusive but still taken the consideration of grabbing users' attention.

2. Close or Minimize?

2 old.png

Original Design

We intended to allow users to come back to where they left after they close the checklist. Whereas the "close" button from our initial design added uncertainty to users and may make them feel they need to start all over again if they click the button.

2 new.png

Iterated Redesign

The redesign changes the "close" button to a "minimize" button and utilizes green color. Both of these add a feeling of security to users and reflect our original intention for this interaction.

3. After finish a checklist tutorial

3 old.png

Original Design

The position of a tutorial would remain the same after users finished it. However, users might have a hard time finding the unfinished tutorials in the case with a potential increasing number of tutorials in the future. 

3 new.gif.gif

Iterated Redesign

Moving the checked tutorial to the bottom matches more with users' expectations and also helped encourage users to explore more unfinished items in the checklist. In my showcase, the added animation will help users sense where the finished tutorial would go.

 

CONCLUSION

Future Steps

With future user research, there is always room for improvements. Here are the three main focuses we discussed with ULI for the future plan of this onboarding experience:

User Research: we have made a research plan with ULI if this onboarding experience is going to ship in the future. Some potential user testing plans include users' feedback on the size and space of the design components, the frustration that users may encounter, and the new tutorial tasks that users may look for inclusion in the checklist. 

Finalize Content: Due to the time restriction of the project scope, we didn't have a chance to finalize the flow for each checklist item. Therefore, my teammates and I produced an exhaustive list of all the tutorial modules that we think could be included. This could then act as a starting point for the ULI team to extend the checklist content from our high-fidelity mockup.

Clickability: to understand whether the content of the tutorial list is helpful or not, we can track the number of times that users click on each task element and compare these clicks with the user’s profile, biography, and overall retention rates. This may potentially provide a more personalized onboarding experience for individual users.
 

Responsive Mobile Design: Due to the time restriction, we haven't investigated any mobile users and designed a responsive mobile solution. It must be realized that the non-intrusive checklist might not be the best solution for mobile considering the compelling small size of the mobile.

Written In The End

 

This is a school Capstone Project which I was not sure if our final deliverable will be shipped by our clients. If you are also interested in my work which I have already made an impact on my clients' business goal, please take a look at my RECO Project.

Thanks for reading!