purple 3.jpg



Encompass education

Helping Veterans Jumpstart Their Higher Education

Interaction Design / User Interface Design - Collaborative work completed with Marisa Lu and Jenny Hu for the client Tanya Ang.

Encompass Eduction is the prototype for an online program aimed to help veterans make informed decisions about their higher eduction.

This project was conceived by Tanya Ang, the Director of Veterans' Programs at American Council on Education. Jenny, Marisa, and I worked with her to design the prototype. Tanya is is currently talking to a several universities and government organizations about creating a fully developed version of this site with the prototype as a starting point.



Problem: Through the post-9/11 GI Bill, the US Department of Veteran's Affairs helps fund military veterans' higher eductions. Unfortunately, veterans are often uninformed about their options and potential pitfalls that lie ahead of them. Consequently, they waste government resources and prematurely use up their GI Bill benefits.

Core User Group: Veterans in their 20s-30s attempting to pursue higher eduction. 

Goal: Create a site that leads veterans through the process of pursuing higher eduction.


Concept Development

Marisa, Jenny, and I met with Tanya on several occasions to determine the nature of the prototype. Tanya explained to us that there is a multitude of resources already availible to educate veterans. However, they aren't organized well and don't seem to be adequately used. Therefore, we decided to create a site that would lead users through the process of obtaining higher education, providing pointers and resources along the way.

Next, Tanya walked us through what the website needed to say and do. This included outlining necessary steps, defining key information, and providing insights into the traits and challenges of our core user group. We then took her feedback and made a series of sketches about what the website might look like.


identifying the audience

Based on the information that Tanya provided for us and several interviews that we conducted, we also created a user persona. Throughout the process, this was helpful in reminding us who we were designing for.


Mateo has just completed 5 years of active duty working in the Navy as a submarine navigator. He feels that getting a degree is his best route to succeeding in civilian life. However, Mateo isn’t sure where to start. Both of his parents are immigrants who never went to college and don’t know much about higher education. He needs help navigating an unfamiliar system.



determining format, structure and Content

Based on our early sketches and discussions with Tanya, we decided upon a single long page scrolling designWe chose to divide the process into four steps: Setting Goals, Choosing a School, Considering Cost, and Applying. To differentiate between the steps, we gave them all unique accent colors.

We also gathered all of the information that we wanted to include in the website. Most of the text itself was taken from KnowHow2Go, a resource for veterans that Tanya had helped create:


Creating the Wireframes

Based on time constraints, we chose to only prototype the first two steps. We recognized that one of the major problems with KnowHow2Go was that the information was displayed in an overwhelming manner. Therefore, we endeavored to present the information in an engaging ways and organize it into manageable quantities.




evaluating the Semantics

Towards the end of the process, we realized that although we had designed a website that was compelling in many ways, we failed to appeal to our core user group. Our site looked more like a startup's launch site than a resource to help educate army veterans. 

Consequently, we re-evaluated our graphics and use of color to create a design that was more appealing to our core user group. Early on Tanya had mentioned that military culture fondly reflects upon WWII. She suggested that that might be a helpful theme to pursue. Based on this comment, we made retro photographs a central part of our design. In addition, we switched the logo from a compass to a flag because we felt that this symbol appeal more to veterans.

final & second final.png

Final Style Guide:


prototyping site

Created by a combination of Origami, p5.js, and Adobe After Effects. 


encompass degree interaction.gif

Maayan Albert © 2019 | maayan.albert1@gmail.com