Travel Alaska — Angelo Williams

Travel Alaska is a non-profit organization that works with the Alaska Travel Industry Association. Having worked with them on a number of projects, I was tasked with designing and building the Planning/Help section of the site in mid-2019. Some specific tasks were to create a new header that retained elements of the overall style site ecosystem, build information widgets on the subpages, and enhance forms and images within the Planning/Help section.

Note: In compliance with a non-disclosure agreement, the information presented in this case study do not reflect the views of Travel Alaska. Any proposals or actions taken were at my own discretion, and any confidential information has been omitted.

Header

My initial thoughts were to have a sidebar menu that opened image links to subsections.

*Setting image source attributes and toggling display properties in Javascript.*

An area of improvement was a need for easy correlation; users may feel lost or confused by the elements on screen, as everything appeared disconnected. Another concern was the stylistic differences between this page and the rest of the site. Upon review, I decided to use the already-established pane-style template from the Get Inspired section as a basis for the Planning/Help header:

To add variety, images were included in the informational text boxes. I also wanted the vertical text to shift horizontally once a pane is selected. This step might offer better readability and catch slightly more attention.

A common challenge is balancing information and design depending on screen size. The Climate and Clothing Guide was unique in that I needed to continually manipulate the size of the SVG file.

Due to time constraints, I added multiple media queries manually in CSS. If given another opportunity, a Javascript function that auto-resizes the image would provide for more consistency.

The backend developer and I worked on creating small thumbnail links that provided teaser text. While he focused on random generation and some of the code-behind, I worked with the presentation. In order to limit the amount of small text, the thumbnails display page titles by default. Upon hover, we can obtain more information through teaser text.

Again, the arrangement of items were contingent on screen size. While I initially tried to set proportional dimensions, I found that hiding some of the items would make information simpler for mobile users.

Subpages

Climate & Clothing Guide

While the copy on the subpages were being updated, I had a chance to recreate charts through Excel and Illustrator.

Desktop: left | Mobile: Right

*Excel’s grid and typeface helped flesh out the main layouts that were further developed in Illustrator*

A slightly larger task was to build a widget using reference material from paperback newsletters. They should denote expected clothing in various regions of Alaska.

Travel Tips

Before the developer and I finalized the way in which we wanted the Travel Tips to appear, I began generating HTML mockups. Setting up the images in div containers and sourcing the background images from the live site, I soon began the idea generation process.

*Version 2 - issues with overlapping items*

I eventually created div containers with a light background to represent surrounding content. After the first few versions, I moved towards simulating how it would actually appear on the site.

*Version 4 - add surrounding containers*

*Version 7 - final before moving to test server mockups*

The next step was to implement the actual code on the test server and iterate until I received client approval.