In 2011, I redesigned a website for a company of puzzles and games.
When I started working for this company that sells puzzles and games, in 2011, the website was very cluttered and hard to decipher.
I chose to make the thumbnails and the fonts larger, get rid or redesign the smallest elements, and rearrange most of the content in horizontal, full-width lines.
The darker or heavier colors were all removed, and replaced with pastel tones and a white background.
Some elements were rearranged within menus or content pages.
Readability, image-driven product navigation and appeal
Footer : container of all the necessary informations, yet discreet and sleek. Pops-up on demand when the user hovers on the menus.
Footer : container of all the necessary informations, yet discreet and sleek. Pops-up on demand when the user hovers on the menus.
Notice how the "search" tool was successfully integrated into the pop-up menu of the footer, to enhance its functionality.
Footer : container of all the necessary informations, yet discreet and sleek. Pops-up on demand when the user hovers on the menus.
Notice the bright colors that have been researched to create an immediate distinction between the different levels of navigation.
The legibility of the "go" arrow icon allows for an easy translation in every language in the world.
Using a word would have created differences of length of the word in different languages and the whole alignement of the page would have shifted on every translation.
This login page favors the sections most visited : the "create new account" section is on the right, for all new users.
The "already registered?" section, aligned on its right, allows returning users to log in.
On the bottom, the "forgotten your password?" section is also presented to the user.
In order to simplify navigation of the users, the three sections have been gathered inside one page. This way, if a user is trying to connect to the website but doesn't yet have an account or has forgotten their password, they are not taken to other confusing pages, but remain on this login page.
The graphical approach of the page favors just one bright color and dark grey type, in three different levels of importance, in order to simplify the readability of the three elements.
In this navigation video, we see an interactive slider. Unlike a normal slider that behaves independently of the user, the slider presented here moves as the user drags his mouse over it. This way, the users can spend as much time as they need to read about the section that best interests them.
On top of that, each slide is a link, allowing the user to look no further and click immediately on what they are interested in.
Also noticeable in the video, the large call-to-action strip that was created to gather more subscribers to a newsletter. Easy to read, with very little text, it encourages graphically the users to leave their e-mail addresses and be notified of actualities.
