Product Design • Web & Mobile • Non-Profit
San Diego Taxpayers Educational Foundation (SDTEF)
Crafted a data visualization website aimed at enhancing the user experience and accessibility for businesses in need of statistical insights about their customer base
Role
UI/UX Designer
Duration
Sep 2022 - Jun 2023
Team
1 Product Manager
1 Engineering Manager
5 Developers
3 Designers
1 Stakeholder
Tools
Figma
Tableau
Skills
Product Thinking
Interaction Design
Visual Design
Client Communication
Overvıew
Context
Who is SDTEF?
Our client, SDTEF, is a non-profit that serves as both a public policy think tank and a government watchdog group to provide research on economic and quality of life issues affecting taxpayers, supporting the public, civil leaders, and policymakers.
Problem
Low number of members
Our client, SDTEF, faced challenges with their digital platform, including limited availability of statistical data, confusing structure of membership options, and low subscription service sign-ups due to poor user experience.
They seek a comprehensive digital solution to improve user engagement.
Current Problems
Limited availability of statistical data
Confusing structure of membership options
Low subscription service sign-ups
SOLUTION
Sneak peeking to my final solution
PROCESS
So, how did I get there?
Research
Interviewing our client
Since our client is our main stakeholder, we conducted an interview with them to dig into their pain points and needs.
SDTEF believed that by implementing a data visualization website, they could offer a user-friendly platform facilitating customers' easy access and interpretation of crucial statistical information, thereby boosting their subscriber count.
Key Insights
Based on the interview, the primary problems were:
Limited availability of statistical data
Confusing structure of membership options
Low subscription service sign-ups
Stakeholder wanted...
....to have membership tiers with different permission levels: free memberships & paid memberships.
...to have admin UI to manage the website.
Current website: Confusing membership and signup pages
Problem Statement
How might I streamline the user experience to help SDTEF expand their subscriber base?
ideation
Turning insights into concepts
We worked together with our clients to generate solutions for our challenges. After careful consideration, we settled on the following ideas:
Current Problems
Limited availability of statistical data
Confusing structure of membership options
Low subscription service sign-ups
Potential Solutions
Enhanced data visualization through Tableau integration
Simplified membership tiers to alleviate confusion in structure
Streamlined subscription flow with fewer steps to encourage higher sign-ups
Final Feature List
In addition to exploring potential solutions, I iterated on both the MVP (minimum viable product) and V2 (version 2), which represents the subsequent iteration of the product with added features and functionalities. Much of the MVP framework, encompassing essential features necessary for the product to operate, was initially established based on the predetermined expectations of our stakeholders. Throughout the project, the project manager, engineering manager, and our design team continued to refine these iterations iteratively.
Minimum Viable Product (MVP)
Account creation
Free & membership tracking
Profile page for free users, members and admin
Admin View
Download option enabling users to retrieve CSV files from Tableau
Version 2 (V2)
Membership tiers page detailing subscription levels
Subscription payment page
Creating user flows to visualize the features
Client provided us a sketch of their vision. To visualize the features, based on that sketch and the competitive analysis, we created two user flows: Guest/Account User, and Admin.
Guest/Account Flow
It highlights the varied access levels to the data visualizations for different membership statuses, addressing our client's concern regarding low subscriber numbers. Users who browse the website without signing up can only access limited datasets, whereas those who sign up, either for free or a membership, gain access to more datasets based on their membership tier.
Flow 1: Guest/Account Flow
Admin Flow
To ensure our client can edit and add datasets after the handoff, I developed a separate admin flow with its own user interface.
Flow 2: Admin Flow
Sketching wireframes
In order to craft a user-friendly website, my initial approach involved developing low-fidelity wireframes.
Wireframe: Profile Page
Wireframe: Membership Page
Drafting low-fi mockups
In order to craft a user-friendly website and streamline the membership tiers page, my initial approach involved developing low-fidelity wireframes. These wireframes served as foundational sketches, allowing us to explore various layouts for presenting information. Among the options considered were incorporating a drop-down menu and opting for a straightforward display format.
Navbar
Full Name
Profile
email address
password
phone number
city, state, country
preferred language
edit
Membership
Type
Level
Subscribe
Footer
Low-fi: Profile Page
Navbar
SDTEF Membership
SDTEF Membership Levels
Sustaining
Debating
Dialoguing
Supporting
Info text
Footer
Low-fi: Membership Page
Design Iterations + Usability Testing
Making hi-fi design decisions
Building upon our low-fidelity designs, I translated them into high-fidelity decisions and conducted user testing.
User Testing 1 - Profile Page
Data Museum
Education
Homelessness
Municipal
Subscribe
Full Name
Free Member
Upgrade
San Diego Taxpayers Educational Foundation
The San Diego Taxpayers Educational Foundation conducts independent research studies on various issue areas to educate San Diegans and inform the advocacy efforts of the Association.
Profile
Profile
EMAIL ADDRESS
email_address@gmail.com
PASSWORD
##########
PHONE NUMBER
617-865-1487
CITY
San Diego
STATE
California
PREFERRED LANGUAGE
English
edit
Why should I upgrade my membership?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, sed do.
Upgrade
Design A
Minimizes excessive white space
Improves alignment for easier readability
Enhances left-to-right eye movement
vs
Data Museum
Education
Homelessness
Municipal
Subscribe
Why should I upgrade my membership?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, sed do.
Upgrade
Full Name
Free Member
Upgrade
San Diego Taxpayers Educational Foundation
The San Diego Taxpayers Educational Foundation conducts independent research studies on various issue areas to educate San Diegans and inform the advocacy efforts of the Association.
Profile
EMAIL ADDRESS
email_address@gmail.com
PASSWORD
##########
PHONE NUMBER
617-865-1487
CITY
San Diego
STATE
California
PREFERRED LANGUAGE
English
edit
Design B
User Testing 2 - Membership Page
San Diego Taxpayers Educational Foundation Membership
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, sed do.
Choose Membership Type:
Select Membership Type
Subscribe Now!
Membership Benefits
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
Free
Supporting
Dialoguing
Debating
Sustaining
Membership Types
Corporate
Firm with 10 or more employees
501(c) 4 or 6 with 10 or more members
Sustaining
Debating
Dialoguing
Supporting
$7,500
$5,000
$2,500
$1,000
Small Business
Household
Individual
Data Museum
Education
Homelessness
Municipal
Subscribe
San Diego Taxpayers Educational Foundation
The San Diego Taxpayers Educational Foundation conducts independent research studies on various issue areas to educate San Diegans and inform the advocacy efforts of the Association.
or Join for Free
Design A
Better hierarchy of information
Encourages immediate subscription
Higher scalability of membership benefits
vs
Design B
Design systems
Style Guide
Typography
Helvetica Neue and Open Sans ensure clear and understandable visualizations
Continuing with their original fonts maintains consistency
Strengthening brand identity across various platforms
H1 - Helvetica Neue, 40px, Bold
H2 - Helvetica Neue, 24px, Bold
H3 - Open Sans, 18px, Semibold
Body Text 1 - Open Sans, 20px, Regular
Body Text 2 - Open Sans, 16px, Regular
Color Palette
Passes the contrast ratio requirement with a score of 10.17 (minimum requirement: 4.5)
Leveraging the brand's recognizable logo colors to strengthen its identity
Limiting the use of two specific shades of red to prevent overcrowding, particularly in crucial data visualizations
Responsive web design
Desktop & Mobile
My design works well on mobile devices as well, making sure the visuals are clear and easy to see on any screen size.
Data Visualization Page
Membership Page
Profile Page
Final deliverables
Enhanced Data Visualization
Insightful data visualization options
Pre-account preview of data visualizations
Subscription-tiered data access
Subscribe for memberships
Membership plan selection based on organization type
Clear presentation of benefits and prices for all membership-organization combinations
Highlighting differences between membership levels
Manage your membership with your profile page
Clear communication of membership subscription benefits
Comprehensive overview of available features
Access to Profile & Payment information editing post sign-up
Admin UI for easier management
Manage the website
Edit and add Tableau data visualizations
Reflection
What would I do differently?
Deep dive into research
Due to time constraints, I couldn't conduct interviews with SDTEF regular staff or users of the data visualization. Not being able to directly interact with stakeholders limited my insights. Still, I analyzed available data and gathered feedback through surveys to compensate. However, given more time, I would conduct a more thorough and comprehensive research.
Key Takeaways
Effective communication in client projects
In my first client project, effective communication with engineers, managers, and the client was crucial. Despite initial challenges with client responsiveness and scope changes, consistent and detailed communication helped overcome obstacles and achieve project success.
Working under time constraints
Given the client project's developmental nature, meeting design deadlines was crucial. Adapting and being flexible helped me meet client needs, strengthen relationships, and build trust, all while sticking to project deadlines.
I had great team members throughout the entire design project. I'm grateful for their collaboration and support. ︎♡
Thanks for stopping by!
let's design connections together~
designed by aska
2024