Founder, lead designer
Civics Studio
Utilizing government open data, Civics Studio is an app to that helps Secondary school students learn about U.S. foreign aid in a highly interactive way. It is a user-friendly digital tools that educators and students can use to supplement existing secondary school civics curricula, particularly modules on the executive branch and federal budget.
My role
Tech team member - participated in all phases of the product process; led the ideation and design phases
Duration
Q3, 2022 - Q4, 2024
Team
1 Product Manager, 1 Agile team lead,. 1 Frontend engineer, 1 Backend engineer, and 1 QA engineer
Constraints
We are partnering with a start up geography app in this project, and they have technical limitations. We also might not be able to fully build the product during this product life cycle.
Challenge
How might we modernize civics training in secondary schools with open federal data?
Current probelm
In recent years, classrooms across America have prioritized the study of science, technology, engineering, and mathematics—often, at the expense of civics training. Traditional delivery methods, like classroom lectures and off-site trips, fall short of meeting students where they are: online. And the growth of online platforms, though welcome, is still inadequate in familiarizing students with open data and digital tools to navigate a world of disinformation. These inadequacies will only deepen as COVID-19 motivates more of the nation’s learning to move online.
Solution preview
A redesigned digest page with inline edit, expandable preview, and many more improvements.
Impact
11% increase in user adoption and 22.5% increase in account adoption.
Process
We talked to potential users, identified 4 personas, explored data and did 4 rounds of design feedback.
Below diagram only illustrates user's interaction in the Asset Digest page (a page that shows assets' information. The two other areas where users would interact with facial recognition are uploader and admin.
Research
We conducted interviews with potential customers of three identified key personas: educators, students, civics workers
Competitor analysis
We validated with 5 users want actionable insights and cross-domain data. They also need support in interpreting the data and clear guidance on their next steps.
💡
Civics Studio's key advantages are social interaction and group learning
Civis student allows students to connect knowledge with real-life scenario
Civics Studio might need to build a huge case bank to compare with big companies such as iCivics, but this process will develop overtime.
User interview
We validated with 5 users want actionable insights and cross-domain data. They also need support in interpreting the data and clear guidance on their next steps.
💡 Key research Insights:
Provide more clarity into what would happen if they click “skip for now.” It does not tell them where these photos will end up if they are not reviewed in the upload flow.
Auto tag all photos with the same face after upload.
Data exploration
My teammate Sefa (Data Analytic focus) took a lead in this phase and shared with us his discoveries as he did his research. Knowing that data exploration was not my forte, I tried my best to understand Sefa's discovery as well as what types of data were available in order to lead the design phase.
💡Need to evaluate and understand the qualitative data to connect the meaning behind the categories within the datasets.
How the effectiveness of aid is measured, extensive reports but many different reporting systems and metrics to gauge ROI
Building an awareness of the interrelationships between different state agencies
Example: Maternal and Child Health (MCH) $619.6 million in 2018
Design
I created two versions of lo-fi prototypes. After feedback from user advocates and area expertise, I chose one version over another. We developed the prototypes based on the feedback, and then got a second round of feedback.We drafted another version of paper prototype, which later was turn into a high-fi prototype.
I created 4 tasks flows for facial recognition in different areas of the app, below is one example: task flow for facial recognition on the Digest page. These tasks flows were based on assumptions of how users would use Facial Recognition, considering persona knowledge and previous research. I wanted to validate these assumptions through user interview.
Using assumptions from PMs and insights about our personas, I drafted task flows and designed solutions aimed at addressing the problem. I refined the designs after each user interview, incorporating feedback, and validated the updates with subsequent users.
Pivot
Understanding stakeholders' perspectives and making design adjustments that balance business goals with user needs.
We showed mid-fi prototype to the individuals we interviewed during the research phase and gathered their feedback:
I led the team (VP of product, PMs through a 6 thinking hat exercise to seek alignment.
💡 Insight 1: Delete the guess budge feature
It is really hard for students to know how much the government gives, and it does not serve the educational purpose.
Insight 2: Implement Bloom's taxonomy in the learning process
It is really hard for students to know how much the government gives, and it does not serve the educational purpose.
Insight 3: Increase group-learning features, such as highlighting
The app allows students to see what other students highlighted and commented, thus create an environment for group learning.
(Part of) Previous IA
(Part of) Updated IA
Hightlights
Understanding stakeholders' perspectives and making design adjustments that balance business goals with user needs.
Onboarding
Impact & reflection
Articulating your design decisions
Impact:
🎯 Impact:
This project has been transferred to Suffolk University's Sawyer Business School for further development and future iterations. Additionally, it was showcased to the Census Bureau and has been incorporated into their repository of innovative ideas.
Takeaways:
Engage with the tech team early to understand and discuss technical constraints.
Balance dreaming big with practical considerations to foster innovation while staying grounded.
Seek input from subject matter experts to leverage specialized knowledge for better project outcomes.
Consider creating a component library for one-off projects to streamline development and maintain consistency.