Objective
The goal of this stage was to transform my wireframes into a polished, high-fidelity prototype that accurately represented the Visual Communication website using real content, defined typography, consistent components, and meaningful interactivity. This phase allowed me to bring earlier research, user needs, and informed decisions to life through a more realistic and intentionally designed experience. I applied the atomic design framework so every element (buttons, cards, icons, and navigation) worked together cohesively. Once the prototype was complete, I used A/B testing to evaluate key design decisions and understand how users interacted with different layouts, effects, and levels of engagement.
Challenges
One of the biggest challenges in this stage was staying flexible when transitioning from low-fidelity ideas to high-fidelity decisions. Once a design direction felt “right,” it was easy to get stuck and lose some creativity. A/B testing challenged those assumptions by revealing where my ideas needed to expand or take a new direction. For example, the hero section, student work cards, and upcoming events section all required rethinking when users responded more strongly to elements I hadn’t initially prioritized.
Another challenge was time management as the project grew in complexity. Building components, refining spacing and hierarchy, and introducing more interactions took more time than expected. Small details like hover features, video elements, and each interaction quickly added up. Balancing that with the need to test, iterate, and consider user feedback pushed me to plan more intentionally and pace out refinements.
Benefits
Developing a fully interactive prototype taught me the importance of consistency and intentional design. Using atomic design kept the project organized and made updates and changes easier, especially as feedback from A/B testing informed changes to components and various layouts. Seeing how users responded to real interactions like hovering, scrolling, clicking, and scanning visual elements, gave me insight into how the smallest of interactions shape the overall experience.
A/B testing was especially beneficial because it provided clear direction rooted in user behavior. The tests showed me which designs were more engaging, which communicated more clearly, and which needed refinement. Instead of relying on my own instincts, I made decisions based on what users actually preferred.
Reflection
This phase helped me grow as a designer by showing how research, structure, and iteration all come together in high-fidelity design. I learned how to balance creativity with clarity and how to adjust when an idea isn’t resonating with users. It also taught me the value of stepping back when I get stuck and pushing myself to explore alternative solutions. The challenges with time management and revisiting earlier decisions ultimately strengthened the final prototype and made me more confident in handling complex design systems. Overall, this experience helped me become more thoughtful, user-focused, and adaptable as a designer.