uli copy long.png

Introduction

This is a UX design project that MPS Cornell Team cooperated with Urban Land Institute (ULI), in Fall 2019.

Urban Land Institute (ULI) is a non-profit organization and one of the largest networks of cross-disciplinary real estate and land use experts. 

 

ULI has launched the new version of Knowledge Finder in 2019 which features a redesigned user interface and new features. In this project, our team worked with the ULI team and created an intuitive and non-intrusive onboarding tutorial. ULI is planning to implement the tutorial in the next launch of the development.

TOOLS

Adobe XD

Flinto

MY ROLE

Research synthesis

Lo-Fi & Hi-Fi design

Usability testing

TEAM

Jiahao Zhou

Mahima Rao

​Bichen Xu

TIMEFRAME

3 Months

Give Me Your Feedback
I am actively looking for feedback and improvements. Please leave any of your thoughts here. Thank you!

Thanks for submitting!

The new design comes with challenges.

Knowledge finder is a powerhouse of information. The new version of Knowledge Finder comes with a novel interaction and user interface. First-time users can get overwhelmed by the number of resources and new search techniques.

This brings up the need for an intuitive and effective tutorial to smooth the on-boarding process so that users can:

 

  • Be familiar with the new UI and new content types  

  • Be able to apply the new searching technique

  • Increases users’ retention rate

  • Prompting users when a new feature is introduced

We followed a user-centered design process.

We first conducted a series of preliminary researches in order to better understand the users and potential onboarding processes:

The research process helps us address the design decision on the low -fidelity prototype.

We decide to choose a "non-intrusive" onboarding flow among the listed three.

evaluation.png

We used Adobe XD to create High–Fidelity Prototype, then I compiled them into video instructions via Flinto.

Welcome Window

 

The flashlight button will consistently be on the bottom of the pages. Users will see a welcome window when they enter the page for the first time.

The purpose of the welcome window is to inform users about the function of the button.

hifi1.gif
hifi2 .gif
Tutorial List

 

​The list contains features from tutorial components that users can learn on the page. Lists of the task will be different on different pages. 

The tutorial list allows users to take in control as they can select the task they want to learn specifically. Due to the diverse levels that ULI members attach to the technology, a comprehensive task list could also help relieve the burden of the ULI librarian.

Tutorial

Guides only focus on a single element at the time help blur out all the other elements in the UI and introducing new elements at each step. 

An advantage of using a proportional pop-out window is that users can operate while watching the step-by-step tutorial at the same time. 

hifi3.gif
hifi4.gif
Check The Tutorial

As users go through all steps of a task, they will return to the checklist and that task will be checked. Users are still able to return and review the tasks they have completed anytime they want.

With future user research, there is always room for improvement. The three main focuses are:

future.png
phone.png

Responsive Mobile Design: Implement the user tutorial on a responsive website for the mobile screen in a non-intrusive manner. This requires further investigations on mobile solutions in order to deliver a compelling experience for mobile users

Thanks For Reading

: ).png