{"id":30,"date":"2025-12-12T20:30:59","date_gmt":"2025-12-12T20:30:59","guid":{"rendered":"https:\/\/sova.ourcloud.ou.edu\/portfolio\/loganstanley\/?p=30"},"modified":"2026-01-25T05:47:18","modified_gmt":"2026-01-25T05:47:18","slug":"30","status":"publish","type":"post","link":"https:\/\/sova.ourcloud.ou.edu\/loganstanley\/2025\/12\/12\/30\/","title":{"rendered":"OU Visual Communication Website Design"},"content":{"rendered":"\n
\n
\n

OU Visual Communication Website Design<\/h2>\n\n

We redesigned the Visual Communication website using design thinking. The primary goal of the website was to fulfill the needs of its users. Conducting interviews and tests, helped to guide the process. <\/p><\/div>\n\n\n

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

During this project we used five stages of design thinking process which are as follows:<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n

Empathize<\/strong><\/h2>\n\n\n\n

At the empathize stage, the goal is to conduct a competitor analysis and understand user needs that need to be included within a Visual Communication website.<\/p>\n\n\n\n

Competitive Analysis<\/h4>\n\n\n\n
\n
\n
\"\"<\/figure>\n\n\n\n

University of Central Oklahoma<\/p>\n\n\n\n

    \n
  • Website Link: https:\/\/ucodesign.com\/<\/li>\n\n\n\n
  • Strengths: Extensively highlights student work<\/li>\n\n\n\n
  • Weaknesses: No information describing the various degree paths that are offered<\/li>\n<\/ul>\n<\/div>\n\n\n\n
    \n
    \"\"<\/figure>\n\n\n\n

    University of Arkansas<\/p>\n\n\n\n

      \n
    • Website Link: https:\/\/art.uark.edu\/undergraduate-program\/graphic-design.php<\/li>\n\n\n\n
    • Strengths: Had information about the degree: a description, studios, and mentioned alumni<\/li>\n\n\n\n
    • Weaknesses: Cluttered and hard to navigate<\/li>\n<\/ul>\n<\/div>\n\n\n\n
      \n
      \"\"<\/figure>\n\n\n\n

      University of Texas<\/p>\n\n\n\n

        \n
      • Website Link: https:\/\/designcreativetech.utexas.edu\/undergraduate-design-program<\/li>\n\n\n\n
      • Strengths: Information on everything: events, faculty, students<\/li>\n\n\n\n
      • Weaknesses: Only mildly redundant category groupings<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n

        Interviews<\/h4>\n\n\n\n

        To gather a deeper understanding of users\u2019 needs, we interviewed a total of nine participants within the categories of students, faculty, and parents.
        We analyzed the interview data using the ’empathy map’ method, organizing each interview into what they did, said, felt, and thought. In short, we found that people had a lot of questions regarding Visual Communication. Without a website, the program has no presence or voice to convey its purpose and reach a wider audience outside of itself.<\/p>\n\n\n\n

        \n
        \"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n
        \"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n\n\n\n

        We then organized related topics within the empathy maps into distinct clusters using affinity mapping process. Through this process we discovered four distinct themes: Information, Engagement, User Experience, and Website Design. Information relates to the various questions people have regarding the program. Engagement relates to how people want to engage with others within the program, such as viewing student work or contacting faculty. User experience relates to the usability or how they would use the website. Website design relates to how people would like the website to be represented or specific features they think could be useful.<\/p>\n\n\n\n

        \n
        <\/div>\n<\/div>\n<\/div>\n\n\n\n
        \n

        Define<\/strong><\/h2>\n\n\n\n

        Based on the findings from the user interview data, we created 3 personas and their journey maps. To reflect the people we interviewed, we chose to focus on students, parents, and faculty as personas.<\/p>\n\n\n\n

        Overall, every persona suffers from a lack of information or the accessibility of it. The student could use a detailed breakdown of the classes and list of resources for her to utilize. The parent would like to know about the classes too, but would also like info about the professors and their educational backgrounds. The professor needs a student gallery that shows student work in order to promote the program.<\/p>\n\n\n\n

        Student Persona<\/summary>\n

        The student, Riya Patel, is meant to be a current student, exemplifying her need to understand the degree and how she can apply it. She has to keep reaching out to faculty and professionals to find more information and opportunities.<\/p>\n\n\n\n

        \n
        \"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n
        \"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n<\/details>\n\n\n\n
        Faculty Persona<\/summary>\n

        Lastly, the professor, William Walter, has to constantly promote the VisComm program, wishing that there was a better way to do so. For one family, he has to dedicate a lot of time and effort to convey the program and its goals.<\/p>\n\n\n\n

        \n
        \"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n
        \"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n<\/details>\n\n\n\n
        Parent Persona<\/summary>\n

        The parent, Jessica Day, knows nothing about her child\u2019s degree and wants to know more. Her journey is filled with questions about the degree, faculty, and facilities.<\/p>\n\n\n\n

        \n
        \"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n
        \"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n<\/details>\n<\/div>\n\n\n\n
        \n

        Ideate<\/strong><\/h2>\n\n\n\n

        During the initial ideation phase, we developed How Might We (HMW) questions based upon the challenges our personas faced. Everyone in the group worked independently to brainstorm solutions and then we discussed them. We selected the most impactful ideas to implement into the website. Each one addresses common problems across our personas: a lack of information about the program, the faculty, and no representation of student work.<\/p>\n\n\n\n

        \"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n
        \n
        \n

        This one of the latest iterations of the Site Map. The home page contains a brief description of the degree along with events related to the program. At the top of the page, four categories are available: program, students, faculty\/staff, and FAQ. The program and student section both utilize a dropdown menu to access other pages. These groups directly address several problems faced by our users, and will contain pages filled with their relevant information.<\/p>\n\n\n\n

        \"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n<\/div>\n\n\n\n
        \n
        \n

        These are the initial exploration of the UI designs through sketches. Some design elements remain fairly consistent across the sketches, such as the top bar. However, almost everything else has a manner of variance, an exploration of other possibilities and opportunities.<\/p>\n\n\n\n

        \n
        \n
        \"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n\n\n\n
        \n
        \"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n\n\n\n
        \n
        \"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
        \n

        Lo-fi Prototype<\/strong><\/h3>\n\n\n\n

        I used the site map as a foundation for my website\u2019s grouping of information and navigation. I used the sketches as inspiration as to how the information is presented. This stage of the project is low fidelity, so the website is just the wireframes: no images, no color, and mainly contains information. All of the buttons and interactions are meant to be done along with the general layout of the pages. The wireframes are meant to be an exploration of the website, not finished for aesthetics, but for usability.<\/p>\n\n\n\n

        \n