Moleskine
Project Overview
Moleskine, an iconic brand synonymous with craftsmanship and quality stationery, embraces the enduring significance of handwriting in human expression. Internationally renowned, Moleskine has distinguished itself through a commitment to superior materials, timeless design, and a diverse product range including notebooks, planners, bags, and writing tools.
Moleskine crafted the Smart Notebooks Collection, allowing users to freely create on paper with a pen/pencil and seamlessly transfer your drawings, notes, or sketches into digital format.
My role
In my role as a UX/UI designer within the team, I took charge of integrating essential features that were lacking in the company's offerings, drawing insights from user and market research.
Our team consisted of three individuals: Tetiana Olesnevych - User Research and UI Design Lead, Sara Korman - UX Designer, and Nisalda Gonzalez - UX Writer.
Our timeline was a 2.5-week design sprint.
Problems
Current Moleskine users feel a sense of isolation in their creative journey, as they lack a dedicated platform to share their creations with the creative community within the app and on various social media channels.
Creative artists face challenges collaborating and seeking inspiration due to privacy concerns, limiting the potential for a broader creative community.
01
02
Solutions
Integrate a custom social networking feature within the Moleskine app to allow users to share their creations and ideas seamlessly and provide feedback on each other's work.
Implement robust privacy controls, enabling users to choose whether to share their creations publicly, with select individuals, or keep them entirely private.
Business Goals:
Increase overall user engagement within the Moleskine app by implementing a social networking feature, fostering a sense of community among users.
Attract new users to the Moleskine platform by creating a unique selling point – a collaborative and creative space for sharing work.
Design Thinking Process
In the collaborative Moleskine project, my team and I applied the 4-stage Design Thinking model – Discover, Define, Design, and Deliver, ensuring a comprehensive and iterative approach to problem-solving and innovation.
01
Discover
User Research, User Interviews, Competitive Analysis
02
Define
User Persona, Journey mapping, Problem Statement, HMW
03
Design
Sketches, Mid-Fidelity Wireframing /Prototyping, Usability Testing
04
Deliver
Hi-Fi Prototyping, Accessibility, Colors & Typography, Next Steps
01/Discover
User Research
Our journey began with user research, conducting six insightful interviews to comprehend the user journey of sharing creative works on various social media platforms. The analysis of user responses unveiled motivations, preferences, and significant frustrations related to posting artistic creations.
01/Discover
Competitive Analysis
To gain valuable insights into existing solutions available to users, I spearheaded a competitive analysis with my team, focusing on direct competitors. I suggested that we analyze popular social media platforms such as Instagram, Reddit, and Pinterest, emphasizing Element Inventory Analysis. It was crucial for us to understand the features each company offers, ensuring a more convenient and comfortable sharing process for users.
Feed of the community
The highlighted vertical bar includes navigation options for Home, Search, Explore, Reels, Messages, Notifications, Create Post, and Profile.
The vertical navigation bar includes Home, Popular, a list of Topics and Resources; the top search bar.
A post in the community displays the name of the user, a series of photos, along with the timestamp and location.
Stories show a small photo of users along with their names.
Create a new post for the community
The back arrow leads to the previous page with filters.
The option to tag people in the photo.
The option to write a caption, add features such as location and emojis, and the share button.
Feed of the community
The navigation bar includes Home, Explore, and Create Post.
The option to create a new pin or save as a draft.
The search bar and the feed of related topics.
The notifications, the chat, and the profile.
Create a new post for the community
The photo and title that will be shown in the feed, along with the option to add a title, description, link, board.
The option to edit a picture, the top navigation bar, and the publish button.
News feed
A post in the community displays the user's name, content, timestamp, comments, likes and a feature to share with friends.
A list of popular communities; get app; log in; and settings.
Create a new post for the community
The option to choose a community.
A variety of content options for a post include text, the ability to add images, videos, links, or polls.
A content title and description, with the option to either post to the community or save as a draft.
02/Define
User Persona
Then we crafted our user persona, Peige, a creative individual who loves expressing her ideas through drawings using the Moleskine Smart Notes. This helped summarize our design research and remind us of the target audience for our designs.
02/Define
Journey Mapping
To gain deeper insights into Paige's artistic journey of sharing her work on various platforms, my team and I developed a User Journey Mapping. This involved envisioning a hypothetical scenario of Paige drawing her masterpiece, sharing her creative process with the community, receiving instant feedback, and find inspiration for her next work.
02/Define
Problem Statement & HMW
By mapping out Paige's creative journey and pinpointing her challenges and aspirations, we developed a robust problem statement and generated potential solutions using the 'how might we' framework.
Paige, a creative painter passionate about learning and organization, seeks a platform to engage with others, share ideas, and find inspiration.
01
How might we generate a positive experience when engaging with others?
02
How might we create a safe community that encourages users to speak freely?
03
How might we create a way for users to feel confident with sharing their work?
04
How might we encourage expressing individuality without plagiarizing?
03/Design
Mid-Fidelity Prototype
Subsequently, our team collaborated on individual sketches for the new community on the Moleskine Platform. My detailed and thought-out sketches guided the team in developing mid-fidelity prototypes, showcasing key features outlined during user interviews and competitor analysis.
03/Design
Usability Testing
Then we improved the mid-fidelity prototype by making it clickable and conducted usability test with five participants to evaluate how they can efficiently share their work within the new community and pinpoint any specific challenges they might face in the process.
Users successfully completed the task of creating a post.
Users liked the option to share their work within a community.
Usability Score
67%
Users were uncertain how to post to the community.
Users were unsure about the difference between "share" and "post" features.
Before Usability Testing
Users who misclicked
33%
Our team opted to retain the original features of Moleskine in Smart Notes and introduced a new option "post," allowing users to share their work directly with the community from the note page. During usability tests, participants expressed confusion between the "share" feature (intended for sharing on different social platforms) and the "post" feature (creating a new post to community).
After Usability Testing
After obtaining user insights and understanding their frustrations, we implemented changes to the icon at the top center associated with sharing, providing a variety of features related to "share" (including sharing through text, email, different social media, and directly to the community). Other features related to drawing and creating notes were moved to the "edit" feature located on the top right side, making navigation easier for users.
04/Deliver
Accessibility Considerations
Paying meticulous attention to details, I always value a company's brand and ideology, while also prioritizing accessibility in my design approach. Upon reviewing Moleskine's secondary orange color, intended as a bright accent for buttons and navigation, I observed that it didn't align with accessibility standards.
04/Deliver
Colors & Typography
With a focus on accessibility considerations, as the UI Leader, I recommended a new color palette to my team that adheres to accessibility standards while retaining Moleskine's main colors, such as beige and brown. In typography we opted to maintain consistency, aligning with the company's established style.
04/Deliver
Hi-Fidelity Prototype
Finally, amalgamating all design implementations refined through usability testing and applying the company's style with the new color palette, my team and I created a Hi-Fidelity Prototype.
Reflections:
It was challenging to implement new features without physically having the Smart Notebook in hand and having never used it before. Our team relied on various video explanations from the Moleskine website and YouTube reviews to understand the functionality and features of the smart set.
Working in a team of three individuals across different time zones, we frequently met to strike a balance between designing for Moleskine during the Christmas holidays and fostering strong collaboration.
Throughout the design process of implementing new social networking on the platform, it was important for me to collaboratively create a user-friendly and intuitive experience that aligns with user needs and reflects the company's business goals.
Next Steps:
Conduct another round of usability testing to gain valuable insights into users' interaction with the new community, evaluating ease of navigation, feature impact on their choices, and overall clarity.
Execute A/B testing to assess the impact of the new color palette on user experience.
Leverage metrics to continually analyze user behavior and engagement within the Moleskine app following the implementation of social networking features.