Overview
I redesigned the Washington Trails Association (WTA) visual system. Iterations of milestone assignments led to bigger ideas for the final deliverable which was a cohesive system that enhances WTA's communication of core values and content.
|
Team
Solo |
Project Length & Setting
10 weeks | HCDE 308 |
Tools
Paper + Pencil Adobe Illustrator Adobe Photoshop |
Process
Client Background Heuristic Evaluation Typography Information Hierarchy Color Exploration Logo Design Mockups |
Client Background
As the nation's largest, state-based hiking nonprofit organization, many hikers resort to the WTA website to seek inspiration and information for hikes. WTA emphasizes protection of hiking trails and wildlands, volunteerism, and promotion of hiking as a fun, healthy way to explore the outdoors. The target audience include hikers of all ages and gender.
With this in mind, the three main communication goals I wanted to maintain in the new visual design system were: nature, exploration, and community.
With this in mind, the three main communication goals I wanted to maintain in the new visual design system were: nature, exploration, and community.
WTA Landing Page Design (2016)
|
My Landing Page Design
|
Heuristic Evaluation
The first step in the redesign was to conduct a heuristic evaluation on the WTA website. I focused on two main pages which include the landing and blog pages. Below are the main findings from my heuristic evaluation. These findings guided my design decisions.
|
1. There are competing elements on the landing page due to clutter as a result of information overload.
Vertical Divider
|
2. The WTA website has a steep learning curve due to poor information hierarchy which causes difficulty in focusing on a single section.
Vertical Divider
|
3. There's a lack of minimalist design and aesthetic due to there being too much content on a single page.
|
Overall, the goals of my redesign were to:
- Maintain mission and communication goals of existing WTA website
- Improve navigability by reducing clutter and information overload
- Increase learnability by highlighting information hierarchy
- Improve the aesthetics by using more images and less text
Project Milestones
The following project milestones outline my 10-week journey in redesigning WTA's visual system. The milestones include: typography & information hierarchy, color & emotion, text with image, logo design, and mobile & web design mockups.
typography & information hierarchy
|
I used a French Onion Soup recipe to explore a range of visual layouts that show how typography can be used to create a visual hierarchy. I used design principles such as font type, size, posture, alignment, and white space to highlight intended content and provide clear and readable information for the viewer.
These techniques were implemented to the WTA redesign where I carefully used different font treatments and graphical elements to portray hierarchy in the different levels of information I wanted to communicate. |
|
color & emotion
|
In this exploration, I experimented with color palettes such as grayscale, cool, warm, and etc. These color palettes later influenced the theme that I committed to for my final WTA project. In the WTA redesign, I used cool colors such as blue to signify the "stability" and "tranquility" of nature which is important to WTA as an outdoor organization.
|
|
text with image
|
Text and image communicate powerfully when used together. I combined type and image on a poster for a lecture at the Museum of Flight where the goal was to communicate "explore" through my image and typography choices.
This exploration helped identify the characteristics of images that would be suitable for the theme and 'feel' of the WTA redesign. All of the photos in the WTA redesign associated humans interacting with nature because I wanted to emphasize the community-oriented value of the WTA. |
|
logo design
Sketches
My sketches were inspired by the current WTA logo's simplicity, outdoor elements, and color choice. I wanted to incorporate these characteristics in order to maintain as much WTA's identity as possible. In general, all of my sketches captured the outdoors through evergreen trees, mountains, and trails.
|
|
Prototypes
|
After receiving critiques, I chose a few sketches to further develop in Adobe Illustrator. I combined what I had learned about typography, hierarchy, and color to create iterations of logos.
To maintain simplicity on the webpage, I made the logo black and white. I explored green and brown, but decided not to move forward with those designs because I wanted to use photography as the main source of color on the webpage. Since photography is valued and encouraged in the hiking network, this allowed for users to share their experiences. |
|
mobile design mockups
The final mobile hi-fi mockups of the landing and sub-page (blog page) incorporate the brand attributes and content I identified as important. The content was transcribed directly from the WTA website to serve as an example of how information would be displayed hierarchically.
|
|
web design mockups
Similar to the mobile design mock-ups, the final hi-fi web design mock-ups of the landing and sub-page incorporate the same brand attributes.
|
|
Final Deliverable
As shown below, the final deliverable was a brand book, which entails in-depth explanations behind each element of the overall visual design system. This includes communication goals, logo, color palette, photography choice, typography, and etc.