Home

Projects

About

Contact

2024

Arizona State Water Chatbot

Arizona State Water Chatbot

Back

Back

As part of the UX research team for this project by the Arizona government and ASU, I headed brainstorming sessions, defined user personas and their journeys, developed wireframes and prototypes, and enhanced the user experience for 6 months.

Hi, I am Rosa® I’m a passionate and innovative 3D designer with over a decade of experience in the field. My journey began with a fascination.

As part of the UX research team for this project by the Arizona government and ASU, I headed brainstorming sessions, defined user personas and their journeys, developed wireframes and prototypes, and enhanced the user experience.

User Research

Usability testing

Redesign

Official state gov project

Back

Background
BACKGROUND

For the last 19 years, Arizona is facing water supply issues due to drought conditions and declining water levels in the Colorado River

- Climate Central

1900

1920

1940

1960

1980

2000

2020

MILD

MILD

MODERATE

MODERATE

SEVERE

SEVERE

EXTREME

EXTREME

Arizona Drought Index

The crux of this problem lies in the lack of trustworthy data and existing details being scattered across the internet.

The crux of this problem lies in the lack of trustworthy data and existing details being scattered across the internet.

Problem Statement

"How might we design a quick and easy way for Arizona residents to access accurate water scarcity and conservation information? "

Why the chatbot ?
Why the chatbot ?

Imagine you’re at home, eager to find reliable information about water conservation. Instead of browsing multiple websites, you engage with the Arizona Water Chatbot, a tool that provides you with personalized tips and answers your questions efficiently. This saves you time and ensures you get accurate information tailored to your needs.

Imagine you’re at home, eager to find reliable information about water conservation. Instead of browsing multiple websites, you engage with the Arizona Water Chatbot, a tool that provides you with personalized tips and answers your questions efficiently. This saves you time and ensures you get accurate information tailored to your needs.

Visit Blue

Design methodology
METHODOLOGY
RESEARCH

Understood user specific requirements

Understood user specific requirements

Immersed myself in the problem and target audience

Immersed myself in the problem and target audience

Figured out what is working and what is not

Figured out what is working and what is not

Designed a better revamped version to get the best UX

Designed a better revamped version to get the best UX

CRITIQUING WHAT WE STARTED WITH

Heuristic Evaluation
Heuristic Evaluation
Starting off I began by exhaustively analysing what was effective and what could be done better, based on the defined standards of heuristics, and using the applicable ones. I then rated them on a scale from
high, medium, to low.
I began by analyzing effectiveness and identifying improvements using relevant heuristic standards.
I then rated them on a scale from high, medium, to low.

HIGH

MEDIUM

HIGH

HIGH

MEDIUM

HIGH

HIGH

There's no functionality to pause the chatbot output processing in case of user error, potentially causing a seamless user experience disruption.

There's no functionality to pause the chatbot output processing in case of user error, potentially causing a seamless user experience disruption.

Issue 1

To provide users with an option to edit their query, delete the conversation and to copy the response.

Adding a back / pause button would give the user the freedom of control. 

To provide users with an option to edit their query, delete the conversation and to copy the response.

Adding a back / pause button would give the user the freedom of control. 

Suggestions

HIGH

A novice user might not know what to put in the text box initially and might get confused.

A novice user might not know what to put in the text box initially and might get confused.

Issue 2

Provide an optional guided mode that assists users in exploring specific topics more efficiently.

Giving a walkthrough / product tour to the first time users could speed up the process.

Provide an optional guided mode that assists users in exploring specific topics more efficiently.

Giving a walkthrough / product tour to the first time users could speed up the process.

Suggestions

3

MEDIUM

There is no voice input functionality.

Issue 3

Adding a button to input voice in the chat section. 

Suggestions

HIGH

There are no options for the users to edit, delete or copy a response, for their convenience.

Issue 4

Adding option to copy or share chatbot response.

Option to edit user chat is also needed. Not just option, but a button as well.

Suggestions

4

LOW

It will be great if the ‘Would you like to know more?’ option could be a clickable button 

It will be great if the ‘Would you like to know more?’ option could be a clickable button 

Issue 5

Can make the text “Would you like to know more?” clickable.

Can add a button that says “yes” or “no” to answer the question of “Would you like to know more?”

Can make the text “Would you like to know more?” clickable.

Can add a button that says “yes” or “no” to answer the question of “Would you like to know more?”

Suggestions

Would you like to know more?

Would you like to know more?

Yes

No

MEDIUM

The active state of the button does not change in response to user input (or the lack thereof), failing to provide feedback that would guide the user to the correct next step.

The active state of the button does not change in response to user input (or the lack thereof), failing to provide feedback that would guide the user to the correct next step.

Issue 6

Differentiate the chat bot and the laboratory nav bar in a better way.

Adding links/pages related to the chat bot in the top navigation bar can help avoid the confusion.

Differentiate the chat bot and the laboratory nav bar in a better way.

Adding links/pages related to the chat bot in the top navigation bar can help avoid the confusion.

Suggestions

5

FINDING OUT WHAT OTHER. CHATBOTS CAN DO COMPARED TO OURS

Competitive Analysis
Competitive Analysis
In order to cultivate a thorough comparing the functionalities other AI chatbots deliver, it was essential to ensure we stay current with the norm. Given the novelty of AI chatbots, fostering a sense of recognition and resemblance was utterly crucial to establish a bond. Therefore we did a competitive analysis.
To stay current with AI chatbot norms and foster familiarity, we conducted a competitive analysis of existing functionalities.

Chatbots

Arizona State Waterbot

Bard

Chat GPT

Copilot

Cullie

Deep AI

Onboarding

FAQs and help

User-friendly UI

Edit and pause functionality

Response Feedback

Chat History

The active state of the button does not change in response to user input (or the lack thereof), failing to provide feedback that would guide the user to the correct next step.

Issue 6

Introduction & Consent:

Informal chat about water project.

Seeking feedback with consent form.


Key Questions:

Water info sources, conservation practices.

Engagement with water articles and digital tools.

Awareness of government plans, specific interests.


Interests & Concerns:

Topics triggering water inquiries.

Commonly discussed water issues.


Introduction & Consent:

Informal chat about water project.

Seeking feedback with consent form.


Key Questions:

Water info sources, conservation practices.

Engagement with water articles and digital tools.

Awareness of government plans, specific interests.


Interests & Concerns:

Topics triggering water inquiries.

Commonly discussed water issues.


User Interviews
User Interviews

USER NEEDS ESHTABLISHING

Through interviews with we identified four main problem areas:

Trust

01

Reliability

Ease of Use

02

Usability

Personalization

03

Customization

Engagement

04

Interactivity

Representing Target AUdience

User Personas
User Personas
Our design was guided by three critical personas that would act as an representation of the potential users :
 a property owner, a housing reliant individual, and a tenant
Our design was guided by three critical personas that would act as an representation of the potential and target users.
IDEATION

BRAINSTORMING FOR SELECTING PERSONAS

FEEDBACK BY THE TEAM ON REPRESENTING THE AUDIENCE

REFININg FINAL PERSONAS

Representing Target AUdience

Phase 1 : User Testing
Our design was guided by three critical personas: a property owner, a housing reliant individual, and a tenant
Our design was guided by three critical personas: a property owner, a housing reliant individual, and a tenant
USER TESTING PHASE 1

First impressions, mascot feedback


Scenario 1:

Water usage in area for Arizona resident. 


Scenario 2:

Availability of water in Arizona in the future.


Scenario 3:

Water quality.


Scenario 4:

Whatever the user wants to ask.

Scenario 1:

Water usage in area for Arizona resident. 


Scenario 2:

Availability of water in Arizona in the future.


Scenario 3:

Water quality.


Scenario 4:

Whatever the user wants to ask.

  • Interested topics about water in Arizona

  • Interaction with technology

  • Chatbot usage

  • Likeliness to use a chatbot to get answers

  • Duration of residency in Arizona 

  • Age

  • Owner or renter

  • Zip code

  • Three words to describe the Arizona Water Chatbot

  • Interested topics about water
    in Arizona


  • Likeliness to use a chatbot to get answers

  • Likeliness to use the Arizona Water Chatbot

  • Interested topics about water in Arizona

  • Interaction with technology

  • Chatbot usage

  • Likeliness to use a chatbot to get answers

  • Duration of residency in Arizona 

  • Age

  • Owner or renter

  • Zip code

Pre-test Questions

Pre-test Questions

Usability test

Usability test

Post-test Questions

Post-test Questions

  • Three words to describe the Arizona Water Chatbot

  • Interested topics about water
    in Arizona


  • Likeliness to use a chatbot to get answers

  • Likeliness to use the Arizona Water Chatbot

Representing Target AUdience

Findings and Insights
Findings and Insights
Our design was guided by three critical personas: a property owner, a housing reliant individual, and a tenant
Our design was guided by three critical personas: a property owner, a housing reliant individual, and a tenant

Issues :


  • Although "Action Items" was defined in the sidebar, missed the information.

  • Did not understand the term “Action Items”.

  • Distracted while waiting for bot to respond.

  • Chat bot repeats detailed answer to prior chat's question.

  • Typing without clicking the chat text-box, assumed it would automatically type there.


Solutions:


  • On hover of any action item, show a tooltip giving a short description of what it does

  • Change to something more understandable and relevant to it's function.

  • Show information as it is being generated like ChatGPT.

  • Clear entire chat history when "new chat" button is pressed.

  • By default, keep the chat text bar selected.


Issues :


  • Although "Action Items" was defined in the sidebar, missed the information.

  • Did not understand the term “Action Items”.

  • Distracted while waiting for bot to respond.

  • Chat bot repeats detailed answer to prior chat's question.

  • Typing without clicking the chat text-box, assumed it would automatically type there.


Solutions:


  • On hover of any action item, show a tooltip giving a short description of what it does

  • Change to something more understandable and relevant to it's function.

  • Show information as it is being generated like ChatGPT.

  • Clear entire chat history when "new chat" button is pressed.

  • By default, keep the chat text bar selected.

Redesign
REDESIGN

Sketches

Low Fidelity
Low Fidelity
We created low-fidelity prototypes and tested them with users, focusing on minimizing inputs and time required to get useful recommendations.
We created low-fidelity prototypes and tested them with users, focusing on minimizing inputs and time required to get useful recommendations.

NEw DEsigns and improvements

High Fidelity
High Fidelity
Based on user feedback from the lo-fi tests, we refined the user flow and added features like :
Based on user feedback from the lo-fi tests, we refined the user flow and added features like :

Adding “Arizona Water Chatbot” as primary heading while making “Julie Ann Wrigley Global Futures Laboratory™ “ smaller.

This will make it less confusing to the user as they will know that the page is for the water chat bot.

Making "Arizona Water Chatbot" the primary heading and reducing the size of "Julie Ann Wrigley Global Futures Laboratory™" clarifies the page's focus for users.

Adding “View Source” button to right under the bot’s response. This placement will allow us to re-direct the user to a part of the sources that matches the current response.

Default response should be in the form of both sentences and bulleted lists. This would meet genre expectations as seen from other chatbots.

Thumbs-up and Thumbs-down are both just buttons that get activated when clicked, if the user wants to leave a review they can click on “Write a review?” to submit one.

According to genre expectations of a chat, the sender is on the right and the responder to the left. Keeping this consistent design, the bot should also do the same to make it seem like a conversation.

Keeping only the options for “Descriptive” and “Short” and removing “Action Items” as the default response will be in bulleted form.
Changing the text from “Detailed” to “Descriptive” and also adding on-hover explanations. These changes will make it easier for the user to understand exactly what the buttons do.

Representing Target AUdience

Phase 2 : User Testing
The redesign was tested on the same group of participants with eye-tracking to get further analysis on usability rating.
The redesign was tested on the same group of participants with eye-tracking to get further analysis on usability rating.
USER TESTING PHASE 2
Before vs After
BEFORE VS AFTER
Drag the slider to reveal
Drag the slider to reveal
Impact
POTENTIAL IMPACT
0

M +

Arizona residents helping

M +

7

Arizona residents helping

0

%

Time saved

%

70

Time saved

0

%

Usability Rating

REFLECTING ON THE PROJECT

My Learning
LEARNING
  • Learned the importance of user-centered design through user interviews and personas.
  • Identified usability issues via heuristic evaluation, emphasizing critical analysis.
  • Used low- and high-fidelity prototyping to iterate quickly based on feedback.
  • Collaborated with UX designers in brainstorming workshops to foster creative solutions.
  • Conducted competitive analysis to balance innovation with user familiarity.
  • Reinforced the value of iterative design, collaboration, and thoughtful visual choices.

  • User-centered design: Learned its importance through interviews and personas.

  • Usability insights: Identified issues via heuristic evaluation.

  • Rapid iteration: Used low- and high-fidelity prototypes to refine based on feedback.

  • Collaboration: Brainstormed with UX designers for creative solutions.

  • Competitive analysis: Balanced innovation with user familiarity.



Key takeaway: Reinforced the value of iterative design, collaboration, and visual clarity.

Background

Process

Design

Overview

Background

Problem

Definition

Why the chatbot

Solution

Project Resposibilities

Tasks

Action Bar

Dynamic

Image Expand

Overlay

05

13

Read Time

Scroll

04

09

Changelog using GitHub

Jun, 2024

Feedback in Slack

May, 2024

Context

Website redesign

AI Chatbot

Social cause

Project Details

Coursework

Jan- April 2024

Desktop designs

Tools

Figma

Google docs

Zoom

Brief
Atharva

Open to work

View Resume

Atharva

Open to work

View Resume

Create a free website with Framer, the website builder loved by startups, designers and agencies.