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
User Research
User Research
Usability testing
Usability testing
Usability testing
Redesign
Redesign
Redesign
Official state gov project
Official state gov project
Official state gov project
Background
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
MILD
MODERATE
MODERATE
MODERATE
SEVERE
SEVERE
SEVERE
EXTREME
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.
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 ?
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.
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.
Design methodology
METHODOLOGY
METHODOLOGY
RESEARCH
Understood user specific requirements
Understood user specific requirements
Understood user specific requirements
Immersed myself in the problem and target audience
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
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
Designed a better revamped version to get the best UX
CRITIQUING WHAT WE STARTED WITH
Heuristic Evaluation
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.
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.
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.
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.
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.
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
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?”
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.
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.
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
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.
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.
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 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
Trust
01
Reliability
Ease of Use
02
Usability
Personalization
03
Customization
Engagement
04
Interactivity
Trust
01
Reliability
Ease of Use
02
Usability
Personalization
03
Customization
Engagement
04
Interactivity
Representing Target AUdience
User Personas
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.
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
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.
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 ArizonaLikeliness 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
Pre-test Questions
Usability test
Usability test
Usability test
Post-test Questions
Post-test Questions
Post-test Questions
Three words to describe the Arizona Water Chatbot
Interested topics about water
in ArizonaLikeliness to use a chatbot to get answers
Likeliness to use the Arizona Water Chatbot
Representing Target AUdience
Findings and Insights
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
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.
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
REDESIGN
Sketches
Low Fidelity
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.
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
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 :
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.
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.
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
BEFORE VS AFTER
Drag the slider to reveal
Drag the slider to reveal
Drag the slider to reveal
Impact
POTENTIAL IMPACT
POTENTIAL IMPACT
M +
Arizona residents helping
M +
Arizona residents helping
M +
7
Arizona residents helping
M +
Arizona residents helping
%
Time saved
%
Time saved
%
70
Time saved
%
Time saved
%
Usability Rating
%
Usability Rating
%
Usability Rating
%
Usability Rating
REFLECTING ON THE PROJECT
My Learning
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.
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
Background
Process
Design
Background
Process
Design
Background
Process
Design
Context
Website redesign
AI Chatbot
Social cause
Project Details
Coursework
Jan- April 2024
Desktop designs
Tools
Figma
Google docs
Zoom
