Loading ...

Responses by Artistsweb

Background: Following two important milestones in 2018, Mediatree’s twentieth anniversary and the launch of GreenerRoadshows, Mediatree wanted to kick off 2019 with the same energy by launching its new website. The objective was to give its audience, large to mid-cap companies and sophisticated stakeholders, a clearer picture of both the brand and the role Mediatree plays in the world of investor relations.

Highlights: The creative direction for the site focused on typography and the use of micro-interactions. Readability was at the top of our development priorities when we set out and made use of clear text and “chunking” to make sure each section was digestible. The micro-interactions encourage users to follow the natural progression of the site from services to case studies.

Challenges: Completely rewriting and re-translating the content. However, with having so much content to design, it was interesting to make it consistent in its flow and creative feel on each page. Having so much content to put into a website can sometimes sway the design into being disjointed and risk it looking like a different website, but keeping a meticulous eye on the finer details and overall creative vision enabled us to achieve a homogeneous result both on desktop and mobile.

Favorite details: The scroll feature on the i of Mediatree. It’s one of the first things users see when they visit the site, and it represents two important values to Mediatree: working discreetly behind the scenes and innovative thinking for its clients. We wanted to find a unique way to prompt users to scroll down rather than the usual UX elements seen on hundreds of websites nowadays.

Navigational structure: Navigational structure was critical to our mission of giving the audience instant access to the key services content. We used the plus icons from the Mediatree logo to create the “mini-menu” and played with micro-interactions to entice users to explore further. The lines in the “plus sign” expand out and create the entire menu block, which also changes color depending on the background.

Technical features: The core build of the site was made using HTML5, CSS3 combined with GSAP and Wordpress rest API for the ajax page loads and transitions. The site runs entirely on the new HTTP2 technology, giving it very fast page loads and having all of the assets on a CDN boost browsing experience. Also, the first load on the homepage has no images at all, thus increasing the site speed further, which is great for user retention and conversion optimization.

media-tree.com

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In