{"id":28,"date":"2025-12-07T00:32:38","date_gmt":"2025-12-07T00:32:38","guid":{"rendered":"https:\/\/sites.create.ou.edu\/loganstanley\/?p=28"},"modified":"2025-12-10T19:50:40","modified_gmt":"2025-12-10T19:50:40","slug":"designing-viscomm-website-hi-fi-prototype-and-test","status":"publish","type":"post","link":"https:\/\/sova.ourcloud.ou.edu\/loganstanley\/2025\/12\/07\/designing-viscomm-website-hi-fi-prototype-and-test\/","title":{"rendered":"Designing VisComm Website: Hi-Fi prototype and Test"},"content":{"rendered":"\n<p><strong>High Fidelity<\/strong><\/p>\n\n\n\n<p>After finishing the wireframes, it was finally time to put the finishing touches on the website and make it high fidelity. A lot of my components were already interactive, so I started including images and color. I spent a lot of time on the colors, most of them adhere to the University of Oklahoma\u2019s design guidelines. However, I also wanted to experiment with my favorite color: blue. Trying to learn the different color modes and how colors transfer from one to another was challenging. It took a lot of trial and error to establish an adaptable color structure. Then, I made dark variants for both, making a total of four color options. I found that I had no idea how to make a button to swap the colors and other relevant components. However, with a little help, it made more sense. I also ran into a problem with my dropdowns, I accidentally deleted some elements, but it was relatively easy to fix.\u00a0<br><\/p>\n\n\n\n<p><strong>A\/B Testing<\/strong><\/p>\n\n\n\n<p>During this phase, I also conducted A\/B testing. I would make two different designs and have testers compare them. I thought the admissions page was too monotonous because everything was contained in separate shapes. Instead, I put text freely on the page and added a line element. At first, the line was too large and distracting, but I decreased the stroke. I made two arrangements for the admissions page and I wanted to know which was more clear and enticing. Testers said the second design was better because the line grouped information in a more linear fashion and the buttons were more clear. I also reworked the homepage, including text and a line element to match the admissions page, which made it more dynamic. Also, after going through my website, I was worried that student work wasn&#8217;t properly represented. Previously, if a project had several images, I fit them all within the overlay, making them smaller in order to fit. To try and resolve the problem, I made a carousel for the images. After the A\/B testing, I received positive feedback. Testers thought the images were much easier to view. The carousel had the additional effect of allowing more images for each project. I also experimented with some different interactive elements. If I had a clickable shape with two rounded corners, I modified the interaction. If they were clicked on, the shape would invert, swapping which corners had rounded edges. I wanted more movement and interaction within the page. However after testing, it was clear that the interaction was distracting and disruptive to the viewer. I quickly changed my interactions back to normal.<br><br><strong>Reflection<\/strong><\/p>\n\n\n\n<p>Overall, the high fidelity phase is probably my favorite part of the project. At this point, I have a fairly good understanding of where my website is going, and I get to polish and refine it. After months of work, I get to put everything together. Granted, I&#8217;m sure the website has room for improvement, but it is still fulfilling for everything to culminate into a working website.\u00a0<br><br><\/p>\n","protected":false},"excerpt":{"rendered":"<p>High Fidelity After finishing the wireframes, it was finally time to put the finishing touches on the website and make it high fidelity. A lot of my components were already interactive, so I started including images and color. I spent a lot of time on the colors, most of them adhere to the University of [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-28","post","type-post","status-publish","format-standard","hentry","category-blog"],"_links":{"self":[{"href":"https:\/\/sova.ourcloud.ou.edu\/loganstanley\/wp-json\/wp\/v2\/posts\/28","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sova.ourcloud.ou.edu\/loganstanley\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sova.ourcloud.ou.edu\/loganstanley\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sova.ourcloud.ou.edu\/loganstanley\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/sova.ourcloud.ou.edu\/loganstanley\/wp-json\/wp\/v2\/comments?post=28"}],"version-history":[{"count":1,"href":"https:\/\/sova.ourcloud.ou.edu\/loganstanley\/wp-json\/wp\/v2\/posts\/28\/revisions"}],"predecessor-version":[{"id":48,"href":"https:\/\/sova.ourcloud.ou.edu\/loganstanley\/wp-json\/wp\/v2\/posts\/28\/revisions\/48"}],"wp:attachment":[{"href":"https:\/\/sova.ourcloud.ou.edu\/loganstanley\/wp-json\/wp\/v2\/media?parent=28"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sova.ourcloud.ou.edu\/loganstanley\/wp-json\/wp\/v2\/categories?post=28"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sova.ourcloud.ou.edu\/loganstanley\/wp-json\/wp\/v2\/tags?post=28"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}