{"id":22,"date":"2025-12-06T04:37:51","date_gmt":"2025-12-06T04:37:51","guid":{"rendered":"https:\/\/sites.create.ou.edu\/ashleynorman\/?p=22"},"modified":"2026-01-31T23:21:29","modified_gmt":"2026-01-31T23:21:29","slug":"designing-viscomm-website-hi-fi-prototype-and-test","status":"publish","type":"post","link":"https:\/\/sova.ourcloud.ou.edu\/anorman\/2025\/12\/06\/designing-viscomm-website-hi-fi-prototype-and-test\/","title":{"rendered":"Designing VisComm Website: Hi-fi Prototype and Test"},"content":{"rendered":"\n<div class=\"wp-block-group alignwide is-layout-flow wp-block-group-is-layout-flow\">\n<div style=\"height:13px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h1 class=\"wp-block-heading has-text-align-center\">Designing VisComm Website: Hi-fi Prototype and Test<\/h1>\n\n\n\n<div style=\"height:13px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>The Hi-Fi Prototype stage has been the most valuable part of this project so far. During this phase, we took our wireframes and used the feedback from our usability tests to improve the website. From my think-aloud testing, I learned that my News and Events section needed more clarity\u2014testers suggested adding short text labels to each carousel image. They also felt the Program page could be more dynamic with additional interactions, and they recommended removing the student tab and placing that information elsewhere. I applied these suggestions, and once I began adding images and color, the design started to feel much more complete.<\/p>\n\n\n\n<p>After finishing my initial Hi-Fi design, I moved into the A\/B testing process. This involved choosing three UI areas and creating two versions of each so testers could compare them and identify which worked better. The sections I chose to test were the News and Events area on the About page, the Application page, and the class description\/student work area on the Program page.<\/p>\n\n\n\n<p>For News and Events, version A used a carousel of upcoming items, while version B used event cards and included a \u201cMore News and Events\u201d button. Testers unanimously preferred version B because it was clearer, easier to navigate, and provided more accessible information.<\/p>\n\n\n\n<p>On the Application page, version A opened with a call to action and a button, followed by brief information. For version B, I reorganized the layout to present the steps more clearly. Testers found this version far more helpful\u2014one even said that if they were an incoming freshman, version B would make them feel more confident and excited because they understood exactly what to do.<\/p>\n\n\n\n<p>My final test was on the Program page. In version A, clicking a class opened a carousel of student work. For version B, I redesigned it so each class button revealed a brief description and displayed student work in card form, similar to the News and Events section. Testers found version B simpler and easier to understand.<\/p>\n\n\n\n<p>Working through this stage made me realize how critical testing truly is, without it, I wouldn\u2019t have known what needed improvement. Some parts were challenging\u2014especially deciding how to redesign certain elements for version B and managing components like the program-section overlay\u2014but following the feedback helped guide my decisions. Overall, I really enjoyed this phase because it\u2019s where the website finally started to come to life. Seeing the design grow more polished, usable, and successful is one of the most exciting parts of being a designer.<\/p>\n\n\n\n<p><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Designing VisComm Website: Hi-fi Prototype and Test The Hi-Fi Prototype stage has been the most valuable part of this project so far. During this phase, we took our wireframes and used the feedback from our usability tests to improve the website. From my think-aloud testing, I learned that my News and Events section needed more [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-22","post","type-post","status-publish","format-standard","hentry","category-blog"],"_links":{"self":[{"href":"https:\/\/sova.ourcloud.ou.edu\/anorman\/wp-json\/wp\/v2\/posts\/22","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sova.ourcloud.ou.edu\/anorman\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sova.ourcloud.ou.edu\/anorman\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sova.ourcloud.ou.edu\/anorman\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/sova.ourcloud.ou.edu\/anorman\/wp-json\/wp\/v2\/comments?post=22"}],"version-history":[{"count":3,"href":"https:\/\/sova.ourcloud.ou.edu\/anorman\/wp-json\/wp\/v2\/posts\/22\/revisions"}],"predecessor-version":[{"id":559,"href":"https:\/\/sova.ourcloud.ou.edu\/anorman\/wp-json\/wp\/v2\/posts\/22\/revisions\/559"}],"wp:attachment":[{"href":"https:\/\/sova.ourcloud.ou.edu\/anorman\/wp-json\/wp\/v2\/media?parent=22"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sova.ourcloud.ou.edu\/anorman\/wp-json\/wp\/v2\/categories?post=22"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sova.ourcloud.ou.edu\/anorman\/wp-json\/wp\/v2\/tags?post=22"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}