1

MoleskineA case study on legendary notebooks

February 1st, 2015Clara Chao

2

Table of ContentsBrand Introduction

Competitor Analysis

Landing Page | Overview & Analysis

Moleskine® Store Site | Overview & Analysis

Main Navigation

Pages

Solutions

Conclusion

3

4

11

13

15

18

21

24

3

Brand Introduction Moleskine branded itself as the platform for creativity, becoming the very

foundation of legendary notebooks. Offering notebooks, journals, planners,

bags, cases, and writing instruments among other things, the company has tak-

en a liking to putting out products that reflect the characteristics and personal-

ities of their consumers. With a push towards increasing technological use, and

a movement away from analog, Moleskine continued to march forward, captur-

ing today’s digital era by incorporating digital products into their line (such as

Evernote and Adobe).

Moleskine journals are known to have that signature black textured oil-

coth cover, attached ribbon bookmark, and a pocket on the inside back cover—

all bound with stitching to allow the journal to lie flat open. After its appear-

ance on the market in the 1990’s, these journals have taken the world by storm,

giving artists, writers, businesspeople, travelers, doodlers, and anybody with a

pen, a medium to keep all their reflections bound in one place.

4

Competitor AnalysisAlthough Moleskine has proven itself to be the top-ranking journal of choice,

it has fall in short in a few other aspects. Their pricing is perhaps the most

complained about factor that prevents consumers from purchasing their

products. Nonetheless, Moleskine continues to market the way their note-

books provide legacy, a lifestyle fit, and sentimental value—and this is exactly

what their website aims to portray. They use high quality materials for their

journals, and show just that on their website using high-quality, detailed

images. However, other journal companies have done quite the same, slowing

edging their way into the competition with their websites.

5

Baron Fig Mod NotebooksMoleskine

6

Clean, dynamic visual front and center

Straight-forward andeasy-to-use navigation

Focusing on the personalization of their branding

Encouraging community participation, featuring social media posts

Bar

on F

ig

7

Visually defined sections for easy product search

Friendly invitations to receive e-mail updates

Easy to work with bottom navigation with minimalistic

design

8

Attention-grabbing slider once you go to it’s landing page. Has invitations to other pages or to scroll further down

Clear product images in a clean display

Product description is thoughtfully designed to include understanable icons

Mod

Not

eboo

ks

9

Includes a simple step-by-step guide for users

Gives customers a spot-light to showcase their

product success with photographic excellence

Addresses multi-media access to their notebook

using their app, giving a run-down of how to obtain

it. It is also displayed in an immersive experience for

different devices.

10

Very simple selection process to choose your desired notebook—all visible on the landing page with no re-directing

Clean overview without any distractors to focus on your purchase at hand. Easy check-out ability with clear invitation to the button.

11

Landing PageOverview & Analysis: moleskine.com

Directly highlights shop products in a visually graphic arrangement after slider content

Both main content sections are similar in style, with all other sections utilizing novel designs. While there is a lot of content going on, they’ve managed to clean it up by sectioning it off into blocks and using distinct colors

They make an effort to feature their Moleskine community by putting a spotlight on individual posts from their consumers who want to show their work

Displays relevant links on the bottom navigation, with social media and app pages

linked clearly

Slider is highly visual, with many points of interest to look at. Each slider goes

for about 5 seconds each, allowing the user to scan

Moleskine’s highlights

12

While Moleskine’s site is visually enticing with many colorful elements, it’s

landing page is not the direct store page, which is an entirely different site

(although it is linked to it). Their targeted user group seems to be interested,

prospective buyers or their already existing Moleskine community, not online

shoppers just browsing. Their main slider focuses on how their products can be

easily integrated to your lifestyle and how it can fit all of your needs and

preferences, which is why the first two links in their main navigation focuses on

just that.

Unlike their competitor sites, however, they haven’t successfully pitched

one overarching idea once landing on the site—there is too much going on with

way too many links to pay attention to. Further in this case study (on page X),

a breakdown of their navigation will be analyzed, which is perhaps one of their

weak spots in terms of usability. The other websites also seem to have a

singular cohesive color schema throughout the site, with Moleskine’s colors

switchings from screen to screen. Perhaps this could be a run towards variety,

having something for everyone, but it certainly has the potential to just convey

clutter and confusion.

13

Store SiteOverview & Analysis: shop.moleskine.com

Similar to the main site, their storefront includes a visual slid-er displaying potential points of

interest

The main header and navigation are not actually visible once you visit the site, and will only see it once you scroll further down; this may not be so easily discov-erable for users and can be a point of confusion.

Additional products are recom-mended in a differnt fashion. The number of items seems minimal and doesn’t take up the entire row, leaving some empty space that could be utilized.

Some of their main features (or fan favorites) are the first prod-

ucts to be listed under the slider, displayed in a clean manner, with

a pitch to personalize and ‘Do what you love’, which Moleskine is

saying they can accomodate

14

Being such a prestigious brand that sells top-quality products, their

main navigation for their only online store is not visible unless you scroll

down. Perhaps the users can get used to this, but this is definitely a point of

concern. The user needs to feel as if they are in control with enough freedom

to navigate where they wish, and if this freedom does not seem present at

first glance, it may drive the users away.

The entire page displays an intelligent use of space besides their

recommendations section, which doesn’t fill out to the end of the row. While

this may not be a huge usability error, the blank portion is very noticeable

compared to the other sections and throws off the balance of the site.

The bottom navigation, however, is extremely clean, with three clear-

cut sections; compared to their main langing page at moleskin.com, this one

is much more easy to follow, with absolutely no clutter. The pops of color are

appropriate, and mesh well with the rest of the site.

15

On the main site, the navigation is divided into three regions: the

main sections (Collections, myMoleskin, Philosophy, Shop, and Search),

the secondary navigation (Contact, News, etc.), and the tertiary naviga-

tion (join now, sign in, language). While this displays a plentiful amount

of information, as well as options and calls to action, the numbers of

items to think about is more than enough, and could be cut down to

just the main section. The other two sections can be added elsewhere,

where it is not as interruptive.

After clicking ‘Collections’, you are taken to a page that displays

all of their available collections which include information about each.

The navgiation on the left, however, is much too lengthy, reaching

beyond the actual main content of the page. The options of collections

could be displayed in a way that is easier to follow and perhaps more

visual, instead of just plain text. The main content is also showcaseing

their selections, which means the links on the left can also be dis-

played like so, with

Navigation

16

The store website navigation, however, is much more friendly, with images and a

clear direction of where you are going. Each option along the top includes photos if you

hover over it to give you an idea of where you will be navigating to. The navigation is also

split up into different sections based on what you are interested in looking for; the left

side displays what types of journals they have, while the right side displays the types of

journals fit for a certain preference. Once the links are hovered over, the navigation with

drop down with an animation, decorating a path for which you can choose. The color

scheme is also more visible on their shop site navigation, with an orange hover state to

give the user a system status of where they are headed.

17

The second set of links is not spaced out well, with only one item on the second line. The right portion seems to be a bit empty.

This set of links echoes the main naviga-tion up at the top of the page, but are also not spaced out to fit the entire width of the content. The entire bottom navigation is just a bit cluttered and can be cleaned up with more attention.

These social media links were not customized to the fit the

site’s theme, and seem to stick out (not in a good way). They

can be re-adjusted to fit in the footer navigation better.

While these social media icons were adjusted to fit the theme better, they also seem to stick

out and not fit in very well. The circular theme doesn’t mesh

well with the other elements in this navigation.

These app icons invite the us-ers to visit the app store if they are interested, but again, they are not visually appealing and don’t belond in the navigation

the way they are now. They seem out of place with poor

spacing above it as well.

18

Browsing through the products is a pretty seamless experi-

ence, with a helpful navigation to guide me to where I want to go.

Although I’m unfamiliar with many of their products, the pictures are

helpful in giving me an idea of whether or not I’d enjoy it. Minus a few

errors here and there, the efficiency of use gets a 10 out of 10, with

their products displayed nicely in rows of three; a simply description

and their price is also clearly labeled.

As of now, this small section doesn’t display any pictures or text, and seems to just be

a placeholder of sorts. It is distracting and not helpful

when browsing through the products.

Pages

19

The search function is large and friendly, with a clear in-dication that you are indeed searching for something. The results can be grouped in a way that the user chooses, which is always a plus, as it gives the user freedom and preference.

There is also a nicely formatted error prevention system for

the search feature, giving a list of recommendations that is

arranged nicely as to give the user potential products to look

at. The entire row is fleshed out and matches the width of

the navigation bar up top.

20

This page s an example of how your artwork would be displayed with

your account once uploaded to the myMoleskine section. Under the navigation,

it is clear where you have navigated to, which is nice, and can easily backtrack.

The social media links are quite distracting though, seemingly interurpting the

flow of information going on to the left of the photo. The photo also seems

randomly placed. The 3 larger sections at the bottom also don’t seem to be-

long, and are not centered with the page. This particular page can definitely be

cleaned up, not leaving any strangely blank areas and unformatted photos.

21

The critical areas that need attention include: the social media icons,

ease of navigation, and consistency throughout the pages. There are empty

blocks of space, incomplete rows, and cluttered portions of the page, all

contributing to poor usability. Their competitors Baron Fig and Mod Note-

books both have very crisp websites that draws the user’s eyes to certain

sections seamlessly without interruption. Furthermore, their sections have

a clear start an end without funky padding in between them. Each page

had been mindfully coded. So: how can we help bring solutions to Moles-

kine and make their website better?

Solutions

22

The social media icons, although small, still need the proper attention

and care to be implemented correctly. The icons can be designed in order to fit

the color scheme of the website, perhaps orange and white or orange and tan.

This way, they can blend seamlessly into the bottom navigation; and when they

are included on user pages of uploaded content under the myMoleskine section,

they can be an addition to the success of the page, instead of subtracting from it.

Some of the icons are also redundant, with Facebook and Twitter having two dif-

ferent icons. If they are re-designed into one cohesive icon, it can help keep the

page more approachable.

Concerning the problem of their navigation, the links at the main naviga-

tion header can be cut down to only include the highly important links. The sec-

ondary top navigation can easily be added to the bottom navigation, or be includ-

ed in a drop-down navigation similar to the one in their store site.

23

If ease of navigation is kept as one of the first priorities in terms of usability, the

flow of the website will be so much easier for all the users. The user needs to feel as

if they have control of their paths, so if Moleskine can clearly tell them which direction

they are moving in, their website will prove to be much more navigable.

The last thing that needs to be addressed is the inconsistency throughout the

pages. Some pages have clean margins, while other pages have cluttered elements

scattered all over the place. Some rows are complete, while others are not; some pag-

es demonstrate an intelligent use of space, while other pages do not. The consistency

between pages (and between the moleskine.com site and the store.moleskin.com sitre)

will contribute to the cohesiveness of the entire brand.

24

Conclusion Overall, Moleskine is an extremely successful brand that loves to include their

consumer community into their branding by incorporating them into their website

and social media. They also excel at marketing the idea that they can fit into any part

of their customer’s lives, both on the analog level and on the digital level. Their web

design is a bit much, with many elements attempting to fit in one space, but has over-

all successfully conveyed a message of convenience. Their website reflects their retail

presence, allowing for openness and spontaneous creativity. As their products contin-

ue to pave a legacy for their brand, they have opened a platform for online expression

along with the classic pen and paper approach. Moleskine has masterfully connected

with their customers, insuring their loyalty through high-quality presentation.

25Moleskine Case Study // February 2015