Mission
Helping one of the principal european telecom brand to redesign his official blog.

With more than 250 million clients worldwide and 155.000 employees, Orange is one of the biggest company I’ve had the chance to work with. As a freelancer this time, my mission was to do a complete redesign their official blog. It was a collab work with my friend Antony Legrand with whom I share the same passion for design (among a lot of things). We've worked together on research, information architecture and UI-UX.

We've had four principal objectives: capitalize on the editorial quantity and quality, serve the innovational and modern part of the brand identity, create more focus on the multiple authors, and finally to consolidate the Orange social network community.  

CHAP 1.0

Research &
Benchmark

We've started the project by doing some benchmark in order to open our minds without any constraint and load up our creativity tanks. We've quickly seen that we were both on the same exact level of design sensibility which has made our collaboration complementary and productive.

FIG #1. FEW WEBSITES WHO'VE STRIKE OUR ATTENTION

CHAP 2.0

Information architecture

The next step was to think about the content and how could we sort, synthesize and organize it in order to follow the brand strategy. Even before thinking about the visual identity, a blog, have to be well organized, easy to browse and of course readable. We've worked together on quick paper wireframing to find a content layout we’ve both liked.

FIG #2. EXAMPLES OF EARLY CONTENT LAYOUT EXPLORATION

At that time we both wanted to try a grid based layout with a vertical split screen for the homepage. Following this way, we could use the left part to present some important content (like featuring, last article, social networks etc.) and the right part of the screen as a simple list to navigate through all the articles. A search module could also help the users to find specific content based on specific filters (date, author, etc.).

Here is a little prototype of how it works:

FIG #3. HOMEPAGE INTERACTIONS LOW-FID PROTOTYPE

CHAP 3.0

Visual design

As you could imagine, a brand like Orange already has a solid visual language and its own guidelines. Our job was to apply the brand identity to the content layout. We used Helvetica Neue and a mix between highly contrasted colors: orange, dark/soft gray and pure white.

FIG #8. VISUAL LANGUAGE

You could see bellow how the visual language of the brand have been applied to the UI modules we've designed.

UI-ElementsUI-Elements

FIG #9. VISUAL LANGUAGE APPLIED TO UI MODULES

CHAP 4.0

A touch of
Responsiveness

The blog had, of course, to be responsive and optimized for touch-screen in order to offer the same level of experience whatever device the reader uses. We've set up different types of layout depending on screen width, in order to target desktop, tablet, and mobile. At that moment of the project, we've decided to split the tasks.

I’ve worked on the mobile version of the website in order to make sure the content will adjust to small screens.

bg-img-mobile-screenshots

Fig #10. MOBILE COMPS

devices img