Start Date:
April 2021
End Date:
June 2021
Role:
Designer
Designing a new visual identity for Seattle Adaptive Sports from the ground up.
At the time of this project, the Seattle Adaptive Sports website and brand identity had a lot of space for visual improvements. I was given ten weeks to create a new and improved visual overhaul for this nonprofit through a graduate visual communication class.
This visual communication project culminated in a brand book that received an A grade from Chad Hall, design director at Artefact.
This project was an exercise in design skills. Having a basic grasp of visual basics, branding, UX design, and UI design all contribute towards a more holistic skill set.
Seattle Adaptive Sport’s mission is to enable people with physical disabilities to push beyond their limits and reach their full potential. Their vision is to become a hub that connects athletes and the community with opportunities to compete, learn, and grow. They are a Paralympic sports club that offers a wide variety of adaptive sports programs, such as wheelchair basketball and power soccer, as well as maintain and manage teams of players.
The landing page of the Seattle Adaptive Sports website is the home page. The main parts of the home page include a navigation menu, logo, sponsor logo section, introductory video, links to COVID-19 and athlete registration, a mission statement, a social media window, as well as calls to action to learn about sports programs, volunteer, and donate. The Seattle Adaptive Sports logo is shield-shaped, contains both organic and geometric shapes, and uses a blue, green, and white color palette. The desktop home page uses white and blue as background colors, green with white text for the navigation menu, and green and blue as body text colors.
One strength of the Seattle Adaptive Sports website is the clear and easy navigation system. Usage of navigation dropdowns are minimized and it takes very little time to find registration information, program information, how to volunteer, and how to donate – this means that the primary action goals of the website are met. This informational content is up-to-date and useful. In addition to those, the color palette of the website is and aesthetically pleasing and imparts an energetic aesthetic, which is appropriate for a sports-based website. The website does a good job of including pertinent information. Furthermore, the use of a hamburger menu minimizes navigation clutter on the mobile page. Overall, the website is readable, usable, and useful.
A noticeable visual issue on the desktop website is contrast. For example, the “about” and “donate” page features three columns of information consisting of dark blue text on a light blue background. While the WebAIM accessibility checker still did not flag any problems on any of the website pages, certain parts of pages appear low-contrast and difficult to read to the naked eye. The issue of contrast is found on all pages: the green and black headings as well as dark blue text blend into the blue page background. Some headings have a white dropdown shadow, which does improve readability, but not all headings have this affordance. When comparing the Seattle Adaptive Sport’s website to the Outdoors for All Foundation and Seattle Rugby Club’s website, the competitor websites have a much higher level of contrast throughout. This makes the competitor websites easier to read and more visually appealing.
Another noticeable issue is the many inconsistencies in Seattle Adaptive Sport desktop website’s typography. For instance, headings on the about page consist of green all-capital letters followed by the dark blue body text. The membership page breaks this pattern by having the primary header be in white all-capital lettering followed by black, bolded subheadings and black text. Other pages, such as the contact page, contain headings of several colors and sizes in different locations, leading to hierarchical confusion. As website users click through the navigation menu, pages “jump” visually due to the heading and body text locations changing. This is also noticeable when viewing images and their corresponding text: the images are above the text in some pages, but below the text in others (ex. images below text on home page, but above text on donate page). Additionally, the contact page form breaks the website style by using a very different text style for the form. In summation, the typographic style between webpages is very inconsistent. This issue is not on found on competitor sites: both the Outdoors for All Foundation and Seattle Rugby Club websites maintain a consistent typographic and hierarchal style throughout all webpages. Because of the lack of consistent typographic style, the Seattle Adaptive Sports website appears much less polished and professional than the competitor sites.
A third visual issue with Seattle Adaptive Sports is content hierarchy. On desktop, the website is heavily cluttered, making the eye search in a scattered pattern to find pertinent information. This clutter is significantly lessened on mobile, however, the hierarchy of the page changes to one less useful. For example, visiting the home page on mobile leads to a very long sponsor thank you list that you must scroll through to see the other content on the page. This was unexpected because the sponsor thank-you section is a small sidebar on the main website, taking up very little desktop space. After exploring the mobile website, it becomes clear that their website is not mobile-friendly: while the collapsible hamburger menu makes it easy to navigate, the webpages themselves are difficult to navigate and interact with. The margins, imagery, content, and text on the mobile website could use standardization and organization. Seattle Adaptive Sports website’s usage of space, both on mobile and desktop, could use more redesign and reconsideration on usage of space in relation to content importance.
Overall, this website would benefit from a visual redesign. The current website is readable, useful, and usable – however, there are noted visual issues regarding contrast, typography, consistency, and content hierarchy. A redesign should address these issues by increasing the contrast between text and background, creating a consistent typographic system between subpages of the website, and reorganizing the content to have a clearer visual hierarchy on both desktop and mobile platforms.
This project is purely an exercise in visual design theory. This means that the final solutions are all mockups that were not implemented by the Seattle Adaptive Sports community. Additionally, due to this project being part of a graduate course on visual communication, this rebrand focuses more on theory over practicality.
Seattle Adaptive Sports engages in an endorsed brand strategy as there are a number of offshoot teams having their own specialized branding and unique audiences. Because of this, the rebranded logo maintains a formula dynamic identity. This is so Seattle Adaptive Sports can foster team differentiation and diversity while maintaining the overarching brand goals. The logo is an emblem as it allows for the use of both text and symbols to convey brand identity. The base of the logo consists of a triangle with a wordmark underneath. Teams managed by Seattle Adaptive Sports are encouraged to use the triangle and wordmark as the foundation to their own logos. The geometric shape of the Seattle Adaptive Sports triangle was inspired by Mt Rainier, a landmark visible from Seattle, WA. Out of the triangle comes a bursting energetic wave. The particular shape oft his wave subtly hints to a vague, humanoid “ghost” throwing a ball. The typeface used in the logo is Futura Bold. The letters are lowercase to provide a more uniform, yet still approachable, shape. Ideally, the full logo should be displayed. However, if the logo is used at a size where the the letters are too small to be legible, the words can be removed to display only the wave and triangle. The logo incorporates a split complementary color scheme of red-orange, yellow-orange, and blue.
The grid system maintains design consistency within website pages and between design mediums. Both column width and row height are set at 40 pixels. The columns radiate out from the center of the page and rows drop down from the top of the page. Additionally, the gutters are relatively large at 20 pixels. The large gutters are a purposeful choice to avoid the appearance of crowding. While the basic grid does not change between design mediums, the margins do. On desktop, the margins are rather large at 136 pixels, while on mobile the margins are rather small at 20 pixels. In poster media, the margins are 44 pixels. This variance in size is due to the available space of the design mediums. The desktop webpages are designed to be viewed on a MacBook (1152 pixels wide) and the mobile web page is designed to be viewed on a Google Pixel 2 XL (411 pixels wide). The print poster is designed at standard letter paper size (612 pixels wide, 8.5” x 11”). Basic alignment maintains consistent from medium to medium. The text is, by default, left aligned. Headers begin on the bottom of a row, while corresponding body text begins from the top of a row. These headers and texts are separated by a margin. Regarding imagery, general shapes must fall within the grid, but certain bits of illustration are permitted to trespass the strictness of the grid system as long as it is a purposeful overflow. The slight breaking of the grid with illustrations is a purposeful choice to temper the strictness of the modular grid system and make the overarching appearance more welcoming.
A combination of photography and illustration imagery is incorporated into the brand. All imagery uses some form of the specified color palette, but each piece of imagery does not need to have all the colors incorporated. All photographs used are of adaptive athletes in action and are exclusively sourced from the work of photographer Audi Nissen. These photographs are used as landing images in online media. When appearing on webpages, these images are edited to be slightly underexposed, making their colors less vibrant. Red-oranges, yellow, and deep blues are present in the photographs. The home page “image” shown actually consists of a short GIF with the provided image shown as a freeze-frame. All illustrations used have been custom made for this Seattle Adaptive Sports rebranding in Procreate. The illustrations incorporate the specified Seattle Adaptive Sports color palette. The illustrations for the home page use only yellow and blues, while images for the program page use blues, yellow-orange, and red-oranges. As a rule, all illustrations feature a black outline and are placed over a brightly colored simple shape. The simple background shape must strictly conform to the grid, but the illustrations are allowed to slightly break out of the grid.
