{"id":120,"date":"2025-12-08T20:34:41","date_gmt":"2025-12-08T20:34:41","guid":{"rendered":"https:\/\/sova.ourcloud.ou.edu\/portfolio\/mariannsalinas\/?p=120"},"modified":"2026-02-10T17:59:17","modified_gmt":"2026-02-10T17:59:17","slug":"viscomm-website-ux-design","status":"publish","type":"post","link":"https:\/\/sova.ourcloud.ou.edu\/mariannsalinas\/2025\/12\/08\/viscomm-website-ux-design\/","title":{"rendered":"Viscomm Website UI\/UX Design"},"content":{"rendered":"\n
\n
\n
\n
\"\"<\/figure><\/div>\n\n\n\n
\n\n

Viscomm Website UI\/UX Design<\/h2>\n\n

Visual Communication in OU deserves a proper brand and look, through research, new tools, and teamwork, it produced a new experience when navigating the website. <\/p><\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\n

The Five Stages of Design<\/h2>\n\n\n\n

The Visual Communication Program at OU lacks a website that accurately represents the program. <\/p>\n\n\n\n

We designed a website to display the programs strengths, projects, and possibilities for future students by using the design process.<\/p>\n\n\n\n

\n
View Prototype<\/span><\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/figure>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
<\/div>\n\n\n\n
\n

Approaching the problem<\/h2>\n\n\n\n

Creating the website we used the 5 stages of the Design Thinking Process<\/strong>: <\/p>\n\n\n\n

Empathize \u2192 Define \u2192 Ideate \u2192 Prototype \u2192 Test<\/p>\n\n\n\n

Using this method allowed us to hone in on what would improve and emphasize our program.<\/p>\n<\/div>\n\n\n\n

\n\n\n\n
\n

\u2192 Empathize<\/h2>\n\n\n\n

When using the design thinking process, we had a team of three total students. We had started with the first phase:<\/p>\n\n\n\n

Our goal in this stage of the process is to find competitors<\/strong> to the program at OU. It will be to study their strengths<\/strong>, weaknesses<\/strong>, what additional steps<\/strong> they take as well as what we could learn from them. We tried to think of those who would be our target audience<\/strong> for the project to make our selection.<\/p>\n\n\n\n

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

SECONDARY RESEARCH: COMPTETITOR ANALYSIS<\/h4>\n\n\n\n

When analyzing competitors we had split up between local colleges<\/strong> and neighboring state colleges<\/strong> to spread our scope since many students come from Texas and nearby states. We had picked University of Houston<\/strong>, Oklahoma State University<\/strong> and University of Arkansas<\/strong>. We decided to explore everything when it came to the schools, their social media, their additional websites, anything that would proper context.<\/p>\n\n\n\n

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

Strengths:<\/strong><\/p>\n\n\n\n

    \n
  • Visuals<\/li>\n\n\n\n
  • Social media presence<\/li>\n\n\n\n
  • Compact site<\/li>\n<\/ul>\n\n\n\n

    Weaknesses:<\/strong><\/p>\n\n\n\n

      \n
    • Strong start, lackluster end<\/li>\n\n\n\n
    • Lacks student work<\/li>\n\n\n\n
    • Information is too vague<\/li>\n<\/ul>\n<\/div>\n\n\n\n
      \n
      \"\"<\/figure>\n\n\n\n
      \n\n\n\n

      Strengths:<\/strong><\/p>\n\n\n\n

        \n
      • Video examples<\/li>\n\n\n\n
      • Listed Achievements<\/li>\n\n\n\n
      • Career paths<\/li>\n<\/ul>\n\n\n\n

        Weaknesses:<\/strong><\/p>\n\n\n\n

          \n
        • No dedicated website<\/li>\n\n\n\n
        • Poor website design<\/li>\n\n\n\n
        • No information on faculty<\/li>\n<\/ul>\n<\/div>\n\n\n\n
          \n
          \"\"<\/figure>\n\n\n\n
          \n\n\n\n

          Strengths:<\/strong><\/p>\n\n\n\n

            \n
          • Easy navigation<\/li>\n\n\n\n
          • Informative site<\/li>\n\n\n\n
          • Good amount of imagery<\/li>\n<\/ul>\n\n\n\n

            Weaknesses:<\/strong><\/p>\n\n\n\n

              \n
            • Limited showcase<\/li>\n\n\n\n
            • No interactive elements<\/li>\n\n\n\n
            • Lacks compelling visuals<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n
              \n<\/div>\n\n\n\n
              \n

              From this stage we went full into analysis mode. This included interviews with our intended audiences.<\/strong><\/p>\n\n\n\n

              We had interviewed 1 senior, 2 faculty, 1 alumni, 2 new students, 1 new professor, and 3 parents<\/strong>. These were our focus groups based on who would be visiting the website for information the most. <\/p>\n\n\n\n

              EMPATHY MAP<\/h4>\n\n\n\n
              \"\"
              Interview example done with my parents for our current website<\/em><\/figcaption><\/figure>\n\n\n\n

              When exploring our audiences we had taken notes on what each had provided. We have noticed the biggest points and concerns brought up during the interviews were mostly problematic<\/strong><\/p>\n\n\n\n

              \n
              \n

              \u274c<\/p>\n\n\n\n

                \n
              • No student work<\/strong> available to view on the site<\/li>\n\n\n\n
              • The font is very tiny<\/strong> for the important information<\/li>\n\n\n\n
              • Fails the method of appealing to readers; Fails to be skimmed<\/strong><\/li>\n\n\n\n
              • No clarifying <\/strong>course information<\/li>\n<\/ul>\n<\/div>\n\n\n\n
                \n

                \u2705<\/p>\n\n\n\n

                  \n
                • Website is very simple<\/strong><\/li>\n\n\n\n
                • There is information on studying abroad<\/strong><\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n
                  \"\"<\/figure>
                  \n

                  Some unqiue concerns brought up were language differences<\/strong>. Some had brought up how some might have qualms about future careers<\/strong>, fearful of what success they can gain<\/strong> from this experience.<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n

                  \u2192 Define<\/h2>\n\n\n\n

                  When working through this stage, we had created personas who would be visiting our website. We had focused on their likes<\/strong>, their dislikes<\/strong>, their goals<\/strong>, their motivations<\/strong>, everything that would be important when approaching the design of the website.<\/p>\n\n\n\n

                  PERSONA<\/h4>\n\n\n\n

                  This is Karen Perez, a mother whose child is going into the program. She’s a representation of our parents who we had interviewed. She has a language barrier<\/strong> and due to being older, had difficulty reading<\/strong> the smaller font, and doesn’t feel confident<\/strong> in her child going in due to the website being lackluster in design. She has minor technology knowledge<\/strong> due to her office job.<\/p>\n\n\n\n

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

                  USER JOURNEY MAP<\/h4>\n\n\n\n

                  With this new persona we had made a User Journey Map<\/strong> where we had marked down what the user would be feeling while going through our website. It went through the emotions<\/strong>, actions<\/strong>, and touch points <\/strong>throughout the experience.<\/p>\n\n\n\n

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

                  \u2192 Ideate<\/h2>\n\n\n\n

                  Throughout the ideation phase, we had taken in all our insights from the previous phases, creating a smooth<\/strong> and coherent interface<\/strong> that our users would benefit from<\/strong>, gaining the most insight from our program.<\/p>\n\n\n\n

                  CREATIVE MATRIX<\/h4>\n\n\n\n
                  \"\"<\/figure>\n\n\n\n

                  SITE MAP<\/h4>\n\n\n\n
                  \"\"<\/figure>\n\n\n\n

                  We created a site map<\/strong> based off all our prior notes and had started to work based off this general outline. This design came from all the prior feedback<\/strong> from our interviews. These would turn into the sketches for our upcoming wireframes<\/strong>.<\/p>\n\n\n\n

                  SKETCHES<\/h4>\n\n\n\n
                  \n
                  \"\"<\/figure>\n\n\n\n
                  \"\"<\/figure>\n<\/figure>\n\n\n\n

                  \u2192 LO-FI prototype<\/h2>\n\n\n\n

                  Using the sketches, information and feedback during the ideate phase, we had begun to create our wireframe<\/strong> our low-fidelity<\/strong> prototype to begin to visualize our website design. It used the previous input of major concerns such as font sizing<\/strong>, an option in order to change the language<\/strong> as well as including multiple visuals<\/strong>.
                  <\/p>\n\n\n\n

                  WIREFRAME<\/h4>\n\n\n\n
                  \n
                  \"\"<\/figure>\n\n\n\n
                  \"\"<\/figure>\n\n\n\n
                  \"\"<\/figure>\n<\/figure>\n\n\n\n

                  Users will be able to easily navigate<\/strong> to each topic that they are interested in with strong visuals<\/strong> and easily found interface tools<\/strong> to guide them to their needed page.<\/p>\n\n\n\n

                  \n