UI/UX

Web

b2c

imanet.org Updates

Updates to imanet.org included implementing a new design system, color changes, page overhauls, global updates, and new components to generate revenue for IMA.

Year

2024

Company

Institute of Management Accountants

Accessibility & Style Guides

I developed a comprehensive style guide for imanet.org, which incorporated icon, illustration, and color guidelines. Recognizing that many colors in IMA’s original palette did not meet WCAG accessibility standards, I made slight adjustments to several colors to ensure they met the AA level. Additionally, I introduced shades and tints, a contrasting black and white palette, a neutral palette, and form colors derived from the original IMA color scheme.

Global Changes

In enhancing the user experience on imanet.org, I have worked with the dev team to implement global hover states across all 100+ webpages. This change has enabled users to distinguish between static images and quick links with ease. Additionally, to enhance page loading speed and performance, I collaborated with the web team to convert all JPEGs and PNGs to WebP format. This conversion has significantly reduced page loading times across all pages.

Revenue Generating Components

New revenue-generating components have been introduced for imanet.org, including sponsorship opportunities and ad placements. Additionally, I redesigned the course catalog page to improve sponsor visibility.

Updated Pages

We've implemented page overhauls on high-traffic, revenue-generating pages to enhance user experience. The current website's navigation occupies a significant portion of the screen, contributing to scroll fatigue alongside large hero sections. In the redesigned examples showcased, I collaborated with the development team to update and introduce new components that encourage users to engage beyond imanet.org's navigation. This includes revising hero banner formats and adjusting colors to ensure accessibility compliance. All new pages feature hover states and motion elements to enrich the user experience dynamically. Additionally, I designed for four different breakpoints to ensure responsive design across devices.