Identifying Usability Problems

Finding Problems: usability, learnability, memorability

After closely annotating the original site, we summarized 5 main issues that should be addressed in the redesign:

1) Logo does not load and has awkward placement.
2) Too many tabs to choose from with little diffrentiation between tabs. User has a tough time choosing between tabs and will likely consume less information because they are unlikely to go through each tab diligently.
3) Call to action to 'check out newest issues' is not clear
4) As a reader of The Round, I know it is an artsy, edgy multi-media and creative publication with a very diverse submission base. This page does not communicate any of that.

Accessbiility Problems

Size and contrast of text on the page passes accessibility standards (ratio is 8.59:1). However, there are some other design-best-practices that are not fulfilled: The logo does not load and it is missing alternate text. Without alternative text, the content of an image will not be available to screen reader users or when the image is unavailable. Language of the page is not identified: Identifying the language of the page or page elements allows screen readers to read the content in the appropriate language. It also facilitates automatic translation of content. Structurally, there is no heading, there are no page regions, redundant links exist, and there is redundant title text.

Creating a Styleguide

Next, we made an interactive “high-fidelity”(hi-fi) prototype based off the wireframe we created in Part 1, after which we presented our mockup in studio for a round of critiques.

Sketching, Wireframing, Prototyping

Taking into consideration the issues I found above, I set out to transform my low-fidelity wireframes into high-fi mockups. Some key considerations:

1) Header tab: this design cuts down the number of tabs from 6 to 4 - namely 'Issues, Submit, About, Join'. The language is also clearer now and more succint so users know exactly which tab will lead them to the information they are looking for.
2) There is now a clear call to action right below the description of The Round. It will read 'See our newest issue'.
3)Finally, the new design attempts to communicate the 'vibe' of The Round: an artsy, edgy, Zine with a diversity of submissions. This is what inspired the myriad of artwork that seemingly 'floats' around the title. The front page will feature artwork, poetry and snippets of writing from the Round to entice newcomers into checking out the new issues. I also chose to have a more sporadic layout versus a very organized box layout to communicate the creativity and spontaneity exuded in many pieces by The Round.

Conclusion and Reflection

The actual execution of this page was somewhat limited by my technical ability. As a first-timer with web development, there were many aspects I had to do extensive exploration on before being able to implement, such as the randomly generating the photos. I was unable to have the photos generate on top of the loaded page, but decided the brief lapse where the page only shows the artwork had a unique and cool effect.