February 1st, 2015 Clara Chao
Moleskine A case study on legendary notebooks
1
Table of Contents 3 Brand Introduction 4 Competitor Analysis 11 Landing Page | Overview & Analysis 13 Moleskine速 Store Site | Overview & Analysis 15 Main Navigation 18 Pages 21 Solutions 24 Conclusion
2
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 taken a liking to putting out products that reflect the characteristics and personalities of their consumers. With a push towards increasing technological use, and a movement away from analog, Moleskine continued to march forward, capturing 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 appearance 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.
3
Competitor Analysis Although 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 notebooks 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.
4
Baron Fig
Moleskine
Mod Notebooks
5
Baron Fig
Straight-forward and easy-to-use navigation
Clean, dynamic visual front and center
Focusing on the personalization of their branding
Encouraging community participation, featuring social media posts
6
Visually defined sections for easy product search
Friendly invitations to receive e-mail updates
Easy to work with bottom navigation with minimalistic design
7
Mod Notebooks
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 8
Includes a simple stepby-step guide for users
Gives customers a spotlight 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.
9
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 checkout ability with clear invitation to the button.
10
Landing Page
Overview & Analysis: moleskine.com
Directly highlights shop products in a visually graphic arrangement after slider content
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
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 11
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 12
clutter and confusion.
Store Site Overview & Analysis: shop.moleskine.com
Similar to the main site, their storefront includes a visual slider displaying potential points of interest Some of their main features (or fan favorites) are the first products 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 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 discoverable for users and can be a point of confusion.
Additional products are recommended 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. 13
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.
14
Navigation
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 navigation (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 displayed like so, with
15
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. 16
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.
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.
This set of links echoes the main navigation 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.
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 users 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.
17
Pages
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.
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. 18
The search function is large and friendly, with a clear indication 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.
19
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 belong, and are not centered with the page. This particular page can definitely be 20
cleaned up, not leaving any strangely blank areas and unformatted photos.
Solutions
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 Notebooks 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 Moleskine and make their website better?
21
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 different 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 secondary top navigation can easily be added to the bottom navigation, or be included in a drop-down navigation similar to the one in their store site.
22
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 pages 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.
23
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 overall successfully conveyed a message of convenience. Their website reflects their retail presence, allowing for openness and spontaneous creativity. As their products continue 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.
24
25 Moleskine Case Study // February 2015