{"id":80,"date":"2025-11-08T05:55:01","date_gmt":"2025-11-08T05:55:01","guid":{"rendered":"https:\/\/sites.create.ou.edu\/kaitlynelliott\/?p=80"},"modified":"2026-01-24T18:04:45","modified_gmt":"2026-01-24T18:04:45","slug":"designing-viscomm-website-wireframe-and-test","status":"publish","type":"post","link":"https:\/\/sova.ourcloud.ou.edu\/elliott\/2025\/11\/08\/designing-viscomm-website-wireframe-and-test\/","title":{"rendered":"Designing VisComm Website: Wireframe and Test"},"content":{"rendered":"\n
\n

Objective<\/h2>\n\n\n\n

The goal of this stage was to transform our initial sketches and sitemap into structured wireframes that clearly communicate the layout, hierarchy, and navigation of the Visual Communication website. We wanted to design an experience that feels intentional and inviting<\/strong> for all users (students, parents, and faculty) while maintaining consistency, functionality, and usability<\/strong> across every section. The wireframes served as a connection between ideas and function, allowing us to test information flow and prioritize clarity<\/strong> before committing to high-fidelity design decisions.<\/p>\n\n\n\n

Challenges<\/h2>\n\n\n\n

One of the main challenges was balancing the needs of different user groups<\/strong>. Students wanted a clear understanding of the program and its career paths, parents sought reassurance about student success and program credibility, and faculty needed efficient tools for communication and sharing accurate information. Bringing all of those priorities together into one structure required several iterations and careful decisions about hierarchy.<\/p>\n\n\n\n

I also struggled with information density<\/strong>, deciding how much text to include in early wireframes versus what could be translated through visually engaging elements. During testing, I learned that too much information on one section caused users to skim past important content. This feedback encouraged me to rely more on concise summaries<\/strong>, visual structure<\/strong>, and more interactive features<\/strong> such as dropdowns, sidebars, expandable sections, or introducing a new “Resources” section to keep content digestible and user-friendly.<\/p>\n\n\n\n

General navigation through certain sections was another area that needed improvement. Some users had trouble finding the FAQ or locating specific sections such as more specific contact information or resources for all users, which made me reconsider how the navigation menu and call-to-action buttons were placed throughout the site.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Benefits<\/h2>\n\n\n\n

Creating wireframes before high-fidelity designs helped me to focus on functionality and usability<\/strong> without getting distracted by colors or visuals. The process clarified how each section supports a specific audience need, making the structure of the website more intentional and purposeful<\/strong>.<\/p>\n\n\n\n

Using AI tools played a major role in this stage. I used AI to help brainstorm realistic placeholder content that reflected what could appear on the final site. This included mock news posts and testimonial examples that made the wireframes feel more authentic and test-ready. AI also helped me write concise descriptions for program highlights, summaries of student experiences, and content explaining the community and culture at OU\u2019s School of Visual Arts. These realistic details gave testers a better sense of context when navigating through the prototype.<\/p>\n\n\n\n

Testing the wireframes through the Think Aloud method gave me valuable insight into how users actually interact with the site. I learned which features worked well, like the direct navigation bar and easy-to- understand headings, and which ones caused confusion, such as text-heavy sections and underemphasized clickable text. These findings directly informed my design refinements, leading to a more readable, scannable, and user-friendly<\/strong> layout.<\/p>\n\n\n\n

Reflection<\/h2>\n\n\n\n

This phase reminded me that strong design is built on structure, not just visuals<\/strong>. Wireframing helped me think critically about how users find and process information. By testing early and integrating feedback, I learned to refine layouts for readability, consistency, and accessibility<\/strong>.<\/p>\n\n\n\n

The feedback from testing also encouraged me to think more critically about how interactive and visually interesting elements, like collapsible FAQs or image carousels, can make a design both engaging and functional. Overall, this process helped me grow as a designer by strengthening my ability to analyze user behavior, iterate based on feedback, and prioritize clarity over decoration<\/strong>. Overall, this experience strengthened my understanding of how thoughtful organization, hierarchy, and iteration<\/strong> lead to better user-centered design.<\/p>\n\n\n\n

\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n<\/figure>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

In this stage, we turned our sketches and sitemap into wireframes to define layout, hierarchy, and navigation. The wireframes helped us focus on clarity, consistency, and usability before moving into high-fidelity design.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-80","post","type-post","status-publish","format-standard","hentry","category-blog"],"_links":{"self":[{"href":"https:\/\/sova.ourcloud.ou.edu\/elliott\/wp-json\/wp\/v2\/posts\/80","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sova.ourcloud.ou.edu\/elliott\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sova.ourcloud.ou.edu\/elliott\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sova.ourcloud.ou.edu\/elliott\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sova.ourcloud.ou.edu\/elliott\/wp-json\/wp\/v2\/comments?post=80"}],"version-history":[{"count":5,"href":"https:\/\/sova.ourcloud.ou.edu\/elliott\/wp-json\/wp\/v2\/posts\/80\/revisions"}],"predecessor-version":[{"id":489,"href":"https:\/\/sova.ourcloud.ou.edu\/elliott\/wp-json\/wp\/v2\/posts\/80\/revisions\/489"}],"wp:attachment":[{"href":"https:\/\/sova.ourcloud.ou.edu\/elliott\/wp-json\/wp\/v2\/media?parent=80"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sova.ourcloud.ou.edu\/elliott\/wp-json\/wp\/v2\/categories?post=80"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sova.ourcloud.ou.edu\/elliott\/wp-json\/wp\/v2\/tags?post=80"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}