Civis: A Citizenship
Test Prep App
What is the Citizenship Test?
The US Civics test is part of the naturalization process to become a US Citizen. From getting the notice to taking the test, the participants usually get about 2 weeks to prepare.
What is my role in the team?
I worked with 3 other designers on this project, including 2 visual design students and 1 other interaction design student.
Step 1: Secondary Research
We researched demographics about the test takers. One important info was that our users are relatively older, around 35.
Step 2: User Interviews
We then interviewed 3 people who had taken the citizenship test before to understand how they prepare for the test and why.
Step 3: Usability Testings + Card Sorting
At last, we conducted 2 usability testings and did card sorting with the 2 participants.
DECIDE ON IMPROVEMENTS
Goal 1: Create consistency and clarity
We will reorganize the information both through text and visual elements. In addition, we will make sure all interactions are consistent in the app.
Goal 2: Show progress of the users
We will create a home screen that shows the personal progress. The visuals on the home screen should separate the overall progress and progress for different test formats.
Goal 3: Improve the overall visual design
The new visual system will make the app easier to read and understand with better value contrast and informative color selections. Moreover, it adds credibility to the app as a test prep tool.
START WITH THE FLOW
This is the flow chart of the original app. The main screen has way too much information so it looks too overwhelming.
We decided to remove and combine some sections and add more depth to the app structure.
After multiple iterations, we decided on the first new flow for the app. We added an onboarding, an audio overview and different types of tests.
THE "LEARN" SECTION
I took over the "learn" section in the app. I wireframed to explore the flow of the section and the UI of each segment.
MEDITATE MORE ON THE FLOW
As a team, we decided to get rid of the categories. We also decided to separate card and list/audio after many rounds of feedback, discussion, and testings.
We tested our prototype with 3 users including 2 new participants and 1 participant from the previous session. Through the testings, we validated the flow and some key interactions.
THE HOME VISUAL STRUGGLE
As a team, we went through many iterations for every screen of the app. But here I will use some selected versions for the home screen to show you the visual struggle I went through.
HORRIBLE TAB SCREENS
Honestly, the third version of the home screen is not bad. But we had to apply the same visual language across the app. That created problems. Our tab screens simply looked... sad.
MORE HOME SCREEN ITERATIONS
After trying a lot of other color palettes and experimenting different visuals for the tab screens, we decided to bring back the dark blue to enhance the visual appeal of the app.
MUCH IMPROVED TAB SCREENS
We tried to make each tab screen visually different to emphasize their unique functions. In addition, we used similar swiping interaction to bring clarity and unity to the app.
It was my first time working in a team of 4 designers. Teamwork was a lot more challenging when there were simply more opinions. However, the productive discussions led to the good work in the end.
It was also my first time working in a team which one of my teammates cried after our first critique. But we ended up submitting something we all could be proud of.
During this project, I learned to hold back my emotions that were negative to the team. Instead, I tried my best to be positive and supportive.