Creating a method for sharing illustrations created with the Moleskine Smart System in the Moleskine Notes app
Duration
2 weeks – December 2022
Team
Erica Congemi – Ideation & research
Regina Mohan – Research & testing
Eric West – UI/UX design & prototyping
Methods
User Interviews, Competitive & Comparative Analysis, Card Sorting, Site Map, Affinity Mapping, Persona, User Flow, Sketches, Wireframing, Usability Testing, Prototyping
Tools
Hand sketching, Figma, Figjam, Google docs, sheets, & slides, Optimal Workshop card sorting
Introduction to the Moleskine Smart System
The Moleskine Smart system as it currently exists enables you to pick up a pen or pencil and create freely on paper first and then quickly transfer your drawings, notes or sketches into digital format so you can continue to organize, edit and share them from your digital device. This conceptual project was a 2-week research and design project with the goal of adding a social networking experience to enhance the needs of Moleskine owners who want to share their work.
User interviews shows that artists need;
- a positive space to share their work
- an easy way to post and get feedback on social media
- a social media outlet where they can get inspiration for my work
- a smaller, specialized platform to share their work
- a way to connect with like minded groups on social media
Problem statement
Artists want an easy way to connect with like-minded people so that they can receive positive engagement and inspiration
Competitive Analysis
Competitive analysis confirmed what we already suspected, that adding a social media component to the Moleskine Smart app would greatly improve users interactions with the system.
Comparititive Analysis
Comparitive analysis of other apps that are not direct competitors showed some examples of how Moleskine could add social elements to what is currently a non-socially integrated app.
Moleskine’s ideal customer is named Karla
We created the persona of Karla to help guide us through this process. Karla personifies our user and is a way to keep the user’s needs at the forefront of our minds as we design.
Brainstorming ways to improve Karla’s experience
How might we
Focus on connecting with like minded artists and posting new work
With limited time, our team decided to focus on the areas that our research users had indicated was top priority.
- Finding other artists to connect with
- a simple way to post their latest artwork that includes daily encouragement to keep posting
- We started the process by developing user flows and quickly moved onto hand drawn sketches
Mid-Fi testing proved us wrong
Mid-Fi Testing Goal – User will be able to create a post of new artwork with less than 3 errors
- Results – 0/5 users were successful
- Average Error Score – 74%
- Feedback – Difficult to post from home page. “Where are my pictures?”
Recommendations
- Move the post artwork button to the top.
- Move challenge out of home page to improve visibility of new posting
- Draw attention to recent drawings
- Provide clear wording for filters
Moodboard
We started the Hi-Fi design phase by figuring out what our users were looking for in the visual design of an app. We looked at what Moleskine users have posted to existing social media sites and found out that art on Moleskine is as varied as artists. Moleskines are used for everything from technical to multi-media collage art. That wasn’t extremely helpful except it gave us a great moodboard!
Hi-Fi prototyping improved visual and user experiences
Next we focused on Moleskines current design palette and the limitations of the Moleskine Smart System. The Moleskine Smart Pen only comes with black ink which limits the color pallete of the art created. The color of the art can be changed post-illustration in Moleskine’s current app but we decided to focus on black and white since that is what the majority of the art would be. The current Moleskine website is mostly black and white with occasional pops of color and uses Brandon Grotesque for it’s font.
We took Moleskine’s current black and white branding and applied it to the design of our app with an occasional color to attract the eye to important content. We didn’t have the option of Brandon Grotesque in Figma but used Balthazar as the closest font that we had available.
We took the feedback from our users and implemented it in the new design style.
We created a notification symbol that overlaid the gallery icon to remind the user to post their new work. Selecting the gallery when the notification is active pops up an overlay with the option to post your latest artwork.
- Added to the Explore page to highlight recommended groups and added more group details when the user navigates to the Groups page
- Removed the daily challenge form the homepage and added it to the profile page to reduce confusion
- Created a bold version of the page icons to indicate where the user was in the app
- Changed wording on the Post Filters page to move clearly indicate the functionality of each toggle
Feedback and next steps
The users successfully completed all of the tasks without errors but still suggested changes they thought would improve the overall usability of the app.
- Move the image on the profile to top and behind the profile picture (see how instagram does it)
- Increase size of the icons. It was difficult to tap on small screens
- Change the page icons to orange when on page vs bolder.
- Make + icon at bottom larger to draw eye to post icon