Case Study: Green Me app

Beto Carlos
Jul 29, 2017 · 10 min read

Helping International Couples streamline their Green Card process.

This is a project I did for one of my classes at Utah Valley University. We designed an app and documented it.

The need

I came to America as an international student when I was 24 years old. At that moment, I had a single objective in mind: finish my degree in an American school. Little did I know that in America I would meet Lexi, my beautiful wife. When we got married, everything was good. We were happy and we were building a family, but I was still an international student. The restrictions that international students have were beginning to make married life challenging. I couldn’t provide for my family since I was only allowed to work 28 hours a week and I could only work on campus. So, we decided to apply for residency: the so called “Green Card”.

Naturally, we started researching the steps on how to apply for a green card; in my mind, I thought that we could just Google “green card application”, and a website would give us a step by step tutorial on how to get it. Or perhaps that we could get onto USCIS (U.S. Citizenship and Immigration Service) website and find the information that we needed. I WAS WRONG.

A single Google search for “Green card application” generates 44,100,000 results, most of them linking to piles of information.

Going to the official USCIS website is no good either since the site is full of information. Sure, you can browse for a little bit, but soon you find out that there are hundreds of scenarios and for each scenario, you have to fill out different documentation. A TOTAL NIGHTMARE.

There are literally thousands of people trying to file for the green card every year. Most of them do not have an idea on how the immigration system works and, like us, they don’t have an idea on where to start. They are consumed in the anxiety of filing for the green card in a timely and successful manner because that could mean staying with their loved ones or getting deported.

Proposed Solution

Create an app that will seamlessly guide the user through the whole Green Card process (as possible) in an effective, systematic, logical and simple way; without giving the user piles and piles of information, and only pulling the information that they need and how they need it.

The app will also inform them of realistic expectations when filing for the green card. This app will not fill the application for the user, rather it would be an entry point, so they can know exactly what forms they need to fill out (with examples). If their case is too complex, it will refer them to local lawyers. It will also have a checklist as well as a timeline helper that will assist the user to keep track of their entire process.

Background Research

When trying to find an app that had my idea or a similar idea and solutions, I quickly learned that there were not a lot of resources out there. Granted, I believe the U.S. Government means to make this application hard, but the lack of resources out there is just astonishing. You would think that even the government would have resources available for people that are coming to this country in good faith rather than illegally.

Looking a little bit deeper, I did find some resources and tutorials on Youtube regarding how to fill out some of the paper work, but they are scattered all over the Internet. The idea of this app would be to centralize all the information the user needs, and give it to him in a condensed and simple way. is a resourceful website that helps people get started on their road to the green card. It has a great forum and people there are pretty helpful. The problem with this site is that it’s not really user-friendly. Once you get into the website, there is not a clear path and it’s cluttered.

Mapping the Green Card Process

By mapping up the idea and the potential solution, I realize that the scope of the project will be directed to a primary persona, which would be the immigrant seeking help, whereas the secondary and tertiary persona would be people who would benefit but at the same time help the primary persona in its use of this website/app.

This concept model also helps me realize a logical structure for the website, in which it would better satisfy the user in its quest on getting started with his green card.

After having a clear understanding of the scope of the problem, I was ready to develop some personas, so my design could be more focused on my main target audience.

Primary Persona


Benjamin comes from Venezuela, he has been in the United States for 3 years now. He’s about to finish his degree in Computer Science.

He met Susy at a computer convention. They dated for a year and recently got married. Benjamin recently found out that he needs a Green Card, to live in the states in order to work and provide for his new family; soon he finds out that the green card process is not as easy as he thought it would be, and he’s completely lost.

Benjamin enjoys watching and playing soccer. He also likes to watch movies with his wife and to play video games online with his friends in Venezuela.


  • Get a Green Card without having to spend so much money on it, and without having to be buried in paperwork.
  • Have realistic expectations of the whole green card process.
  • Have the tools to help him in the whole process (checklists, timeline, etc.).
  • Have an ongoing understanding of the green card process.


  • Benjamin is pretty open and savvy when it comes to Technology, he can figure out technology fast.
  • He is an eager beaver. He puts in the time to research and to get a lot of information.

Pain Points

  • Benjamin is really eager when researching, he often can get lost with too much information.
  • He has zero to little knowledge on immigration processes.
  • He gets really frustrated if he doesn’t get the information quickly.

Secondary Persona


Susy is an American through and through. She never imagined that while she was attending college, she would meet this weird but funny international student she would eventually marry. Since she never imagined that scenario in her life, her knowledge of immigration procedures is pretty much non-existent. Although she’s really smart, she can be clueless and naive sometimes.

Susy enjoys scrapbooking and her favorite movie is Footloose. She enjoys playing with her dog and watching movies snuggled up in her blanket.


  • Getting the Green Card without a painless process of information.
  • Have realistic expectations of the whole green card process.
  • Finish the process as fast as possible.


  • Susy is really methodical, and she sometimes needs a specific list to follow instructions.
  • She is not as eager as Benjamin. She likes to wait and act at the best possible moment (sometimes this moment never arrives).
  • She’s more patient than Benjamin.

Pain Points

  • Susy likes to research, but she’s really not good at it.
  • She knows absolutely nothing about immigration in the United States.

Tertiary Persona


Joe is a really good person, he has dedicated most of his life trying to help people that are in some kind of disadvantage. Recently he has noticed that there has been a lot of couples trying to fill out their green card papers. Having studied the immigration system a little bit in college, he decides he wants to learn more and incorporates a whole department to help this kind of people.

Joe speaks 3 languages, and he’s currently learning his 4th language. He enjoys spending time with his wife and his kids.


  • A better understanding the process thoroughly so he can help other people in the process.
  • Find an easy solution for the people he wants to help.


  • Joe is really meticulous and has an excellent attention to detail.
  • He’s really calm and has a good frustration tolerance.

Pain Points

  • He doesn’t have time to do everything he will like to do.
  • He’s not the most tech savvy person there is.

Finding a logical structure

I wanted this website to be really simple, by applying progressive disclosure I want them to follow a logical and enjoyable order, rather than having the user figure navigation by itself, I want them to follow an experience, at least when they get to use the tool for the first time; for the recurring user the navigation will be placed on the footer if needed.

After doing a sorting card exercise I decided to put the navigation in the footer so that the website can be as minimal as possible, and can help our secondary and tertiary personas, who are used to computers but not as technically savvy as the primary persona, can understand it and navigate the website with ease.

After finishing the site map, I had a clear idea on how things should start lining up, so I grabbed pen and paper to do some sketches.

Sketching the experience

Sketching provides an opportunity to really get your creative juices going, and to start positioning elements in a way that makes sense.

For this project, I decided to go for a minimal design approach, and I tried to incorporate it as much as I could in my sketches. (1)The left sketch is the Home Page, (2)I wanted the user to start going right away or to log in, so they could pick up where they left.

This home page in intended to be really simple, so non-savvy users can use the website with ease.

(3) The footer is always going to be the same, and it’s going to have secondary navigation to the forum and about us page (see the Site Map portion of this guide.

(4) On mobile and tablet, we are going to use the hamburger menu for navigation, and when you press on it, the menu will slide from left to right.

(5)On the right side, it’s the Results page, where we follow the same minimal guidelines and navigation. On this page, instead of putting a lot of words, (6) I decided to go heavily on buttons and images so that the user can understand better its results.

Wireframing the experience

Wireframing is very important, it lets you make decisions that you didn’t foresee on the sketching process. For example, when I was doing the wireframes, I decided to do only 2 navigational menus instead of 3 (like shown in the sketches), so I could apply Hick’s Law better, where the user has fewer options to make a decision, thus makes the decision faster.

Wireframing lets you decide your content hierarchy in a well and structured way. Laying out all the elements in your design in a lo-fi mode, lets you concentrate more on the structure and strategy that you want your design to take rather than concentrating on colors and all those surface elements.

Vectorized wireframes for this project

Designing the feel

The design had to do a lot with the name and the purpose of the website. Since we are helping the user to get a green card, the name had to have some kind of green. I decided to go with that kind of green since it’s easy to the eye and it catches attention. League Gothic is a really cool sans-serif font, and combining with Gill Sans made a nice combination.

When thinking about the website, I wanted to incorporate as much Aesthetic -Usability Effect, where the website looks and feels pretty so that the user would be more tolerant to possible errors.

Surface Compositions

I did my due diligence in researching and gathering all the material I needed to design the actual UI of the website. The scope of this class was to only design the most important pages, so it hasn’t been designed completely.

These surface compositions were made in Adobe XD, I did a quick prototyping here:




And here’s a quick explanation of the intended end result:


This project taught me what design is really about. I tried to let the design principles guide me in the decisions that were made. I also learned that when you begin by researching the need, structuring your ideas, sketch, and wireframe, in the end, the actual UI designing is a breeze; you already have a clear understanding of what you want to do.

You can find the Final project PDF here.

Beto Carlos

Some random thoughts from Beto Carlos.

Beto Carlos

Some random thoughts from Beto Carlos. His journey in web development and design, along with his achievements and adventures.

Beto Carlos

Written by

Creative Development. Web development student @UVU. Currently enrolled in Full Stack Web Developer Nanodegree Program @udacity

Beto Carlos

Some random thoughts from Beto Carlos. His journey in web development and design, along with his achievements and adventures.