iMedia is a digital marketing and online experience agency with more than 25 years providing quality solutions to complex business challenges. They specialize in everything from concepting brand strategy to post launch support.
Challenge:
After years of producing exceptional work for their clients and partners, they realized that they had fallen behind with their own online presence. In 2019 I was brought in to help them rethink, redesign and improve their website.
Original design:
Observations:
The page did not mirror the quality of the design solutions that they offered
The UI communicated more of an IT services page and not a marketing agency
The sticky menu, along with an overabundant use of blades gave the impression that every page was squeezed in and struggling for air.
In the case study pages, the placement of the title and service icons pushed all the valuable content below the fold, forcing the user to have to get past repetitive information in order to reach what they had come for in the first place.
Wireframe exploration:
Proposed Solutions:
Modernize the look and feel by establishing a new UI
Make sure the page is up to Web Accessibility standards and best practices
Explore the use of animation and shapes to help guide the user through the pages
Put the storytelling aspect forward so that the user journey is seamless
Animation explorations:
Final UI and design:
Thinking Atomic: By breaking the ui into its most basic elements I was able to deliver the team the building blocks they needed to mix and match assets without the page feeling imbalanced. The shape of the logo was broken down and tuned into a modular graphic element throughout the page. It allowed the use of asymmetry for the site structure while staying within the grid, and by adding a few micro animations made the page more modern and dynamic. It also helped give the page more breathing room, making it feel less constrained.
I expanded the color palette towards slightly warmer colors without getting to hot in order to avoid breaking the brand identity
UI kit:
I used a Serif font for the H1’s to evoke the feeling of a more experienced company. I also made sure to constantly test font size, legibility and color contrasts to make sure the site complied with usability best practices
The use of blades and any other unnecessary elements from on each page were eliminated in order to take advantage of the full with of the browser window. By doing this, asymmetrical layouts were explored to make the pages feel wider
