In response to a client's request for an investor relations site that breaks away from the conventional mold, one of the main objectives of this project was to merge aesthetics with usability. Recognizing the potential for investor sites to feel dry and unengaging, the goal was to craft a visually compelling platform that mirrored the client's vibrant company culture. Another key goal was to ensure the site served as a comprehensive hub for investors, housing all necessary information and resources within a user-friendly interface. Additionally, the client sought to introduce moments of delight and intrigue through playful easter egg elements, breaking away from traditional investor relations sites while maintaining professionalism. The project also aimed to cater to user preferences with both light and dark modes for the site. I contributed as the main web designer on this project, collaborating closely with an art director, producer, and developers at Column Five Media.

This project was initiated with thorough research, audit, and competitor analysis of other investor sites, followed by a sitemap creation and wireframing phase that laid the groundwork for the design phase.

To create a modern and visually appealing investor relations site, typography, a minimal color palette, and a bright accent color were incorporated to infuse the design with vibrancy while maintaining simplicity. An organized and structured layout was adopted to ensure easy access to essential resources and documents for investors while maintaining a fresh and contemporary appearance. Adding an element of surprise and engagement, an emoji rain effect was integrated into the stock information section on the homepage. By clicking on the “stock information” card in the top right corner, users can expand it to reveal quick stock details, this expansion triggers a cascade of money emojis— an unexpected and playful interaction. Additionally, a color toggle was introduced in the side navigation, allowing users to seamlessly switch between light and dark modes to suit their preferences.

Note: All content and copy showcased in the design mockups are placeholders used for illustrative purposes only and do not represent real information, for confidentiality reasons.

In the wireframing phase, high-fidelity wireframes were developed with multiple layout options and content organization approaches. Iterations and client feedback led to the selection of the preferred wireframe, setting the stage for the design phase.