Moleskine Social

Enabling creatives to build community and engage meaningfully with each other's work.

Timeline

2.5 weeks

Timeline

2.5 weeks

My Role

Product Discovery, User Flows,

Mobile Prototype

My Role

Product Discovery, User Flows,

Mobile Prototype

OVERVIEW

OVERVIEW

OVERVIEW

Product Conext

Moleskine Smart Notebooks are physical notebooks that convert notes and sketches into digital copies that users can share, organize, and modify online.

Design Challenge

This was a concept project where my team was tasked with designing a social networking product to accompany the notebook to enhance the experience of Moleskine Smart users who want to share their work.

Solution

A social networking platform tailored to helping creative hobbyists grow their craft by getting meaningful feedback from the Moleskine community. Moleskine Social lets users showcase and deeply interact with one another's full creative process, from sketches to finished products.

A social networking platform tailored to helping creative hobbyists grow their craft by getting meaningful feedback from the Moleskine community.

DISCOVERY

DISCOVERY

DISCOVERY

Finding a Target Audience

To begin the discovery process, I read reviews online of the Moleskine Smart Notebooks to get a sense of how people used them. I found that the most common use case was note-taking followed closely by sketching and a small group that used it in their professional work.


We chose to prioritize creative hobbyists as our primary user group because our challenge was to address the needs of people who want to share their work. Most note-takers used their notebooks for personal purposes and don't often want others seeing them. Artists however often feel proud of what they've done and appreciate when others enjoy it.

Note-takers?

Creative

Hobbyists!

Business Professionals?

Understanding the Landscape

Next I wanted to understand how existing social networking products are meeting the needs of creative hobbyists and where there are gaps. I looked at 5 direct and indirect competitors to learn how they facilitate discovery, content creation, and connection.

Takeaways

+ Positives

  • Content forward, visually engaging discovery feeds

  • Robust filtering mechanisms

  • Flexible creator tools

  • Content forward, visually engaging discovery feeds

  • Robust filter selection enables easy discovery

  • Advanced creator tools

- Negatives

  • Limited ways to engage beyond comments

  • Focus on accumulating “likes”

  • Overwhelming quantity of content

  • Limited ways to engage beyond generic likes and comments

  • Emphasis on accumulating “likes”

  • Quantity of content can feel overwhelming

Hypothesis

The biggest gap I noticed across these platforms was that feedback on work being shared was largely surface-level. I hypothesized that facilitating deeper interactions about a creator's work would address an unmet need for Moleskine Smart Notebook owners. My team set out to validate this in our user research.

USER RESEARCH

USER RESEARCH

USER RESEARCH

We conducted 5 interviews with creative hobbyists to understand more about their needs and pain points with respect to sharing their work.

I synthesized our research findings into a persona to focus my team's design process.

Meet Katherine, the Community Seeking Creative

Meet Katherine, the Community Seeking Creative

Meet Katherine, the Community Seeking Creative

"When I make something, I want it to be seen and enjoyed by others."

Goals

Frustrations

Discover new and interesting techniques to try.


Connect with a creative community that can help her grow her craft.


Showcase work she's proud of so others can see it.

Getting minimal engagement on her work when she shares it.


Losing motivation to finish a project.


Having negative or hurtful interactions with people about content she's shared.

DEFINITION

DEFINITION

DEFINITION

Ideating Solutions

After brainstorming solutions that would address our persona's needs, my team converged on 3 which we believed would best help her accomplish her goals:

  1. How might we allows users to showcase their creative process when sharing their work?

  1. How might we foster meaningful connections between users?

  1. How might we incentivize users to give feedback?

Key Flows

Since we learned in our competitive analysis that other products were lacking in the how they facilitated deeper types of engagement, we decided to prioritize designing features to facilitate feedback.

DESIGN

DESIGN

DESIGN

Community Feed

We designed a dedicated page that highlights projects from creators who are seeking input. Creators can write a blurb specifying areas they're seeking feedback on to make engagements valuable.

Project Page

Rather than simply uploading a picture of their Moleskine sketches, I proposed creating a "project" feature that gives creators the freedom to arrange their Moleskine content, other images, and pieces of text together to showcase their work and unique creative process.

Annotation & Feedback Tools

We gave users options for how to engage - such as pinning comments to specific parts of the project, or “annotating” using a pen tool. To give more detailed feedback, viewers can fill out a form the creator prefills with questions they'd like perspectives on.

Refining the Contours

Refining the Contours

Refining the Contours

To evaluate how intuitive our features were, we conducted 3 usability tests with a mid-fidelity prototype and asked participants to complete a brief survey after the test.

Positive Feedback

Users quickly understood the mission and aim of Moleskine Social. They appreciated that it highlighted projects whose creators wanted feedback and offered a range of tools to do so.

Opportunities

Users struggled initially to intuit when Annotation Mode was enabled and what actions they could take. It often took them two tries to successfully use the pen and comment tool, so we revisited how we could design better help and guidance.

ITERATIONS

ITERATIONS

ITERATIONS

Orienting the User

I designed a pop-up and wrote the copy to explain what Annotation Mode is to first time users.


I also added a reminder to engage respectfully, addressing an earlier concern of our persona about receiving hurtful comments.

I designed a pop-up and wrote the copy to explain what Annotation Mode is to first time users. I also added a reminder to engage respectfully, addressing an earlier concern of our persona about receiving hurtful comments.

I designed a pop-up and wrote the copy to explain what Annotation Mode is to first time users.


I also took advantage of this space to address one of our persona's frustrations of negative interactions by reminding users to be respectful in an inviting way.

Guidance and Hierarchy

1) Calls to Action
Moved feedback buttons to the top of the page and closer together to highlight most important actions.


2) Annotate Heading
Added a label to indicate when the user has entered Annotation mode as opposed to viewing the project.


3) Feedback Tool Explanations
Added explanations for feedback buttons that appear when hovering over them.

1) Calls to Action
Moved buttons to the top of the page and closer together to reduce cognitive load for viewers looking for how to engage with the content.


2) Annotate
Added a label to indicate when the user is in Annotation mode rather than viewer.


3) Feedback Tool Explanations
Added explanations for feedback buttons that appear when hovering over them.

Prototype & Design System

Prototype & Design System

Prototype & Design System

Solo Effort: Mobile Version

My team prioritized building for desktop because a larger screen was more conducive to interacting with the nuances of an artistic project, however users also expressed a desire to browse content on the go. After the team portion of this project ended, I used other findings from our research to design a mobile experience that focused more on content discovery.

Discovery on the go

I designed a discover tab where users can search for and explore content related to their interests. Since once of the core aspects of Moleskine Social is connecting with others, I made a tabbed menu that allows users to seamlessly switch between content discovery and people to follow.

Adapting to the Small Screen

Navigation: I added a bottom navigation menu to let users easily switch between the core areas of Moleskine Social.

Horizontal Scrolling: I prototyped each home screen section to scroll horizontally so users could explore its contents before clicking to view more.

Dark Mode: To reduce eye strain and improve accessibility, I designed the mobile version in dark mode.