Responsive Redesign Writeup

Part 1: Identifying Usability Problems

Picking a Web page

My first challenge was to pick a webpage that wasn't immensely popular, but still had public access and a workable interface. I was surfing the Great Wide Web mindlessly when I happened upon this nonprofit's website below.
This webpage's purpose is to give the user a brief show of what activities Silkroad engages in as a music organization.

Original webpage: (click through)

Link

I chose this website because I felt like some of the colors used on the website could have contrast problems when desaturated/presented to someone with trouble perceiving certain colors or visual designs. Thus, I wanted to take a deeper look into the accessibility of this website’s homepage.

Finding Problems

Usability

Self-explanatory navigation elements at top
Unclear if clicking the images following will lead you to a specific page, weird thing where if you continue the slideshow it’ll give you images of the actual clickable buttons with links

Learnability

Fairly easy to understand how to navigate site via navigation bar
Layout of home page is a little confusing given the overwhelming amount of pictures, then information regarding donations and listening to music after… hierarchy seems incorrect

Memorability

Silkroad is a memorable name for historic reasons, but the logo itself is super small
No clear color scheme
Unclear with the motto what exactly Silkroad is about

Accessibility

WebAIM WAVE detected several contrast and alternative text errors, as well as a few missing form labels, empty buttons, and empty links. As I had initially chosen this webpage to redesign specifically because of the lack of contrast between the colors, the detection of contrast errors between the yellow, light orange, light gray, and white elements makes sense. Since there are also a large number of images on the homepage, I was concerned about if there was sensible alternative text to describe said photos if the image couldn’t load or a screen reader was being used. The mobile webpage is also super inefficient, warps some of the forms, and forces the user to scroll through every image in order to get to the bottom of the home page.

Overall WaveAIM evaluation:

Contrast error example:

Questionable alt text:

Part 2: Visual Redesign

Low-fidelity Wireframing

My main goals, when making my lofi design, were to:

Increase contrast between elements on the page to reduce color contrast errors
Reduce clutter on page, especially with smaller screens (i.e. not making mobile users scroll through 20+ images on the home page)
Matching the colors better holistically to the Silkroad logo