Streamlining data for Epidemiology and Policy Making
Duration
4 Months January - May 2022
Team Members
2 CGHE Leaders Lead UX Designer (me) Lead UX Researcher 2 Developers Project Manager
Skills Learned
Literature Review User Interviews Design Space Critique Survey Interview Affinity Mapping Brainstorming strategies Prototyping Heuristic & Think Aloud Evaluation
Overview
Encouraging users to have a deep understanding of their data through automation, hierarchial exploration and rich data visualizations
As the volume of data increases exponentially everyday, about 50-80% of a data scientists time is spent on making sense out of large datasets. Despite the slowly increasing trend in automating different parts of the DS lifecyle, and increasing usage patterns of autoML tools such as VertexAI and AzureML, data exploration continues to be a painstakingly time consuming and manual process. My user research has shown the various ways in which data scientists handle these tasks when faced with time pressure, some of which can be detrimental towards the quality of models generated.
By integrating automation in the workflow of a data scientist in a controlled manner, Plato aims to assist and accelerate their knowledge discovery process, while making sure the human remains in the drivers seat. Keeping in mind the curiousity and creativity that is necessary for this exploration, the focus of Plato is to steer away from complete automation and look to augment human capabilities through data visualization and pattern discovery.
Bridging the gap
“...auto insight tools informed by user studies in specific domains is scarce. Without significant understanding of users the new applications identified may be divorced from real world needs.”
Stasko & Endert, Characterizing Automated Data Insights, 2020
Primarily focusing on redesigning the data exploration module of an existing autoML tool, the goal of this project is to leverage user-centered design to augment human capability in a controllable and trustable manner. Through findings from 10 semi-structured user interviews and literature, following are the research areas I am exploring through my design:
Overview
A new way to engage with data through dashboards and visualizations.
The Coalition for Global Hepatitis Elimination (CGHE) is a non-profit organization that overlooks progress towards achievement of the goals for viral hepatitis elimination.
The CGHE website attracts 2000 users every month. Among these are epidemiologists and policymakers that are looking to review data from different sources to push for hepatitis elimination in their countries. Launched in 2019,the CGHE's reach has expanded globally over the past few years. What once started as a small scale website about their seminars, now houses country data dashboards with extremely detailed information on Hepatitis. The website's original design is no longer sufficient to visualize the large amounts of new data they have gathered.
As UX Designers, our goal was to work closely with the CGHE leaders, the developement firm and most importantly, their worldwide users, to understand the most intuitive and feasible way to represent their growing database through data dashboards.
Duration
4 Months August - December 2021
Team Members
We worked in a team of 4: 1. Sejal Sarkar 2. Kshitij Gupta 3. Linda Lee 4. David Lacy
Role
UX Designer (Lead) UX Researcher (Phases 1 to 2)
Skills Learned
Literature Review User Interviews Design Space Critique Survey Interview Affinity Mapping Brainstorming strategies Prototyping Heuristic & Think Aloud Evaluation
Duration
4 Months August - December 2021
Team Members
We worked in a team of 4: 1. Sejal Sarkar 2. Kshitij Gupta 3. Linda Lee 4. David Lacy
Role
UX Designer (Lead) UX Researcher (Phases 1 to 2)
Skills Learned
Literature Review User Interviews Design Space Critique Survey Interview Affinity Mapping Brainstorming strategies Prototyping Heuristic & Think Aloud Evaluation
Goal: The CGHE website consisted large amounts of data on Hepatitis. 4 MS-HCI students were to work on making this useful information more accessible to a global audience in groups of 2. The primary aim of this phase was to study the website in depth, as well as its behavorial flow using google analytics and carve out research areas for each group. This required us to work closely with each other as well as the CGHE to understand their goals. Finally, we concluded this phase with a plan that the 2 groups would follow over the next 5 months.
Phase 1: Understanding the Problem
Phase 1: Understanding the Problem
Goal: The key goal of this first substantive part of the project was to deeply understand the problem space that we are addressing, the stakeholders, define the audience we are catering to, and the issues and constraints that are involved in the problem.
Goal: The key goal of this first substantive part of the project was to deeply understand the problem space that we are addressing, the stakeholders, define the audience we are catering to, and the issues and constraints that are involved in the problem.
Overview & Contribution
Conducted a literature survey
Highlighted 1 out of 4 design implications
Conducted a design space critique for 2 out of 4 applications
Researched context for Atlanta and Georgia Tech
Conducted a comprehensive literature survey
Highlighted 13 research questions
Reached out to 2 stakeholders
Visited Centre for Visually Impaired to build connections
Organized calls with CGHE to learn more about HEP elimination
Generated Google Analytics trend reports for the website
Identified data communication as a research area
Goal: The CGHE website consisted large amounts of data on Hepatitis. 4 MS-HCI students were to work on making this useful information more accessible to a global audience in groups of 2. The primary aim of this phase was to study the website in depth, as well as its behavorial flow using google analytics and carve out research areas for each group. This required us to work closely with each other as well as the CGHE to understand their goals. Finally, we concluded this phase with a plan that the 2 groups would follow over the next 5 months.
This is some text inside of a div block.
Who are our users & stakeholders?
We started off our project by identifying who our audience and stakeholders would be. After concluding that our primary audience would involve GT students, we subdivided the user group into smaller groups. This helped us each narrow down focus on the specific people we want to recruit for interviews.
What are the characteristics of our user group?
image grid
What solutions currently exist in the market?
I conducted a design space critique for 2 of the more popular carpooling applications in the US app store.
1. sRide
2. BlaBla Car
Socio Technical context
Before we moved further with our project, it was important for us to define the larger social and technical context in which our design will intersect. For this, David looked to establish the context in Georgia Tech while I looked into the recent developments in the city of Atlanta.
Georgia Institute of Technology
Researching into the role of sustainability on campus, I found that it takes an increasingly central focus under the leadership of Georgia Tech's newest President Ángel Cabrera.
Soon after his investiture last fall, President Cabrera began a project in early Spring 2020 that laid out sustaiable goals. It has continued to gain momentum, through the events of the recent months as environmental sustainability has become ever more important in the life of a global pandemic and increasingly evident effects of the climate crisis.
City of Atlanta
fdfdfd
Design Implications
fdsfs
Challenges & Reflection
sfsdf
The Process
Screengrab of our timeline
More Details coming soon!
Lessons Learnt & Reflections
Estabilishing directions
This phase required us to study the site deeply, and take up responsibility for reimagining the different parts of the website. Considering how comprehensive the CGHE website is, this was challenging at first and required us to be clear on each of our interests as well as how they can contribute to the website design. Considering the immense role hepatitis data on their website played in policymaking, me and Ankur took responsibility of making the data dashboards more efficient and streamlined.
Familiarizing ourselves with the context of data
Neither of us had any background in Epidemiology. In order to be able to design for those that worked in this space, it was crucial for us to have a good understanding about the context of the data that is presented in data dashboards. Our clients were more than willing to have long calls with us to explain all data on their website and how it plays a role in making decisions for hepatitis elimination. We made use of this opportunity to have long, insightful calls with the CGHE to better prepare ourselves for the next phase.
Summarizing years of research
I found a lot of relevant insights scattered across academic papers as old as 1999. Summarizing the work that has been done till this point was a challenge initially, but I was able to communicate it to my team members through a succinct literature survey that was organized chronologically and by the broad themes that were observed in the papers.
Choosing a problem space
While discussing our problem space, I had to be careful that the goal we were agreeing to was neither too specific, nor too broad -- allowing us to approach the upcoming stages with a direction as well as an open mind
Identifying the user group
Carpooling can be a widely applicable solution -- however, we had to keep in mind the situation created by the pandemic as well as the limited time we had in hand. In order to give ourselves the maximum opportunities to learn, we narrowed down our scope to a user group that was more accesible to us for interviews and other feedback sessions.
Communication is key
As with any new team, a challenge here was to get to know each other, everyone's work ethic, and most importantly their time schedules. Communication was key in this stage, and we made sure to meet in person as much as possible to maximize interaction. It was an unsaid rule between us that everyone had to show up on time and regularly, at least in the earlier stages when we were looking to establish an understanding between each other.
Goal: The key goal of this first substantive part of the project was to deeply understand the problem space that we are addressing, the stakeholders, define the audience we are catering to, and the issues and constraints that are involved in the problem.
Phase 2: Requirements Gathering
Goal: The key goal of this phase was to use the information gathered in phase 1 to direct our survey and user interviews. And then gather requirements, define them, and look to understand the different user journeys.
Phase 2: Requirements Gathering
Goal: Once the two MS-HCI teams were able to take resposibilities of the different parts of the website that needed improvement, we worked together to plan out our research efforts. We started by working towards a common Qualtrix survey to gather quantitative data. By integrating logic in the survey, participants were asked a different set of questions based on how important certain features were to them. Me and Ankur conducted a brainstorming session that was combined with the competitive analysis over Miro. Finally, we interviewed a pool of 5 candidates to understand how they used the website, and their decision making process.
Overview & Contribution
Prepared a script and conducted semi-structured interviews
Transcribed interviews and prepared affinity map
Ideated 13 design interventions, 6 ideas voted into top 10
Sketched design solutions
Prepared 1 out of 2 storyboards
Took responsiblity for designing survey
Prepared a script and conducted 1 out of 3 interviews
Transcribed interviews and prepared affinity map
Designed 1 persona and 2 journey maps
Worked on 5 out of 10 survey questions
Prepared a script and conducted 4 out of 6 semi-structured interviews
Led the affinity mapping and brainstorming sessions
Communicated findings to a focus group and stakeholders
Image
Survey
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
Interview
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
Brainstorming
images - scamper, task analysis,
Design Solutions
fsdfds
Storyboarding
kokok
Challenges & Reflection
jjj
The Process
More Details coming soon!
Lessons Learnt & Reflections
Overcoming communication barriers
Our clients, CGHE, provided us with a comprehensive pool of participants to interview. This provided us with a unique opportunity to talk to users all across the world, at various important positions in the health departments of their countries. Going into the first interview, we did not anticipate the communication barrier that could arise during these interactions. Having previously conducted interviews only with people who were based out of the US, this was difficult to navigate through at first. However, we used it as a learning opportunity, and modified our interview script to have simpler sentences, and made sure to break up our questions to sound the least intimidating.
Directing participants' focus towards design
We realized that, as our interviewees hadn't been part of such design research before, their natural inclination was to comment on the quality of data that is being provided rather than the presentation itseslf. For the later half of our interviews, we were able to shift their focus towards the design of the website, by being more specific about our background, research interests and what we were looking to get out of the interview.
Phase 3: Concepts and Prototyping
Recruiting participants
We did not hear back from a lot of the places we reached out to online -- I eventually decided to visit a center closeby, where 3 people volunteered to be part of our project till the end. I realized, in the absence of a pandemic, we would be more successful approaching people in person, as it allows us to estabilish a rapport.
Survey Responses
The survey could not gather enough responses within the time period for sufficient quanitative analysis. In retrospect, we should have anticipated the difficulties with our user group and should’ve started reaching out in the first phase.
Unexpected set of issues
The survey could not gather enough responses within the time period for sufficient quanitative analysis. In retrospect, we should have anticipated the difficulties with our user group and should’ve started reaching out in the first phase.
Extracting information from Interviews
I was initially not sure about how best to extract information from an interview. Borrowing from what we learned in class, I concluded that working with another teammate to conduct the interview would give us the best chance. I asked Linda to initiate the interview and ask the more generic questions. On the other hand, I made notes and when my turn came, I focused on asking more exploratory questions based on the interviewee's replies. Splitting the interview in this manner allowed us to frame questions on the fly, allowing the interviewee to open up.
Transcribing interview data
Transcribing and analyzing the large amounts of data generated through an affinity map took a lot more time than we expected and I felt that we should have given ourselves a larger time frame for this process.
Brainstorming with an open mind
Brainstorming with the team, I learned, required me to keep a more open mind. Many ideas that I felt strongly about, did not resonate greatly with my team. Eventually, I had to make sure I was not too attached to a particular idea and was prepared for it to be rejected. I learned that during brainstorming, it's important to patiently communicate your ideas and why you strongly feel about them.
Phase 3: System Prototype and Evaluation Plan
Goal: Select one out of the two design concepts to move forward with, implement a detailed prototype of its interface and develop an evaluation plan.
Phase 3: Ideation and Feedback
Goal: The goal of this phase was to ideate 3 different concepts based on our findings from the previous sessions and settle on one low fidelity prototype based on user feedback.
Goal: Once we identified the broad themes that emerged out of our user interviews, we spent a week braistorming concepts. We translated our ideas into rapid, lo-fidelity figma prototypes and sketches with the aim of generating as many ideas as possible. We narrowed down our ideas to 2 concepts that looked to address the 2 different groups of users that we noticed across interviews. After getting feedback from our client on these concepts, we began protoyping these concepts in higher fidelity for user testing.
Map as an entrypoint for exploration
Through our user interviews we learnt that a large perecentage of users liked to spend some time exploring the map and comparing their hepatitis data in their country with neighboring countries. However, as one user pointed out, the existing map was not intuitive enough to support these interactions.
The existing map's focus on being just as an entrypoint to country dashboards was restricting, especially when their users were also interested in deriving comparisons. To realize the potential of this screen in giving a quick overview about trends across countries, I made use of the empty blue space on the map and included a box that would serve as an information point.
I also combined multiple maps on the existing page into a single map, and included a map switcher. Next to it, I added an input bar where users could adjust the overview information they see in the box.
Revamping the dashboard layout
Through user interviews, I learnt that various elements of the existing layout on the right were largely inaccessible to users. The nested tab structure, in particular, was not working with 2 users surprisingly not completely lacking awareness about important tabs that were hidden underneath HBV and HCV. During a focus group session with other HCI researchers, it was agreed that the tab structure for navigation did not feel natural and intuitive.
Keeping all the feedback in mind, I redesigned the page attempting to make sure no navigation elements were nested. On the left side is a cleaner navigation system with a sticky sidebar and radio buttons to switch views between HCV and HBV. The sticky sidebar was important to address user feedback about often getting lost in the page and having to do a lot of scrolling during navigation.
Additionally, I redesigned the cards conveying data to be bigger, in an attempt to give users more visual information while skimming through the page, and reducing the cognitive load. Its contents are detailed below:
Redesigning the data cards
During user interviews, users talked about visual infographics being more helpful to them. Graphs that were previously hidden in the nested HBV/HCV tabs, were included in each health card combined with color for visual cues. In addition, users would be linked to a more detailed graph on clicking the "see chart & detailed data button".
Introducing detailed comparisons
Given how common it was for users to compare between countries, it was important to include a feature that allowed them to view a side-by-side comparison. The map allowed users to compare data on a high level, while this view allowed them to go deeper and view all available data for each country.
Redesigning the PDF Report
In addition to the world map, and country dashboards, the PDF report was another channel that users liked consuming data through. However, across 2 of our interviews, users complained about confusing infographics that required them concentrate a lot to comprehend the data. They also talked about how visual cues such as color help them in skimming through documents.
Keeping this in mind, as well as the extremely long length of current PDFs, I redesigned infographics to be more clear and use space efficiently.
Overview & Contribution
Ideated 3 out of 6 design requirements
Created Hi-Fidelity prototypes for 60% of the application:
1. Designed Sustainability themed dashboard
2. Designed My Carpool Section for Carpool Management
3. Contracts to ensure accountability
4. My Parking to find an optimized parking lot
5. Route to view carpooling route
Ideated 1 out of 3 design concepts
Collected user feedback on design concept
Designed low-fidelity prototype
Ideated and sketched 2 key design concepts
Collected developers, focus group & stakeholder feedback on design concepts
Took mid-fi prototyping responsibility for user interaction with data viz, reducing cognitive overload in country reports, & presentation of policy environment.
Design Requirements
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
Design Space Critique 2
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
Design Theme
dsfdsfs
Prototype
kjnnkjj
Challenges & Reflections
sdfsdf
The Process
After vs Before : Overview page
After vs Before : Country Dashboard
New Feature: Compare between two countries
New Feature: Filter data
More Details coming soon!
Lessons Learnt & Reflections
Estabilishing a design direction
Even though we had more clarity now about the major issues users were facing and their preferences, we were unsure about how we would be redesigning the current website to address these. My solution to this was to have many brainstorming sessions with the aim of generating as many ideas as possible. I took charge of these sessions and came up with 2 broad concepts that looked to target different types of user needs. Once we had these 2 concepts to guide our efforts, the remaining design phases were just a matter of translating our ideas through figma prototyping.
Estimating the feasibility of my ideas
Our client, CGHE, were collaborating with a development firm in the UK for management of their website. In order to make sure our designs were something that was feasible, throughout this phase we had multiple calls with the developers where we got feedback on our ideas.
Concept Feedback
I had to let go of a concept idea that I strongly felt could’ve worked. During the feedback session, users introduced us to some of their reservations and issues they could face. We then decided that addressing those issues would be beyond the scope of this project given the time constraints.
Time Management
Time management was a major issue in this phase. It was very difficult to come up with concepts, wireframes, recruiting participants, conducting feedback sessions, and analyzing our data. Due to the time constraints, we were unable to spend as much time as we would have liked to develop our wireframes.
Conducting feedback sessions with the visually impaired
Since our user group inolved the visually impaired, we did not know how to proceed with user feedback. We were unaware of how to conduct these sessions online since we could not share our sketches or wireframes with our users. We eventually learnt that we could explain our concepts and wireframes in great depth by verbalizing each aspect of the design and allowing users to provide feedback on each idea individually.
Dividing work
We learned from the previous stage, that ideating with 4 people can sometimes be chaotic. As a result, we had a more organized process for this stage. While all 4 of us agreed on the rough layout of each section and the features each of us thought were important, the workload was clearly divided among the 4 of us based on each person's strengths and interests. This allowed each of us to focus on separate problem spaces.
Consistency in design
While this division of work ensured smooth progress, we left little time to put the screens together. As a result, the design seemed disconnected at certain places with different design styles and ideologies intersecting. Looking back, we should have given ourselves a few more days to put together screens and minimize style differences to ensure a unified experience.
Phase 4: Testing & Feedback
Goal: Test the prototype using a modified version of the evaluation plan created in phase 3 to gain feedback.
Phase 4: Prototyping & Testing
Goal: To convert our designs into a high fidelity prototype, and make it accessible to our users for further testing.
Phase 4: Testing & Final Iteration
Goal: After having multiple rounds of discussions with our clients and developers at different phases of prototype design, we looked to test an interactive prototype with their users. The usability testing sessions were think-alound and task-based.
Users highlighted several usability issues that we overlooked while designing. I wanted to make sure what we deliver to CGHE at the end of the semester was a complete design that incorporated all user feedback. Once we completed testing, I worked on the design for a final time to address the different issues users had with the prototype and make the user flow more coherent. We then presented this final prototype to our client.
Tweaking map interactions to be more natural and intuitive
During the usability tests, users found some elements of the new map design to be confusing. Users took sometime to understand the connection between the overview data input box and the overview box. In the final iteration of this design, integrating the two into one box provided a more natural user flow. Secondly, making use of a hover box was a more cleaner and natural way to allow users to compare between different countries.
Designing dashboards to be more informative
In the usability tests, users found it difficult to navigate between the different data views. Some users struggled to switch on the comparison mode. As a result, in the final iteration, I focused on making segementations between different views more clear and central to the experience.
Users mentioned they would like to get as much information as possible in the first glance. Another focus of the final iteration was to provide a more comprehensive overview at the first glance.
Detailed View
Our user interviews showed that epidemiologists and policymakers are most concerned about sources of data. This view was focused on users wanting to go deeper and analyze the origin of data points.
Facilitating a more visual mode of comparison
I designed the 3rd view to allow users to easily compare between different countries. Staying consistent with other views, users have the option of comparing visually as well as numerically.
Customizable reports for easier sharing
In the conceptualizations phase, I advocated for a UX that removes the element of navigation and focuses more on giving everything the users are looking for in one screen.
While a drawback of that approach was that users need to know what they're looking for, a solution we agreed to was integrating it as a feature of data dashboards.
In our user research, there were a group of users that loved being able to print PDFs for their stakeholders meeting. They liked having everything in one place, but however, complained about the length of these reports. This feature allows them to generate their own reports, and be in control of what they are printing.
Overview & Contribution
Voted for 2 Design Requirements for evaluation
Conducted a 30-minute expert evaluation
Designed Qualtrix form with SUS scale for further feedback
Transcribed interview and analyzed findings using affinity map
Reflected and summarized design process and future work
Designed hi-fidelity prototype
Integrated haptic and auditory feedback
Conducted 1 usability test and 1 expert evaluation
Designed hi-fidelity prototype
Conducted 3 out of 5 task-based usability tests
Collected feedback from users, stakeholders and focus group
Presented and handed over final designs to developers
Evaluation methods
dfdsdfs
Findings
sdfdsfs
Future Work
fsdfsdfds
The Process
More Details coming soon!
Lessons Learnt & Reflections
Helping the users be more patient
An interesting occurence I noticed in early interviews was that some users were nervous while testing the prototype. This caused them to overlook many parts of the design, and fluster when it did not work the way they expected it to. To investigate this further, in the later half of the interview, I made sure to prompt the user to simply explore the screen for 30 seconds. By not giving them a task to do immediately, I noticed that users got more oriented to the prototype and the testing environment. Once there was some silence as they were allowed to explore, I noticed users were more calm and patient in doing the tasks. This helped me minimize user errors that might have occured due to their inexperience with usability testing studies.
Choosing a problem space
While discussing our problem space, I had to be careful that the goal we were agreeing to was neither too specific, nor too broad -- allowing us to approach the upcoming stages with a direction as well as an open mind
Creating a remote and accessible prototype
News of the new Omicron variant made it impossible to use paper prototypes for testing. The visual impairments of our user group made it difficult to test the prototype remotely considering that none of the protoyping tools are compatible with screen readers. Utilizing the voice feedback beta feature in protopie, along with haptic feedback I was able to emulate an accessible application.
Cognitive load on users
However, our users were overwhelmed by the steps invovled in accessing this prototype on their mobile device. As a result, we had to improvise and change our method of testing.
Coding a screen-reader compatible prototype
Due to overlapping deadlines, we didn’t have the time to code an application that would be compatible with screen readers.
Increased understanding
The final stage of the design process had the least number of challenges involved. I felt that we had grown closer as a team, and knew each other's strengths and weaknesses.
Time constraints
A challenge here was the short amount of time we had for this stage considering it was the end of the semester with many different deadlines. Our professor recognized this and helped us conduct a "discount" evaluation instead. Instead of connecting with users from our actual user group, who might be busy with end-semester deadlines at this point, we were allowed to interview peers from our class considering them as experts. As a result, we had organized sessions where each of us gave insightful feedback on the different prototypes.
Prototype bugs
Another challenge that we could've easily minimized with better planning involved issues with the final prototype. Due to the large number of interactions and a short amount of time in hand, we could not design a prototype with different user preferences for the 8 onboarding questions. As a result, user interaction was limited to the persona at times, and users found it difficult to recall its details and the preferences they were able to select. In the future, to avoid such confusion, I believe it would be important to create a prototype for all the different states ensuring a smoother testing experience.
The Final Iteration
Goal: An issue with screens in the previous phase was that we did not spend enough time refining the design. The design style looked disconnected to me in certain areas and I looked to rectify those in this phase. I was in charge of all the work since this wasn't part of the final deliverable
Overview & Contribution
Integrated all feedback from evaluation sessions:
1. Updated Onboarding Screens for a cleaner look
2. Refreshed Discovery & Matches Screens
3. Added dialog boxes to reflect status
4. Restructured carpooling onboarding to reduce cognitive overloadsign process and future work
5. Updated Contracts, Routes, My Parking to look cleaner
%2024.svg)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
