La Chaine du Droit

Web Design

La Chaîne du Droit challenges the old way of tackling legal issues. It believes that legal information should be free and accessible to the public. To help them achieve this goal, I created a website prototype that is pleasant and intuitive to use.

User Flow

La Chaîne du Droit is a not-for-profit platform for generating and disseminating legal information to the public through video. It needs to steer users to the answers they seek in a short series of intuitive interactions. It also needs to allow users to submit new questions and allow experts to contribute. To achieve this, the first step was to create a flow outline for the website. Flow outlines focus on creating the smoothest flows for users to achieve their goals.

Wireframes

At this stage of the design process, the focus is on content. Ideas are young and unpolished. Wireframes are the skeleton. They establish the site’s layout, hierarchy, and the relationships between elements. Wireframing allowed us to make uncompromising design decisions. It worked as a tool, as a means to an end: a working prototype.

Iconography

An icon is a graphic representation of an element that needs to work in a harmonious family. From standard icons like “close” to specific icons that represent LCDD’s legal categories – we assembled a unique family of icons that will speak to users.

Colour

Colour is an important element of brand identity. The palette was inspired by La Chaîne du Droit’s logo. It includes bold hues, muted shades, and bright accents. The colours embody a new kind of professionalism.

Mockup & Prototype

Mockups help stakeholders see the final product. They allow us to see how our visual decisions work together. We created high fidelity mockups using Photoshop. This was the perfect test of our layout, colours, typography, contrast, and spacing. Through several iterations, the mockups took us from wireframes to prototype. A prototype demonstrates the behaviour. It is a simulation that allows us to test the website before finalizing it. We used inVision to turn our static mockups into clickable, interactive prototypes.
An image of a website design
An image of a website design
An image of a website design
An image of a website design