Encompass EDU

overview-in-blue.jpg

Skills:
UX/UI
Digital Prototyping
Wireframing

-
Sketch

Winter Break 2016-2017

Encompass Education

Encompass EDU is a prototype to aid veterans in preparation for higher education decisions.

This project was created for client Tanya Ang, Director of Veterans' Programs at the American Council on Education, in order to facilitate developing a full version of the site. 

 

 
 

Problem

Through the post-9/11 GI Bill, the US Department of Veteran's Affairs helps fund military veterans' higher eductions. Unfortunately, veterans in this situation are often uninformed about the options and potential pitfalls that lie ahead of them.

Consequently, veterans risk going to non-trustworthy institutions or beginning school without validation or guidance. This wastes government resources and causes the veterans to use up their GI Bill benefits.

 

Goal

To create a site that would lead users through the process of obtaining higher education.

 
 

 
 

 

Concept Development

This project had a short timeline of 2 weeks- in this respect, Maayan, Marisa, and I needed to quickly research and iterate designs to build a strong foundation and prototype. 

 
 
 

Marisa, Maayan, 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 available 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.

 

Target Audience

After initial discussions with Tanya, the three of us conducted interviews and created a user persona to always keep in mind throughout the project. 

We had identified out target users to be Veterans in their 20s-30s attempting to pursue higher eduction. 

 
 
mateo.png
 
 

Content Structure and Form

Based on our early sketches and discussions with Tanya, we decided upon a single long page scrolling design. We 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 inthe website. 

Most of the text itself was taken from KnowHow2Go, a resource for veterans that Tanya had helped create.

download.png
 

Design Iterations

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.

 
worth through.png

Design Iterations — 

process that shit.jpg

Style Guideline—

Styleguide 1.png
 

Evaluating 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.

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 appealed to a greater sense of destination.

semantics.jpg
 

 

Final Design

encompass degree interaction.gif
encompass-accredidation-interaction.gif