Stat EZ was a website created within 21 hours for the 2017 I Stand With Immigrants Hackathon. The prompt of the hackathon was to create something that would enhance the immigrant experience to show that New York is a city that #StandsWithImmigrants. I helped create user flow, wireframes, low-fidelity mockups and finalized screens within our time limit of 21 hours.
Meet the team:
Before international students with a F-1 Visa want to work or intern in the United States, they must get accepted to the Optical Training Program (OPT), which will allow them work authorization from the US Citizenship and Immigration Services (USCIS). Unfortunately, the application process is not always pleasant. On the current USCIS website, when a user enters his/her Receipt Number for an application status, the page merely displays “Case Pending” with no indication of whether the application has been seen or when it will be seen. Leaving users with any context of where their application status results in them feeling frustrated, lost, and forgotten. In this very stressful process, students want to be assured that the government cares about them their application efforts and in a greater sense, to be assured that they as immigrants are welcome in the states.
Stat EZ (-It’s that easy)! We created a website that supplements the USCIS page by providing more information and research about the status of USCIS user applications to increase transparency and improve emotional experience. To make sure that this idea was scalable, our group planned to create a framework that would be able to extend to other application processes as well, not just the EAD in this case (Employment Authorization Document).
Our UX Process:
1. Mapping the User Experience
Before starting our UX process, Hope, one of the designers, reminded us that mapping out a user flow was integral to understanding the current user’s experience and identifying the pain points that the user encounters. We quickly mapped what the user goes through with their experience with USCIS, and then used that to map what we wanted the user flow to be for our product Stat EZ.
After the user submitted their receipt number, we wanted to display 3 clear results: Application Accepted, Application Denied, Application Processing. For the last option, we wanted our website to have a timeline indicator of when the user should expect to hear back from USCIS. We wanted to reassure our users with actual research of the typical application process-Typically after 75 days, 85% of applicants receive status updates on their applications. After 90 days, 95% receive status updates on their applications.
Depending on users’ application statuses and the number of days that has passed, we wanted to guide them through the process by stressing different calls of actions instead of leaving them in the dark with no detailed status (ie. Emailing, Visiting the office, etc.).
2. Creating Wireframes
Using our user flow for reference, we brainstormed on what the actual interface was going to look like. This depended on many factors- for example, I brought up if we should incorporate a User Log-In /Registration feature. These were my thoughts for pros of both including and not including this feature.
I also thought that one option may not be necessarily better than the other, but we could do something that integrates a little bit of both sides. For example, there are food websites that include the option of ordering food online as a guest without creating an account first, but users can also choose to create an account because there are perks and conveniences associated with signing up. For the sake of time, we went with the no account option.
We also thought about our ideal website layout- should both the form and results be combined into one very long page, or should there be different pages clearly demarcating a landing page and a results page? I thought that having different pages made more sense and also reflected how the current USCIS website goes like.
We focused on getting the results page down first as it would be the important and complicated part of the website. In our wireframe, we wanted there to be some sort of visual bar that indicated where the user’s application was on that bar. We also brainstormed what the different calls of actions would look like. Hope suggested that we make the website interactive, and I thought about the idea of putting in hover states of the different positions of After 75 Days, After 90 Days, etc. A main problem we encountered was where to place the different calls of actions. If these calls to actions were very important, i thought they should be immediately displayed on the page, without the user having to scroll down. After a good amount of time wireframing on the whiteboard and sketchbook, we thought that it was finally time to move on to Sketch.
3. Moving on to Sketch/Low-Fidelity Mockups
Since it was difficult for three designers to design one page at the same time, we decided to each quickly mock-up on Sketch what the results page would look like, and to go on from there. This was mine:
My Very Low Fidelity Screens (Landing Page, Application Pending, Application Rejected):
My Low Fidelity Screens:
I thought that adding a small person would make the experience more personable.
4. High-Fidelity Mockups and Constant Tweaking
We up choosing our third designer Emily's colors, fonts and other formatting, and constantly worked upon her features…
I specifically focused on curating the texts that were necessary to the experience, what the call to actions looked like, what the e-mail signup reminder option would look like, and what the Privacy Statement at the bottom of the footer would look like. For example, I realized that there wasn’t an indicator of how much time has passed since the application. I also saw that there was too much text both on top of and below the bar, and thought that was too much given that many people in our society hate to read and would prefer having as little text as possible.
We also ideated several landing pages by the end of the hackathon but didn’t finalize on one option.
For the sake of this website, I chose one landing page design that I thought was consistent with the results page design and continued tweaking it after the hackathon. Tweaks included scaling down the font size to match that of the results page, fading down the illustration to focus the attention on the main action, and changing the styling/ radius of the box and submit button to make it consistent with the next page. I hope to help make more design tweaks in the future if time permits.
Our Final Screens of Stat EZ’s MVP:
When we were meeting with mentors at the hackathon, one of the main feedbacks/concerns that we received was that users might feel their privacy violated when submitting their receipt number into a “random” website. Although our team knew that the website would not be storing anyone’s information or having names associated with the receipt numbers, I think that one goal moving forward should be to emphasize the privacy component of our website. We could do this either through marketing or emphasizing our Privacy Statement on the website, such as the on the footer. Another goal would be to polish the UI of the website to be coherent across all pages. Lastly, there would definitely be better ways to display the user’s status on the main bar.
Stay tuned for updates!