During this combined phase, I translated insights into tangible solutions. I designed and tested wireframes at varying levels of fidelity, built a brand guide, and created interactive prototypes for both desktop and mobile platforms.

 

I began with Low-Fidelity Wireframes, which allowed me to rapidly explore layout ideas and content structure without getting caught up in visual details. These “skeletons” were instrumental in brainstorming and quick iteration.

 

From there, I developed Mid-Fidelity Wireframes, which refined layout decisions and introduced content hierarchy. At this stage, I focused on testing functional elements like button placement, image sizing, and text positioning - getting the structure right before moving to the final visuals.

​

For the mobile version, I did not create separate low- or mid-fidelity wireframes. The content and structure remained consistent with the desktop experience, and the only significant adjustments were layout adaptations and the inclusion of a hamburger menu. This decision allowed me to focus efforts on refining responsive behavior directly in the high-fidelity prototypes.

​

To ensure consistency across all touchpoints, I created a Brand Guide that defined the project’s core identity. This included:

• Color palette

• Typography system

• Logo usage

• Tone of voice

 

The guide helped maintain alignment across all design elements and streamlined collaboration throughout the project.

 

Using this foundation, I then built High-Fidelity Wireframes and interactive Prototypes, bringing the design to life. Afterward, I conducted usability tests with users, gathered feedback, and iteratively refined the design to ensure it met user needs and expectations.