Designing VisComm Website: Hi-fi Prototype and Test

The Hi-Fi Prototype stage has been the most valuable part of this project so far. During this phase, we took our wireframes and used the feedback from our usability tests to improve the website. From my think-aloud testing, I learned that my News and Events section needed more clarity—testers suggested adding short text labels to each carousel image. They also felt the Program page could be more dynamic with additional interactions, and they recommended removing the student tab and placing that information elsewhere. I applied these suggestions, and once I began adding images and color, the design started to feel much more complete.

After finishing my initial Hi-Fi design, I moved into the A/B testing process. This involved choosing three UI areas and creating two versions of each so testers could compare them and identify which worked better. The sections I chose to test were the News and Events area on the About page, the Application page, and the class description/student work area on the Program page.

For News and Events, version A used a carousel of upcoming items, while version B used event cards and included a “More News and Events” button. Testers unanimously preferred version B because it was clearer, easier to navigate, and provided more accessible information.

On the Application page, version A opened with a call to action and a button, followed by brief information. For version B, I reorganized the layout to present the steps more clearly. Testers found this version far more helpful—one even said that if they were an incoming freshman, version B would make them feel more confident and excited because they understood exactly what to do.

My final test was on the Program page. In version A, clicking a class opened a carousel of student work. For version B, I redesigned it so each class button revealed a brief description and displayed student work in card form, similar to the News and Events section. Testers found version B simpler and easier to understand.

Working through this stage made me realize how critical testing truly is, without it, I wouldn’t have known what needed improvement. Some parts were challenging—especially deciding how to redesign certain elements for version B and managing components like the program-section overlay—but following the feedback helped guide my decisions. Overall, I really enjoyed this phase because it’s where the website finally started to come to life. Seeing the design grow more polished, usable, and successful is one of the most exciting parts of being a designer.