
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.

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

Colors

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.


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


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.

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.

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.

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.

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.

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.

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.

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.

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.

Final Redesign

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.