Email

stellading123@gmail.com

Phone

+2066053200

Linkedin

https://in/dingstella

Yelp

https://yelp/dingstella


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.

 

 

 

FINAL DESIGN

 

 

INITIAL RESEARCH

 

 

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.

 

VALIDATION

 

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.

 

 

FINAL SCREENS

 

 

INVISION PROTOTYPE

 

FINAL THOUGHTS

 

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.