After passing through the requirements of the talent pool and through the initial stages of the Visual Designer Application Process, each applicant is given a challenge. This particular challenge was to redesign three pages on the Louvre website; the homepage, the paintings page and the Mona Lisa page. As part of the challenge, there was a time constraint of using only 5 hours maximum to complete the task.
IBM DESIGN CHALLENGE
Using the concept of dynamic lines from the background on the original site, I applied that to a reformed brand identity for the Louvre. I simplified the menu into a hamburger icon, made the call to action button front and center with a new set of graphic arrows. I decided to keep the secondary font a serif because at it represents the classical art that is exhibited at the Louvre.
As you scroll past the gallery on the homepage, there is a grid that contains the key pages. My redesign on the left uses the iconic element of a triangle and showcases a new way to present these pages; the triangle is meant to correlate with the Louvre pyramid shape while simultaneously Apart from the bold choice of breaking the traditional grid, I also wanted to play on the idea of "highlighting" in the hover interaction, by using the classic neon colors iconic to highlighter pens.
From a strategic standpoint, I tried to minimize as much information as I could and removing any unnecessary features. This is evident in the simplified top bar, menu and page options.
On the left are some quick hover interactions; simple animation to show that the menu icon is "clickable," and the color fills for the "Buy Tickets" and top menu buttons to show that they are "clickable" as well. The grey and white colors are swatched from the original site.
THE PAINTINGS "HIGHLIGHTS" PAGE
Using the design rules created, the application translates seamlessly in the content of this page. Bringing back that same bold "highlighter" color with the hover interaction and irregular triangle grid. A key difference is that in the original site when you hover over an image, there are a lot of details that appear whereas I have just simplified it to show the title of the artwork. Another information simplification is that in the original despite the fact that
it is known that we are in the "Paintings" section, each image is labelled that, which is redundant. I wanted to make the gallery more image focused, just because when you click on the image the same information is displayed.
The logo is smaller, the call to action button is smaller but still very visible next to the menu icon. As you scroll into the information, the call to action button is still visible in my redesign. Everything from the "Highlights" gallery to the "Search Artworks" bar is simplified to the key information.
On the left, is the information sidebar that appears when you're on the "overview" and "organization" page. I thought it could be an important feature that remains consistent through all three pages.
THE MONA LISA PAGE
Lastly, for the Mona Lisa page the main change is that the images are actually visible on the site. The gallery is refined and follows the design rules that have been applied throughout, one feature that the original site has is that when you hover over the arrow it shows the name of the next artwork so that is featured in the redesign as well.
A new aspect of the website showcased here is the hover interaction over the logo, clicking it takes you to the homepage as expected. Everything else on the website matches the redesign rules set above; the typography hierarchy, the colors, the hover interactions, the gallery and layout.