moleskine case study
DESCRIPTION
A usability case study on Moleskine's legendary notebooks.TRANSCRIPT
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