top of page
VVP-Logo-color_large.png

UI Redesign 

I recently read an article on Medium entitled, It’s time we stop unsolicitedly redesigning Spotify, by Fabricio Teixeira, and I completely agreed with his argument that designers should be using their design skills in a more productive manner than redesigning apps like Spotify who already have a design team. Instead, we should focus our skills on projects that could actually have a positive effect such as non-profits. The article inspired me to do an on-spec redesign of one of my favorite non-profits in my home town; Vail Veterans Program aka Vail Vets.

 

 Vail Vets is a nonprofit that helps Veterans who have been severely injured find a sense of inspiration through adventure sports. The program brings military families out to Vail to teach Veterans adaptive sports, and through these sports, you can see the incredible impact this opportunity brings to the families.

 

My goal was to redesign the home page of their website to intice Vail Vets into allowing me to design a complete overhaul of their outdated website.

The Scope

6 Hours 

Programs Used

Adobe XD

Photoshop

The Challenge

  • Design a more modern home page for the Vail Veterans program.

  • Discover and address usability and accessibility issues.

  • Provide Vail Vets with a home page redesign that would convince them to consider updating their website.  

First Steps 

My first step in this project was to do a quick audit of their existing website so that I could address the key usability problems on their homepage.

 

Web 1920 – 1_2x.png

Design Planning

With a better understanding of their usability challenges, I began planning my redesign. I decided to stick to their primary color palette and branding to refine it further.  

Titillium Web

Screen Shot 2019-11-14 at 1.12.09 PM.png

Colors

Artboard – 1_2x.png

Next, I made a couple of quick wireframes to get an idea of the layout and flow of my design. I ended up taking ideas from both of the wireframes.   

Web 1920 – 1.png
Web 1920 – 2.png

The Navigation

The navigation was a glaringly obvious place for improvement, with the lack of background and odd-looking calls to action.   

Screen Shot 2019-11-14 at 11.28.27 AM.pn
Screen Shot 2019-11-14 at 11.29.43 AM.pn

The lack of background made it impossible to distinguish the navigation for underling text. 

I improved this design by adding a background increasing the visibility of the navigation and updating the UI of the calls to action giving the header a more practical and updated look. 

Header_2x.png

Hero Image

When I visit a website I want to instantly know what their purpose is and the current hero image offers no insight into the Vail Veterans program mission. It also hosted two calls to action that looked very outdated.

screencapture-vailveteransprogram-org-20

The Hero image itself didn't cause any emotional reaction, so I found a more impactful Vail Vets photo and then edited it in photoshop to create a space for subtext explaining the non-profit's mission along with updating the call to action button. 

Hero_2x.png

An Updated Look 

Vail Vets had inspiring messaging bellow the hero image but lacked readability standards because the entire passage was capitalized. It was also accompanied by a nice photo of a military family, but had an outdated, low effort blend to white on the top and bottom. 

screencapture-vailveteransprogram-org-20

To improve this section I returned the text to traditional capitalization practices. Then I added it to a vector art background, to give the messaging a more modern look. I also used the space below to add the video at the beginning of this case study because I believed it was the strongest messaging asset that Vail Vets had and belonged on the front page.  

Vail Vets Home Page_2x_edited.jpg

Call To Action

This section had five calls to action in a small area and lacked hierarchy, overwhelming users with information and options in a non-traditional layout.

screencapture-vailveteransprogram-org-20

To address this I and created a space solely for testimonials and overlayed it over a moving image of a Vet learning to sit-ski to insight empathy. Giving testimonials their own section allowed me to create a more uniform layout for the remaining calls to action.

Vail Vets Home Page_2x_edited.jpg

Footer and Social Links

Their original footer wasn't too bad but there was room for improvement by creating a better hierarchy and quicker access to other pages on the website. It also had a very easily overlooked social link area.

screencapture-vailveteransprogram-org-20

The first thing I wanted to address was the outdated photo blend with a more recent photo. To make better use of the space I added a large social link area.

​

In the footer, I created hierarchy and short cuts to nearly every page on the website allowing for quick navigation as well as a final donation opportunity.  

Vail Vets Home Page_2x_edited.jpg

Final Redesign

Vail Vets Home Page.png

Retro

This was an on spec design for the Vail Veterans Program with the goal of highlighting improvements that could be made to the user experience of their website. This was a fun project and I would love the opportunity to work with the Vail Veterans Program directly.  

Please take a moment and consider supporting this incredible non-profit and give the opportunity to change the lives of some of the incredible men and women who have served our country.  

https://www.vailveteransprogram.org/

bottom of page