Designing VisComm Website: Wireframe & Test

As I began creating my wireframes, I relied heavily on the research my team and I collected. From that research, we built a sitemap and several sketches that became the foundation of the design. One of my first priorities was deciding what content belonged under each tab and what those tabs should be called. During the ideation stage, we landed on the following: About, Students, Faculty, Applications, Programs, and FAQs.

With those decisions in place, I started constructing the wireframe by building the navigation bar and laying out each page. I created atoms, turned them into components, and then assembled my organisms so the layout stayed clean and consistent. Since the site isn’t fully complete yet, I used ChatGPT to generate placeholder text, which helped keep the process moving.

As I moved through the wireframing phase, I quickly ran into a few challenges. Some pages felt too empty to stand alone, while others had more information than made sense visually. I had to reorganize content in a way that would feel balanced and approachable for the user. Once I finalized the structure of each page, I added interactions—mostly smart animates for tab clicks and hover states—to make the experience smoother. I also included several carousels for sections like student work, faculty work, alumni work, and upcoming news and events.

Another challenge was staying within the wireframing guidelines. We were limited to muted colors and couldn’t use any images. While this was meant to keep the focus on structure rather than style, it made it harder to keep each page visually engaging. Still, working with only three shades of gray pushed me to problem-solve in ways I didn’t expect and helped me think more intentionally about spacing, hierarchy, and rhythm.

Once the wireframes were complete, the next step was user testing. We had three participants follow the think-aloud method, where they completed five tasks while verbally describing their thought process. This approach helped me better understand how real users experienced the layout. The tasks included locating Professor Raju Maharjan’s bio, finding news and events, accessing senior-year courses, locating student and alumni work, and finding the Visual Communication application.

My first tester was a parent of a Visual Communication student. They navigated most of the site easily but suggested adding short text labels to the news and events carousel, so users know what they’re viewing. They also recommended making the student work images clickable so project details could appear in a pop-up.

My second tester was a current Visual Communication student. They also found the website simple to navigate, but they mentioned that the news and events section was difficult to find since it appears at the bottom of the About page. They felt the Programs page could benefit from more interactions to make the information feel more dynamic.

My final tester, a Visual Communication professor, was able to navigate the site smoothly except for the classes page—he clicked on the “Students” tab by mistake. He suggested removing the Students tab altogether and placing student work in another section, such as News and Events, since that content updates regularly.

Reflecting on the feedback, I realized how important user testing is for refining both structure and intention. Each tester gave me valuable insight into what felt intuitive and what needed adjustment. Hearing their thought processes helped me see the site from perspectives I hadn’t considered, and it pushed me to think more critically about the changes I’ll make in the next stage. This phase has shown me how much growth happens in the messy, in-between parts of design—not just in the finished product.