RACHAEL HYLAND
The process to become an American citizen is already stressful enough. The last thing you need is to stress about the Naturalization Test as well. However, does the existing test actually prepare you to be a fully engaged democratic citizen? Not so much. To fully embrace your new role as an American citizen, you need to prepare beyond the test in a way that's practical, engaging and effective.
DURATION
6 months
(March 2020 - Sept 2020)
PROJECT INFO
First Capstone Project for Springboard UX/UI Program
Team of 1
TOOLS USED
Sketch
Marvel
Miro
Adobe XD
MY ROLE
UX Writing, UX Research, User Flows, Wireframing, Usability Testing, Style Guide Creation, Lo- and Hi-Fi Designs and Prototyping
Setting the tiny stage
The Problem
With time-consuming paperwork, ever-rising fees and a lack of clear and reliable information that necessitates a lawyer's expertise at every step, the process of becoming an American citizen is already hard enough.
On top of this, immigrants hoping to become citizens have to take a Naturalization Test to prove their knowledge of American history and civics.
The Solution
With all of these issues in mind, I developed my solution: CiviQ, an app that gamifies an individual's journey from American history and civics novice to bonafide expert.
In general, history and civics knowledge is low amongst the wider American populace due to apathy, a lack of robust and consistent education devoted specifically to these two disciplines and distrust of the current political system.
However, amongst immigrants to the United States who are hoping to become citizens, that knowledge is generally much higher, in part because this demographic has built-in motivation to learn about these topics due to the Naturalization Test requirement.
Of course, products currently exist that seek to teach civics and history, but they tend to be outdated, boring, impractical and ineffective at teaching the real skills one needs to fully participate in a democracy.
With CiviQ, I hoped to not only make the citizenship process a little easier for would-be citizens but also spread awareness amongst a motivated demographic about how knowledge and awareness can translate into political power. My reigning holy trinity throughout this process was to create a product that is PRACTICAL, ENGAGING and EFFECTIVE.
1) The study process is gamified through rewards (stars and stripes) you can earn by completing lessons, answering questions correctly on your first try and fulfilling your daily goals, 2) On quiz screens, users get enhanced feedback on correct and incorrect answers through an outline, button background color and an icon, 3) On quiz screens, users can access a "hint" at any time to help them answer a difficult question, 4) Study screens feature artwork reminiscent of the golden age of illustration to imbue the product with an air of optimism and inspiration, 5) Users receive encouragement in the form of targeted messaging when they've completed a lesson as well as a summary of their accomplishments and the rewards they've earned; they can also share their results with a "synchronized user," who is usually a family member or friend completing the lessons along with the principal user to ensure that users remain engaged through socialization and competition.
Talking to people about stuff
At this stage, I was unsure if I wanted to focus solely on immigrants studying for the Naturalization Test or on a more general audience of Americans interested in learning more about civics and history. To better understand potential users of a product like this and, by extension, what that product might look like, I developed a screener survey to select and interview potential users who met the following criteria:
-
Ages 25-44 (these are the most common ages at which people complete the naturalization process, according to DHS data (1)
-
Frequent (once a day or more or once every 2-3 days) consumption of news media (whether print or television) as interest in and knowledge of current events is positively correlated with interest in and knowledge of civics and history (2)
-
Those who have or will soon undergo the process to become a United States citizen, including taking the Naturalization test OR those who have experienced civics education in elementary, post-secondary or higher education in the United States
-
A higher than average awareness of and/or interest in topics related to civics
Making sense of the stuff
After conducting hour-long interviews with the above potential users on topics ranging from their interest in and awareness of current events, their motivations in studying for the Naturalization Test or Civics and what tools they find helpful for learning about new topics in general to their opinions on how civic awareness and engagement can be improved in American society and the education system, I decided to create an Affinity Map as a way to distill and organize my findings so that I could move forward in the process of creating a persona and thus have a clearer idea of who I wanted my target audience to be.
Creating an Affinity Map was instrumental in impressing upon me a sense of the widely differing needs and desires of the disparate demographics I interviewed. This exercise as well as my user interviews helped me decide that it would make the most sense to focus on immigrants studying for the Naturalization test as my main audience as attempting to make a civics and history learning app for the American populace as a whole would be the equivalent of creating a product meant to serve everyone that fails to serve anyone. I realized I needed to be much more specific and focused in my audience so as to better serve their needs and preferences. At this point, I felt ready to distill my findings further and create my persona, which was mainly an amalgamation of the "Renan" user and the "Ben" user mentioned above in my user interviews.
Who are you, dear
target user?
Renan and Ben were the two users I thought most clearly represented my ideal target user: someone who is educated, intelligent, curious, competitive, tech savvy and someone who has at least a 7th-grade level knowledge of English (as a minimum level of proficiency in English is required to pass the English portion of the Naturalization test). I also wanted my target user to be someone who needs a bit of a challenge and some motivation to learn topics traditionally regarded as boring and, at the same time, needs to be convinced that what they are learning is of practical value. Thus, I came up with "Luis." I chose Mexico as his country of origin as, according to the most recent DHS data available, immigrants from Mexico account for the highest percentage of naturalized citizens (3).
Going with the user's flow
Once I'd established what kind of flows I wanted to create, I began sketching the screens for my principal flow: an existing user with an account completing one of the beginner lessons. I then conducted guerrilla usability testing with five different users to get feedback and aid in the iteration process.
Now that I had a better idea of who my target user would be, I needed to get a handle on what flow(s) this user might follow. Since I envisioned this as a learning and educational tool, I thought it would be appropriate to focus on a single lesson that a user would complete to study for the Naturalization test. Since most people carry their phones everywhere and use them for just about everything, a learning app seemed like a convenient and practical option for someone who is also trying to learn about a new subject in the midst of their busy schedule. Because an account creation flow tends to be standard across products, I decided to focus on a flow that would showcase the product's uniqueness by creating a flow for an existing user with an account who is completing one of the introductory lessons.
Some of my initial ideas included:
-
"Synchronized users" or family or friend(s) who participate in lessons alongside you at the same pace to add more competition and socialization to the process
-
Different forms of rewards users could earn by completing lessons and getting answers correct, etc.
-
Users can post their achievements on a social network such as Facebook, share it with a synchronized user or post to a classroom if they were learning as part of an outside course
Testing stuff with people
Splash Screen
Inspired by Duolingo's friendly and charming mascot, Duo, I thought to create my own mascot: "Baldy," the bald eagle.
I reasoned this would serve as a friendly presence to keep people motivated while learning and would tie together the visual aspect of the app.
"Civvis" was my original name for the app, inspired by the Latin word for "Civics."
Although I was excited by the idea of an illustrated mascot as opposed to using photographic imagery, users in general didn't respond much to poor ol' Baldy, and I began to think that it would be difficult to incorporate consistent and high-quality illustrations without hiring a full-time illustrator.
Lesson Menu
I wanted to create rewards for users in the form of "stars" and "stripes" and display them prominently on the lesson menu screen.
I figured that the lessons would be stacked on top of one another in chronological or topic-based order with arrows or some other kind of button and imagery relating to the topic at hand.
In the bottom navigation there would be a "Home" section (the current screen), a "Connect" section for viewing a feed of other learners with whom you can connect, a "Compete" section that shows where you fall in a line-up of learners on that particular day (with an option to view your "history" as well) and your "Profile" screen where you can change your information and settings.
During usability testing, users expressed some confusion as to what "stars" and "stripes" were, so I knew I would have to make it clearer somehow down the line.
In addition, the bottom navigation was a bit unclear to users in terms of some of the functions of the sections and the iconography (or lack thereof in this case).
Main Study Screen
I originally envisioned the process to begin with one main study screen on which there would be a graphic/text element that contains the full text of the First Amendment, in this case.
Users would be able to tap on different colored segments of the amendment, which would lead them to different screens where they could study the amendment in more detail.
Users would also have the option to skip the study process if they're already familiar with the topic in question via the button at the bottom.
I also wanted to incorporate an audio element for those who would rather listen to the study segments.
Users didn't respond positively on the whole to this setup and regarded it with not a little confusion, so I bookmarked this as in need of serious iteration after this round of testing was over.
Detailed Study Screen
This is one of the screens to which a user would be routed when they tap on one of the highlighted strings of text in the screen above.
Here, they can review this section (the Establishment Clause) of the First Amendment in more detail, skip to the quiz if they're ready or, by tapping the arrow in the bottom righthand corner, move forward to view the rest of the detailed study screens in order.
In general, users expressed boredom with this set up because it forced them to read several paragraphs in a row of text before moving forward to the quiz.
Confirmation Screen
After reviewing all of the detailed study screens or tapping the "Skip to Quiz" button, users would encounter this confirmation screen, asking them to continue to the quiz or pause for a bit more studying.
Users responded well to this screen as it was a bit of an insurance policy against any mistakes in the previous study flow and provided them an opportunity to pause and assess their situation before continuing to the quiz.
Quiz Screens
This is what one of the initial quiz screens looked like. I decided that a progress bar was essential to keep users motivated and engaged rather than dropping off midway.
The only issue I had with these kinds of screens was that users expressed boredom that there weren't enough question varieties and frustration that some of the questions seemed too challenging and not based on the study material.
Playing with fancy tools
Sketching my initial ideas was an instrumental first step in the process because it allowed me to experiment with ideas I wouldn't sure would work in a quick, low-risk way and immediately get feedback from users on what was working and what wasn't. With this feedback in mind, I started solidifying my ideas through the wireframing process and created a wireflow of my main flow so as to produce more polished screens on which to base my hi-fi mockups yet still play it safe with relatively easy-to-produce wireframes.
I continued with my idea for rewards that users could earn through completing lessons, getting questions right on the first try as well as reaching their daily and even weekly goals. Some of my requirements for these rewards were the following:
-
Patriotically themed to tie into the app as a whole
-
Powerful motivators despite challenges
I decided to begin with the "First Amendment" as my first lesson as it is covered on the Naturalization Test and is an important foundational concept on which our democracy rests.
I also wanted to add a "Review" FAB to make it easier for users to return to lessons they'd previously studied and refresh their knowledge.
After the failures I encountered with my study and quiz screens clustered together during my preliminary usability testing phase, I decided to try something different: users would study each particular section of the First Amendment and then immediately answer two quiz questions so that the studying and quiz phases would be interspersed. This way, engagement could be maintained more successfully.
In this first iteration of the interspersal method, I decided to enable a back button so that users would easily be able to return to a quiz question's study screen to brush up their knowledge.
Since the interspersal method was itself much more flexible than my previous approach, I felt a more flexible back button would be appropriate.
I also decided to include a stopwatch feature for users who wanted an extra challenge. I mused that users who opted in to be timed could earn extra points for doing so.
Another way to bolster motivation was, of course, motivational messages or pop ups appearing after a user had selected the correct answer featuring, of course, "Baldy" the bald eagle who would serve as an adorable cheerleader, of sorts.
Upon completing a lesson, users would get a results summary that states how many stars (or points) they earned just by completing the lesson and how many they earned from the "rapid fire" category (i.e. when opting in to use the stopwatch) and with no wrong answers.
I wasn't quite sure how to incorporate the "stripes" (achieving your daily and weekly goals) other than to include a separate screen, but this ended up being too many screens to swipe through when a user has completed a lesson and just wants to reach the "meat" of the interaction, which is the results summary.
I also wanted to enable a sharing feature to Facebook, with a Synchronized User or to a Classroom, which is displayed on the second screen pictured here.
As an alternative to the graphic element I had envisioned earlier, I decided to avoid overwhelming users with too much non-modern text and separate the sections based on topic, adding a toggle so that a user could opt to view/read modern text or the original text.
I added a tooltip to explain what this feature was for since it was rather unusual.
Each section would include further details about the particular highlighted section.
A particular issue when dealing with a study/quiz app, is how to deal with users who get a wrong answer once or repeatedly. In this instance, I decided to use an encouraging pop up as well, giving the user the flexibility to try again immediately, select a hint or skip the question, when it would appear again at the end of the flow.
In the second screen, you can see what happens when a user selects the hint option.
Part of the tricky nature of dealing with incorrect answers is that you want to encourage the user to keep trying, even if the subject matter is difficult and/or uninteresting, so you need to keep messages positive, motivational and focus on effort, which is something under our control rather than results, which are not always under our control.
Making it oh so stylish
At this phase, I started deciding on some of my final(ish) design choices that would create a distinctive mood and character for the app to set it apart from other, similar apps that tend to be patriotic but in a heavy handed and cliched way. I wanted my app to have a completely unique look and feel that was nostalgic and positive, so I decided to use illustrations inspired by the golden age of illustration when this art form was used as a marketing tool to encourage Americans to travel the country and thus support the burgeoning tourism industry.
Testing newly "refined" stuff with people
As my vision for the app became clearer, I decided to move into the hi-fi mock up phase of my design process so that I could conduct two more rounds of usability testing with 10 different users with a lifelike product.
Helpful copy is necessary to explain to the user what to do, especially if he or she hasn't used this app before. So, I had to think carefully about how I wanted to phrase sentences and use as many direct verbs and clear language as possible.
I also chose to include tooltips for the stars and stripes elements because a user may initially be unfamiliar with what they are and how they are used to gamify the experience.
Above all, I wanted the instructional copy to be fun, playful and not take itself too seriously so that users could relax and enjoy the experience rather than feeling like they are in a traditional classroom.
I ran into a few issues with the progress bar: namely, I wanted it to be simple and not attract too much attention, yet it needed to be informative and accurate, so I later added copy as well to make sure the message was clear and users knew exactly where they were in the flow.
I used visual hierarchy principles to design the rest of the copy so that what was important was bigger and/or bolder and that which was less important was displayed less prominently on the screen.
Similarly, I needed to be intentional about the copy I wrote, as it needed to be clear, informative and suitable for ESL learners.
I worked hard to make sure the questions were challenging without being "trick" questions and to provide a hint for each question to help those who are struggling.
I changed the design a bit along the way, opting for a stronger semi-transparent turquoise in the background to give the designs some life and a more noticeable "light bulb" icon as the hint button.
Creating the design of this app was by far the most time-consuming and challenging aspect of this process. I had a very clear vision of what I wanted the app to look like at the beginning of the process and, over time, came to realize that that vision just wasn't practical in the digital space. My mistake was becoming too attached too quickly to a theoretical vision despite practical realities.
Although I knew I wanted to incorporate the Golden Age-inspired illustrations, I had to walk a fine balance between placing too much emphasis on them and distracting from buttons and text and placing too little emphasis on them and, as one user put it, "seeming to use no imagery at all."
The color scheme was another challenge I didn't anticipate - over time, I came to see that if I really wanted to emphasize the background image and the buttons/text, I should use a simpler color scheme, so I eventually opted for a monochromatic color scheme of differing shades of turquoise as well as a simpler logo.
Even something as simple as a sign in screen needed to be re-envisioned as I developed the design. Firstly, my app was supposed to be accessible to those with a 7th-grade knowledge of English and those for whom English was a second language, so I had to do away with any idioms that people may not understand easily.
Secondly, the username/email and password fields were not initially accessible to a screen reader, so I later separated the fields after receiving feedback from a UX Writer.
I gradually decided that the "rounded corner square button" aesthetic was sleeker and more visually pleasing, so all of my buttons shifted to squaredom eventually.
The background color was another issue - the stark white used on most sign in screens wasn't appealing to me as it lacked warmth and liveliness, so I opted for a semi-transparent turquoise to give the background some life without being overwhelming.
I originally planned to have separate screens, one for the initial "motivational message," a second for a results summary and a third for the sharing/posting flow, but realized later that this was overkill and users wouldn't have much patience for such an extended flow.
So, I decided to combine the results summary and prompt to post with the motivational message and created a separate screen for the posting flow, which was a more popular idea when it involved sharing progress with a synchronized user rather than posting to Facebook, for example.
Finally...I'm done (whew)
This process was a rewarding experience and taught me some, at times difficult, lessons. I learned that, especially in the initial stages, it is integral to keep your mind open to all potential solutions as well as the nature of the problem itself and not become too attached to one particular idea from the start.
I also learned through my screener survey and user interviews that people have hugely varying ideas of the definition of civics and why it’s important to the individual and society.
Moreover, I learned that sticking with a slightly narrower audience may pay off when you are dealing with subject matter that, to many people, is not inherently interesting. The built-in motivation I tapped into by narrowing my audience left me free to consider other aspects of the app besides motivation (although this was also considered in terms of the competitive and gamified elements of the game, the tidbits of information presented to users and the vibrant UI design).
My UI design process was by far the most challenging and frustrating, yet rewarding experience. Through this process, I learned about my personal style as a designer, how to articulate and justify design decisions when faced with pushback and how to create a vibrant and unique design while making sure not to overwhelm users with visual stimuli.
Although the original color scheme in my style guide was (overly) colorful and my fonts were large and attention-grabbing, I later toned down my color scheme by employing a monochromatic selection of colors, inspired by my core color (turquoise). I also chose a subtler font that was unique yet still readable and easy on the eyes. I was adamant about sticking to my inspiration of vintage travel posters and, after continuous trial and error, eventually found a way to implement these images in my design to stoke feelings of idealism and nostalgia. With my current UI design, I was able to achieve an elusive balance by allowing the user to get a taste of the image while not being overwhelmed or distracted by it.
I also learned the importance of information architecture, visual hierarchy and how best to avoid presenting users with too much text by splitting up the lessons and questions; originally, all of the study screens were presented one after the other and users were presented with a continuous quiz as the final stage of the flow. The best way to learn a new topic, especially one that may not seem inherently interesting, is to break up information into digestible chunks that aren’t easily forgotten as they are immediately put to use with a visually pleasing UI that doesn’t strain the user’s eyes and mind. Through the process of prototype testing, I learned that there is a fine balance between the users’ inherent wish to be guided and their expressed wish to be in control over and informed as to the progress of the flow; I then attempted to satisfy the tension between these two needs in my UI design.