PaperTrail
Without filters, without pressure, and without performance.
PaperTrail
Without filters, without pressure, and without performance.
Duration:
3 weeks
Duration:
3 weeks
Team:
3 UX/UI Designers
Team:
3 UX/UI Designers
Role:
UX Researcher & Lead UI Designer
Role:
UX Researcher & Lead UI Designer
Location:
App
Location:
App
Read time: 20 minutes
Overview
Moleskine wants to explore adding a social network associated with their smart notebook line. Paper Trail is a digital record of creativity that captures raw and evolving artistic moments that happen between the pages of a Moleskine notebook.
Moleskine wants to explore adding a social network associated with their smart notebook line. Paper Trail is a digital record of creativity that captures raw and evolving artistic moments that happen between the pages of a Moleskine notebook.
The Challange
Problem
Artists often struggle with self-doubt and isolation, especially in a social media landscape driven by algorithms and perfectionism. The pressure to share only polished, flawless work can make it difficult to create and post authentically.
Aspiring and hobbyist musicians want a user-friendly, modern platform that enables them to create and share music regardless of skill level—without intrusive upselling or clutter. They need intuitive navigation, a clean interface, and clear tools to support both personal growth and teaching others.
Solution
Rather than asking artists to perform or polish their work for an audience, we created a space that honors authenticity, individuality, and power of the creative process — just as Moleskine does.
Design an intuitive, engaging website experience that encourages exploration through improved information architecture, navigation, and layout. Guiding users seamlessly from curious beginners to committed, paying customers.
Takeways
Takeways
Divide and conquer
We decided it was best to divide each step 3 ways, allowing 3 different eyes and view points to help shape and guide our research. This allowed us to be on the same mindset as we navigated the research process.
Make a plan
Plan it out. Using Notion as a tool to make sure we were on track and in order allowed us to move faster than the time we originally gave ourselves for each step. Streamlining the process so that no one is left behind.
Communication is key to success
As this was the first project in a group, we first laid out the foundation for how we should best work. No one's opinion weighed more than the next. If someone wanted to do more, or didn't have the knowledge, we would talk it out amongst the group allowing everyone to grow and learn.
Divide and conquer
We decided it was best to divide each step 3 ways, allowing 3 different eyes and view points to help shape and guide our research. This allowed us to be on the same mindset as we navigated the research process.
Make a plan
Plan it out. Using Notion as a tool to make sure we were on track and in order allowed us to move faster than the time we originally gave ourselves for each step. Streamlining the process so that no one is left behind.
Communication is key to success
As this was the first project in a group, we first laid out the foundation for how we should best work. No one's opinion weighed more than the next. If someone wanted to do more, or didn't have the knowledge, we would talk it out amongst the group allowing everyone to grow and learn.
Research
Competitive Analysis
Competitive Analysis
To ground our understanding of the social landscape, we analyzed platforms like BeReal, VSCO, LinkedIn, Instagram, and DeviantArt. While each offered relevant features, we observed a common theme: interactions often felt one-sided. For artists, this can feel like speaking into a void—or worse, receiving only negative, unconstructive feedback.
To ground our understanding of the social landscape, we analyzed platforms like BeReal, VSCO, LinkedIn, Instagram, and DeviantArt. While each offered relevant features, we observed a common theme: interactions often felt one-sided. For artists, this can feel like speaking into a void—or worse, receiving only negative, unconstructive feedback.
User Interviews
User Interviews
As the next step in our research, we interviewed both professional and hobbyist artists across disciplines such as writing, illustration, and photography. Our goal was to explore how artists navigate the digital spaces used for sharing and storing their work versus the analog spaces reserved for personal use. We asked whether they preferred digital tools, analog methods, or a blend of both in their creative process. We also examined how often they share work on social media, where they draw inspiration, and how they find a sense of community.
As the next step in our research, we interviewed both professional and hobbyist artists across disciplines such as writing, illustration, and photography. Our goal was to explore how artists navigate the digital spaces used for sharing and storing their work versus the analog spaces reserved for personal use. We asked whether they preferred digital tools, analog methods, or a blend of both in their creative process. We also examined how often they share work on social media, where they draw inspiration, and how they find a sense of community.
Here’s what users had to say...
"I am self-conscious about how my work will be perceived and once I post it, I will overthink it."
"I am self-conscious about how my work will be perceived and once I post it, I will overthink it."
“It takes effort to post regularly which is something I don’t have time for.”
“It takes effort to post regularly which is something I don’t have time for.”
“If art isn’t a career goal, then I don’t think it’s necessary to share with others.”
“If art isn’t a career goal, then I don’t think it’s necessary to share with others.”
“It doesn’t feel rewarding to be on social media because it’s stressful, time-consuming, and it doesn’t feel authentic like it used to.
“It doesn’t feel rewarding to be on social media because it’s stressful, time-consuming, and it doesn’t feel authentic like it used to.
Synthesis
Synthesis
Artist Needs:
Based on our interviews we discovered people want:
A supportive and authentic community
To find and engage with smaller niche artists
Inspire and be inspired without judgment
Based on our interviews we discovered people want:
A supportive and authentic community
To find and engage with smaller niche artists
Inspire and be inspired without judgment
Persona
To insure we tackle all of the pain points based on our research, we decided to create two personas that represent the hobbyist and the professional artist. This allowed us to take into account both user experiences that Moleskine fans may face.
To insure we tackle all of the pain points based on our research, we decided to create two personas that represent the hobbyist and the professional artist. This allowed us to take into account both user experiences that Moleskine fans may face.
How Might We’s
Ideate
Wireframes
Our next step was to compile all our information together to find a clear way to tackle the pain points when it comes to art and social media. We began individually sketching ideas. Each one reflects a different priority. I focused on minimalism and clear CTA placement. Georgi integrated social login options. Danqing designed a layout that try to balance form input with brand visuals. This creates a solid foundation as we dove into our visual design.
Our next step was to compile all our information together to find a clear way to tackle the pain points when it comes to art and social media. We began individually sketching ideas. Each one reflects a different priority. I focused on minimalism and clear CTA placement. Georgi integrated social login options. Danqing designed a layout that try to balance form input with brand visuals. This creates a solid foundation as we dove into our visual design.
Lofi & Testing
Does the Prototype Respect the Artist’s Creative Tempo?
Crafted to better communicate Hooktheory’s mission. Our approach balances the platform’s strong educational foundation with a more modern, sleek, and professional aesthetic designed to engage users across all skill levels.
We focused on highlighting the most prominent products and features that are currently driving traffic to the site. This approach lays a solid foundation for future design and interaction improvements, ensuring scalability as new features and content are introduced down the line.
Does the Prototype Respect the Artist’s Creative Tempo?
Participants:
4 Users who resemble our Primary persona David, who value introspection, aesthetic nuance, and intentional digital interactions.
Objective:
Evaluate intuitiveness of prototype navigation and task flow for:
1. Uploading notebook page
2. Setting visibility
3. Browsing community of sketches/poetry
4. Exploring peer profiles (e.g., “Mr. Mango”)
Crafted to better communicate Hooktheory’s mission. Our approach balances the platform’s strong educational foundation with a more modern, sleek, and professional aesthetic designed to engage users across all skill levels.
We focused on highlighting the most prominent products and features that are currently driving traffic to the site. This approach lays a solid foundation for future design and interaction improvements, ensuring scalability as new features and content are introduced down the line.
Participants:
4 Users who resemble our Primary persona David, who value introspection, aesthetic nuance, and intentional digital interactions.
Objective:
Evaluate intuitiveness of prototype navigation and task flow for:
1. Uploading notebook page
2. Setting visibility
3. Browsing community of sketches/poetry
4. Exploring peer profiles (e.g., “Mr. Mango”)
Usability-Driven Improvements
Crafted to better communicate Hooktheory’s mission. Our approach balances the platform’s strong educational foundation with a more modern, sleek, and professional aesthetic designed to engage users across all skill levels.
We focused on highlighting the most prominent products and features that are currently driving traffic to the site. This approach lays a solid foundation for future design and interaction improvements, ensuring scalability as new features and content are introduced down the line.
Add “Back” Icons Improve return navigation clarity
Clarify “Community” vs. “Explore” Differentiate purpose and scope of each section
Improve UI Hierarchy & Layout Simplify structure in upcoming iteration (e.g., whitespace, grouping, typography)
Crafted to better communicate Hooktheory’s mission. Our approach balances the platform’s strong educational foundation with a more modern, sleek, and professional aesthetic designed to engage users across all skill levels.
We focused on highlighting the most prominent products and features that are currently driving traffic to the site. This approach lays a solid foundation for future design and interaction improvements, ensuring scalability as new features and content are introduced down the line.
Add “Back” Icons Improve return navigation clarity
Clarify “Community” vs. “Explore” Differentiate purpose and scope of each section
Improve UI Hierarchy & Layout Simplify structure in upcoming iteration (e.g., whitespace, grouping, typography)
Usability Test
Usability Test
After the low-fi test, we ran another round test and found these problems, inconsistent header and nav behavior made scrolling feel disjointed — so we’re now implementing sticky headers and fixed nav to keep the visual rhythm stable.
After the low-fi test, we ran another round test and found these problems, inconsistent header and nav behavior made scrolling feel disjointed — so we’re now implementing sticky headers and fixed nav to keep the visual rhythm stable.
Design
Design
Color Guide
#FF6630
#FAF7ED
#000000
#29AFDE
#606060
#52873A
The styles, fonts we chose were directly influenced and taken from the Moleskine website and their current Notebook smart app. To keep the brand perception all the same no matter what application you're using.
#FF6630
#000000
#29AFDE
#606060
#52873A
#FAF7ED
Text Styles
The styles, fonts we chose were directly influenced and taken from the Moleskine website and their current Notebook smart app. To keep the brand perception all the same no matter what application you're using.
The styles, fonts we chose were directly influenced and taken from the Moleskine website and their current Notebook smart app. To keep the brand perception all the same no matter what application you're using.
Copperplate Gothic Bold preserves the brand’s heritage and symbolic authority.
Brandon Grotesque bridges the gap with the modern context and digital interface.
Modern&fluid rhythm/Geometric balance/Digital adaptability/ Structured lightness
Copperplate Gothic Bold preserves the brand’s heritage and symbolic authority.
Brandon Grotesque bridges the gap with the modern context and digital interface.
Modern&fluid rhythm/Geometric balance/Digital adaptability/ Structured lightness
Next Steps
Build a more comprehensive Figma design system for the Hooktheory website.
Conduct more usability testing to gather better insights on how to refine the new UI, while ensuring we attract new users and meet the needs of current users.
Conduct more user research to better understand how to balance the needs of new and existing users on the Hooktheory website.
Conduct research how to position Aria as an AI tutor that guides users, rather than an AI that writes songs for them.
For more detailed walkthrough of this case study, contact below!