Deeta
Deeta is a web platform committed to helping people tell their stories through data.
Overview
I developed a new product concept and prototype for the web application Deeta — a solution intended to fill an opportunity area at the intersection of empowering people and visualizing data.
KEY DELIVERABLES
PROCESS WORK
-
MY ROLE
UX Researcher | UX/UI Designer | User Interview & Usability Testing Moderator
-
METHODS
User Interviews | Picture Cards & Sorting | Gap Analysis | Semantic Differential | Competitive & Comparative Audit | Value Opportunity Analysis | Task Analysis | Affinity Diagramming | User Goal Statement | User Stories | Task & User Flows | Screen Flows | Low-Fidelity Prototyping | High-Fidelity Interactive Prototyping | Usability Testing | Think-Aloud Protocol | Design Systems & UI Kits | Style Guides
-
TOOLS
Figma | FigJam | Otter.ai | Zoom | Google Sheets | Google Docs | Keynote | Pen & Paper
SUMMARY
Key Points
Problem: Develop a new product concept within the problem space of making data visualization more accessible, with a particular focus on nonprofit and small-business stakeholders.
Process: Working as a 1-person team, I evaluated the existing experience using internal (competitive/comparative audit, value opportunity analysis) and user-focused (picture cards, gap analysis, semantic differential) methods in order to identify key workflows, painpoints, and attitudes to drive the development of user goal statements and stories
Findings: Opportunities for integration with existing data platforms, educational components, and guided processes, while focusing on creating an experience where users feel more comfortable, confident, and empowered
Solution: Working from a starting point of with lo-fi sketches, I developed a mid-fi interactive prototype for independent (task analysis) and user (usability testing, think-aloud protocol, value opportunity analysis) evaluation, in order to inform revisions in a hi-fi interactive prototype with associated documentation
Challenges: In order to deliver educational components that would empower users, without being visually or cognitively overwhelming, I implemented different types of educational components in different scenarios — such as coach marks during onboarding to set the stage, and in-context guidance and suggestions during the visualization process
Reflection: This project provided the opportunity to build a visual language and system from the ground up, while exploring the intersection of design, data, and democratization — an incredibly exciting space for combining cross-disciplinary interests, experiences, and passions
PROBLEM
Problem Statement
Data is everywhere in today’s digital world, but it is not always accessible. In the educational sphere, there are often barriers to entry into STEM fields and associated formal data-related training (particularly for womxn and underrepresented people of color). This translates into the workplace as well; smaller organizations or certain industry sectors may lack the tools, resources, and/or personnel to work effectively and efficiently with data. I worked to address the problem of making data visualization more accessible, with a particular focus on nonprofit and small-business stakeholders who need to use data to support their organization’s mission by providing communication- and marketing-related services to increase trust, credibility, and transparency
In the context of data visualization, spreadsheet-based tools such as Excel and Google Sheets are widely used in both the educational and professional spheres for working with data, but provide limited in-context guidance and aesthetic options for creating custom visualizations.
Canva effectively provides an accessible means for democratizing the graphic design process, but tools and integrations for working with complex data to create visualizations are limited and require notable manual effort to implement.
Understanding the Existing Experience
To gain a more comprehensive understanding of the problem space, market landscape, and user needs, goals, and values, I conducted a competitive / comparative audit and market-based value opportunity analysis, as well as user interviews using picture cards, gap analysis, and semantic differential methods with four participants with experience in the nonprofit marketing and communications space.
FigJam board (for participant P2) used to facilitate picture card, gap analysis, and semantic differential activities during user interview sessions.
A competitive / comparative audit was conducted on key tools identified as important to participants’ current workflows when working with data: Excel, Google Sheets, and Canva.
A value opportunity analysis (market analysis) was conducted on key tools from the competitive / comparative audit.
Screenshot of tables (Google Sheets) used for for processing semantic differential data, annotated with key patterns and findings (FigJam).
Screenshot of affinity diagramming (FigJam) used to synthesize independent and user research data.
Research Findings
The synthesis of research data revealed several key themes and insights into user workflows, painpoints, and attitudes in the context of working with data.
Workflows
integrate data from various sources
gather lightweight insights
communicate results to collaborators, partners, and other parties.
Painpoints
organizational challenges: time, staffing, funds
knowledge-based challenges: expertise, training, direction
technological: centralization, collaboration, version control
Attitudes
data viewed as a highly valuable as a communication tool
data also viewed unpleasant, difficult to work with and understand, and overall inaccessible.
3.9/7
average self-rated comfortability / confidence in working with data
6 years
average experience working with data in a professional setting
2.3/7
average rating of the accessibility of data as a form of communication
User Goal Statement
Based on these research themes, I developed a user goal statement for the primary user group of nonprofit and small-business stakeholders.
User Goal Statement
Our user group is nonprofit and small-business stakeholders who need approachable, integrated, and customizable data visualization options, in order to help them feel connected, confident, impactful, and empowered to efficiently communicate data-related information so that they can foster trust and credibility in organizational relationships.
User Stories
In alignment with this user goal statement, I also created user stories to help develop empathy for and inform the exploration of features and functionalities that would meet primary user needs in the context of key task and user flows that emerged during the research process.
User Story #1
As a marketing manager, I want to be able to work with data in a centralized location, so that I feel organized and am able to have an efficient workflow, while also feeling connected and informed about the data that I have and how it fits into my workflow, team, and organization.
User Story #2
As a fundraising organizer, I want to be able to understand what data is important, how to interpret it, and what I can do with it, so that I can feel comfortable and confident when collecting, analyzing, and making decisions based on data.
User Story #3
As a communications director, I want to be able to efficiently and effectively visualize data, so that I can feel empowered and impactful when using this information to support communication efforts to build trust and credibility in my organization.
SOLUTION
Sketches
Guided by user goal statement and stories, I created hand sketches as visual depictions to explore potential solutions what would address user needs and painpoints, though task flows, screen flows, and wireframes.
Sketch 1. This product concept could include different user groups who have different goals for using the platform. For example, the account creation flow might incorporate distinctions for various user and company types. This could potentially lead to an emphasis on different features an functionalities, as well as discounts, free services, and enhanced capabilities.
Sketch 2. The landing page may provide an overview of any projects, data sources, visualizations, etc. that the user has already created (with sort and filter capabilities), along with quick links and search features to facilitate efficiency and engagement in the data process. Upon first login, users may be guided through basic features and “how-to” prompts in the form of coach marks.
Sketch 3. Users will be able to create a new visualization within a “studio.” The studio will include guidance on the steps needed to create a data visualization. In studio mode, the header and side nav bars change. In-context guidance and/or popup guidance on hover will be included.
Sketch 4. Users will be able to select and customize data visualizations from a templated library, or create one from scratch if they are comfortable and confident, and have the time and bandwidth to do so. Users who are not sure what data visualization to create will be able to navigate through guided prompts to get recommendations/suggestions that best fit their needs.
Interactive Prototyping
Building on low-fidelity sketches and wireframes, I moved into creating a mid-fidelity interactive prototype for the primary task flow of creating a data visualization, to be used in user evaluation sessions.
Landing/home page with a mix of navigation language and placeholder content to evaluate against user expectations.
The data visualization studio pairs progress trackers on the left sidebar with primary actions on the right panel for a guided, step-by-step process.
Users can learn about different types of charts and graphs, as well as select a data visualization, from a templated library.
Users can receive tailored data visualization recommendations based on data and user inputs solicited through a series of guided prompts.
EVALUATION
Independent & User Evaluation
To gain insight into usability, task flows, and product value, I conducted an independent task analysis paired with user evaluation sessions using scenario- and task-based usability testing, think-aloud protocol, and value opportunity analysis methods, in order to identify areas for improvement in the prototyped solution.
Task analysis was used to evaluate the main task/user goal of creating a data visualization, identifying areas of cognitive challenge, opportunities to deliver educational content, and opportunities for streamlining.
Screenshot of affinity diagramming (FigJam) used to synthesize independent and user evaluation data.
Findings & Recommendations
Evaluative research revealed several key issues and opportunities to be prioritized for revision:
Increase clarity and consistency in the chronology of the data source and data visualization selection process.
Provide additional context with regard to educational components and features.
Increase consistency and standardization in terminology and navigation.
Incorporate additional opportunities for personalization and the associated streamlining of user workflows.
In response to these findings, I implemented a series of recommendations in a revised high-fidelity interactive prototype.
Problem 1: Two out of three users expected data source selection to occur before data visualization selection, and expressed confusion and concern about how data would be pulled into the platform for visualization when entering the studio.
Recommendations: Restructure the navigation and progress trackers within the studio to match the dominant user mental model, and align landing page navigation and onboarding processes with this restructuring, in order to increase clarity and user confidence.
Problem 2: Users noticed learning resources available within the tool but the exact functionalities of these and other navigation options/features were not fully understood. For example, 3/3 users expressed confusion when coming across the initial Deeta Flock navigation option (language/terminology & icon). (Revised onboarding is pictured above.)
Recommendations: Call out and preview key features and resources during onboarding to help set expectations and provide transparency, and implement coach marks upon first log in to ensure that users feel reassured in accessing the tools that will best suit their needs.
Problem 3: Users expressed uncertainty when encountering certain terminology (media, stats & data, elements, studio) and navigational features (two search bars on landing/home page, start from scratch in studio).
Recommendations: Implement more standard terminology, tooltips for in-context guidance, and search bar help text, in order to ground users and set expectations throughout the experience.
Problem 4: Users expressed the expectation of personalization on the landing page and the integration of branded customizations during the data visualizations process.
Recommendations: Implement accelerators, such as customizable quick links and access to recent files on the landing page, and incorporate company branding into the onboarding and visualization formatting processes., in order to increase user workflow efficiency and encourage customer loyalty.
DOCUMENTATION & DELIVERY
Documentation
In order to document key project standards, guidelines, and design choices, I created a style guide and video demo walkthrough.
The style guide provides basic documentation of and usage guidelines related to logo, color, typography, and basic UI elements (buttons, cards, educational components, navigation, progress trackers, search, and filter) in Deeta’s design system.
The video demo walkthrough (Loom) calls out key features and functionalities in the interactive prototypes and ties them to brief design rationales, framed within a user’s perspective.
Delivery
I developed a 5-minute presentation focusing on process and design rationale to communicate my research findings and prototyped solution in relation to the problem space of democratizing data visualization.
The presentation included a brief background on the problem space, an overview of methodologies and research findings, challenges faced throughout the process (pictured above), a value-focused walkthrough of the prototyped solution, and next steps.
The presentation was delivered in-person to members of other internal design and development teams, and remotely (via Zoom and Facebook Livestream) for other design and community members.
CONCLUSION
Deliverables
Next Steps
Building on the revised solution, the prototyped feature set could be extended and expanding into secondary user groups. One of these user groups could include more research and data-oriented professionals who may be more comfortable working with data but still want a more efficient way to do so. Potential solutions could involve incorporating more features for analyzing and reporting, along code-based components to fit into other workflows.
In addition, further usability testing and task analysis could be conducted with a fully built-out prototype, in order continue evolving an understanding of how to best help users complete various goals in the most streamlined flows possible, while minimizing cognitive complexity.
Key Learnings & Takeaways
This project provided the opportunity to explore the intersection of design, data, and democratization — an incredibly exciting opportunity space for combining cross-disciplinary interests, experiences, and passions.
I practiced developing design standards and usage guidelines, drawing inspiration and componentry from UI kits to work toward creating a consistent visual language.
I worked to understand nuances in how and when to deliver educational components in the user experience — from coach marks and onboarding, to tooltips and in-context guidance.