{"id":25,"date":"2025-11-09T04:12:54","date_gmt":"2025-11-09T04:12:54","guid":{"rendered":"https:\/\/sites.create.ou.edu\/loganstanley\/?p=25"},"modified":"2025-12-10T19:50:40","modified_gmt":"2025-12-10T19:50:40","slug":"designing-viscomm-website-wireframe-and-test","status":"publish","type":"post","link":"https:\/\/sova.ourcloud.ou.edu\/loganstanley\/2025\/11\/09\/designing-viscomm-website-wireframe-and-test\/","title":{"rendered":"Designing VisComm Website: Wireframe and Test"},"content":{"rendered":"\n<p><strong>Wireframes<\/strong><\/p>\n\n\n\n<p>After making a site map and sketching designs, it was finally time to start making wireframes. I instantly set out, making atoms, molecules, and organisms. Then, I developed the navbar and footer to start my page. From there, I started to develop my individual pages. Immediately, I found this to be a daunting task, trying to turn my initial sketches into actual designs, wasn&#8217;t always a seamless transition. Not to mention, I had trouble with scale. I was constantly having to downsize my components and pretty much everything, so the screen space could accommodate enough elements and information. Once I managed to come to terms with everything, it was fairly easy to start putting everything together. Around this time, I had to create new variables in order to accommodate the spacing of my page elements. The elements were also looking too rigid, so I incorporated a rounded edge on the top left and bottom right corners. The rounded edge became one of my design tropes for the entire website. As I continued working, I quickly found that my website was going to have a lot of pages, so I started using overlays. I found that the overlays would act strange sometimes, especially my dropdown menus, but with a lot of prototyping, I managed to resolve the issue. Once I had a lot of the wireframes done, I gathered feedback from some classmates. They found my navbar to be distracting, and they didn&#8217;t know that they could interact with a lot of my elements. I was largely oblivious to how many of my components lacked interactive elements. I went back and created variants for a lot of my molecules. I also revisited my navbar, and with some help from the professor, managed to make it more cohesive.<\/p>\n\n\n\n<p><strong>Testing<\/strong><\/p>\n\n\n\n<p>Once I had finished the wireframes, I started to test. I recruited three participants, each representing my user groups: students, parents, and faculty. I would ask them five questions, such as: find junior course classes, faculty information, or student work. After conducting interviews earlier in the project, I felt more prepared for this testing. It went fairly smoothly. I just had to remind my participants to think aloud, so I could better gauge their interactions. I found that I still had issues with interactive elements. My drop downs had no visual indicator, and some interactions weren&#8217;t that noticeable. They also found some of my information to be grouped in a weird manner, they struggled to find degree expectations, financial aid and alumni. I moved some of the information to different pages, but I probably need to conduct another test to see if I was successful.<\/p>\n\n\n\n<p><strong>Reflection<\/strong><\/p>\n\n\n\n<p>Overall, making wire frames was stressful, but also really fun. My sketches didn&#8217;t seamlessly transfer into digital form, so it was stressful trying to create a similar layout. However, once I made a foundation for the website. It was really enjoyable. I like all the problem solving involved when trying to make components and interactive elements. I wasn&#8217;t the biggest fan of conducting tests, but it was absolutely necessary. They definitely helped me identify flaws in my design.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Wireframes After making a site map and sketching designs, it was finally time to start making wireframes. I instantly set out, making atoms, molecules, and organisms. Then, I developed the navbar and footer to start my page. From there, I started to develop my individual pages. Immediately, I found this to be a daunting task, [&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-25","post","type-post","status-publish","format-standard","hentry","category-blog"],"_links":{"self":[{"href":"https:\/\/sova.ourcloud.ou.edu\/loganstanley\/wp-json\/wp\/v2\/posts\/25","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=25"}],"version-history":[{"count":1,"href":"https:\/\/sova.ourcloud.ou.edu\/loganstanley\/wp-json\/wp\/v2\/posts\/25\/revisions"}],"predecessor-version":[{"id":49,"href":"https:\/\/sova.ourcloud.ou.edu\/loganstanley\/wp-json\/wp\/v2\/posts\/25\/revisions\/49"}],"wp:attachment":[{"href":"https:\/\/sova.ourcloud.ou.edu\/loganstanley\/wp-json\/wp\/v2\/media?parent=25"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sova.ourcloud.ou.edu\/loganstanley\/wp-json\/wp\/v2\/categories?post=25"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sova.ourcloud.ou.edu\/loganstanley\/wp-json\/wp\/v2\/tags?post=25"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}