top of page

Eastie

Currently, students are having a hard time to search their inquiries on the California State University, East Bay website. Because the website is cluttered with so many categories and lots of content.

Eastie is a chatbot through which the students can get quick assistance to search and get the school-related information in a seamless way on the Cal State East Bay Website.

Project duration: 4 months

Project type: Group

My Role: (UX/UI Designer)

                Ideation

                Conversational Design

                Wire framing

                Prototyping

   

          

Team: Shreya Mhatre, Visual & UX Designer

           Youngmi Howe, User Researcher

           Michael Phan, Editor & Researcher

Research Question

How might we provide quick service to get the information on the university website for current students?

eastie_research_problem-01.png

Research Insights

To find out the solution to the research question, we conducted interviews with students of the University and the students who are willing to join the University.

I prefer google search rather than a website search to get accurate information

Need something more than search

It becomes sometimes irritating when you don't get the required information in spite of searching through the university website

Artboard3-01.png

A lot of information but needs time to refer everything

Satisfaction Rate

Average time spend on search

Screen Shot 2020-03-31 at 8.36.01 PM.png
Screen Shot 2020-03-31 at 8.36.01 PM.png

35%

Success Goals

  • Time Efficiency: Reduce average time spend on search from 87secs

  • Valuable: Save efforts and increase the rate of satisfaction

  • Encouraging: Provide a solution which is more than searching

Iteration:

Collaboration Ideation & Mind Mapping

The knowledge we gained from this process benefited us to evaluate multiple ideas and potential solutions. The ideas generated during the group ideation are used to correlate and cluster all ideas together to process further and visualize the system and high-level approach.

Screen Shot 2020-04-01 at 12.42.24 AM.pn

Group ideation and brainstorming using sticky notes

Rapid Prototyping

Different physical prototypes include Robot who can roam around in the campus to give answers, Ipads installed at different locations to give answers with a live person, QR code scanner for getting the locations of different places, Augmented Reality application to pop up information using Marker images, live Kiosk at different locations, and the Human chatbot who can move around the campus and give answers.

Screen Shot 2020-04-01 at 12.59.08 AM.pn

Different Physical Prototypes

This process also allowed us to evaluate and identify the overlapping contents, pros, and cons and reusable massaging patterns in multiple situations. 

Locking Down The Scope

We finalized the idea of providing Chatbot Service on the University website.

During Rapid prototyping, we presented our prototypes to other teams. The discussion and feedback allowed us to understand the level of efforts, the feasibility of messaging flows, and scope.

 

We narrowed down the scope for Minimal Viable Product and decided to focus on creating a flow for a specific area.

new doc 2019-12-09 20 (1).jpg

First version of paper prototype

Task Analysis

To do the User testing with the paper prototype we created the second version of prototyping with more focused conversation flow and mobile paper layouts so that users can actually feel like holding a phone while testing.

Plan

Goal: Use two  tasks to perform using paper prototype and observe users’ reaction and gather feedback

Time: 30 minutes

Method: paper prototype

Screen Shot 2020-04-01 at 11.47.11 AM.pn
20191007_191259.jpg

 The second version of paper prototype preparation in progress

 The Second version of paper prototype

Screen Shot 2020-04-01 at 11.51.51 AM.pn
Screen Shot 2020-04-01 at 11.52.43 AM.pn
Screen Shot 2020-04-01 at 11.52.55 AM.pn

Snapshots from user testing with users

Feedback

  • Curious to know how the voice input will work

  • Like the autosuggestions  

  • Appreciate the  quick response 

  • Like to download a few things on the device  so that they don’t need to use a chatbot for the same thing again  and again  

 

By performing user testing using paper prototypes, we identified the logical flow of the service which helped us to improve the user experience.

Interactive Design Prototype

Creating medium-fidelity wireframes was an effective step to quickly get the insight of enhancing the service by performing user testing and to plan the next for production development. 

Screen Shot 2020-04-01 at 12.17.34 PM.pn

 Interactive Design Prototype for Eastie

Conversation Design flow

To design the interactive prototype we researched a lot for the tool which can give us the privilege to give user input and give the experience of the actual chatbot.  

 

After lots of research and trials, we finalized the “landbot.io” tool for our interactive chatbot prototype. 

Screen Shot 2020-04-01 at 3.08.28 PM.png

Conversation flow of a scenario for Eastie in landbot.io tool

Design Decisions for

Success Goals

To achieve these three success metrics: Time Efficiency, Valuable, and Encouraging, we took several design decisions that made the user experience better for the students.

 

User story:

Consider the scenario where Joe wants to learn about the "Writing Skills Test(WST)" as he is not aware of it.

#Time Efficiency

A lot of information but needs time to refer everything

Artboard3-01.png

Joe can write "wst" simply and the brief summary will come about WST.

 

With that summary, all the other information related to WST will be displayed in the form of different categories such as preparation,  charges, registration, dates.

 

So that Joe can click on any category instead of typing the whole word and get the related information quickly.

 

This will save his time to get information rather than searching on the website.

#Valuable

After selecting one of the auto-suggested categories such as "Wst Charges", Joe will be able to see the relevant information and Eastie will ask whether Joe wants to know more about WST or anything else

If Joe selects WST again, he will be able to see the remaining categories of the WST.

 

So that he will be able to understand that he needs to know this much new information about

the WST

That is why Eastie is a valuable solution for providing accurate and valid information.

Artboard3-01.png

I prefer google search rather than a website search to get accurate information

#Encouraging

Artboard3-01.png

Need something more than search

Eastie is a Smart school buddy as students will not have to type the whole words or queries to get information.  Auto-suggestions will save users' efforts. 

 

Moreover, the feature of reminding the student to get all the remaining information through categorization makes it easier to remember.

Students can directly download the files from the chatbot. They will not need to go anywhere to get the resources.

All these factors motivate students to use Eastie rather than searching on the website.

Eastie

eastie_introcover-01-01.png
bottom of page