Noteworthy

APP DESIGN - PERSONAL PROJECT

Noteworthy

APP DESIGN - PERSONAL PROJECT

Noteworthy is a To-Do list app that adds some style to your to-do list. Stay organized with a touch of flair.

Noteworthy is a To-Do list app that adds some style to your to-do list. Stay organized with a touch of flair.

Noteworthy is a To-Do list app that adds some style to your to-do list. Stay organized with a touch of flair.

Noteworthy Hero Shot

MY ROLE
UX/UI Design, Visual Design

MY ROLE
UX/UI Design, Visual Design

DURATION
3 Weeks, Spring 2020

DURATION
3 Weeks, Spring 2020

TOOLS
Figma, Balsamiq

 

Stationery is making a comeback.

A recent trend in years is the bullet journal movement. Many people are turning back to the tactile paper planner to help organize their thoughts, instead of productivity apps.

Stationary is making a comeback.

A recent trend in years is the bullet journal movement. Many people are turning back to the tactile paper planner to help organize their thoughts, instead of productivity apps.

“The feedback that we regularly receive is that the tangible action of writing something down is satisfying. We know people keep and collect their Appointed planners. It’s about a sense of accomplishment, or it’s practical to hold onto them for reference.” - Why Do Millenials love bullet journals? Control. By Oset Babur, Vox

“This more graphical form of journaling might provide unique benefits, several experts believe. Neuroscientist and author Daniel Levitin, for instance, suggests that one of the system's advantages is that it works like an external memory extension.The Science Behind Why People Are Going Crazy for Bullet Journals By Jessica Stillman Inc. 

“The feedback that we regularly receive is that the tangible action of writing something down is satisfying. We know people keep and collect their Appointed planners. It’s about a sense of accomplishment, or it’s practical to hold onto them for reference.” - Why Do Millenials love bullet journals? Control. By Oset Babur, Vox

“This more graphical form of journaling might provide unique benefits, several experts believe. Neuroscientist and author Daniel Levitin, for instance, suggests that one of the system's advantages is that it works like an external memory extension.The Science Behind Why People Going Crazy for Bullet Journals By Jessica Stillman Inc. 

“The feedback that we regularly receive is that the tangible action of writing something down is satisfying. We know people keep and collect their Appointed planners. It’s about a sense of accomplishment, or it’s practical to hold onto them for reference.” - Why Do Millenials love bullet journals? Control. By Oset Babur, Vox

“This more graphical form of journaling might provide unique benefits, several experts believe. Neuroscientist and author Daniel Levitin, for instance, suggests that one of the system's advantages is that it works like an external memory extension.The Science Behind Why People Going Crazy for Bullet Journals By Jessica Stillman Inc. 

“The feedback that we regularly receive is that the tangible action of writing something down is satisfying. We know people keep and collect their Appointed planners. It’s about a sense of accomplishment, or it’s practical to hold onto them for reference.” - Why Do Millenials love bullet journals? Control. By Oset Babur, Vox

“This more graphical form of journaling might provide unique benefits, several experts believe. Neuroscientist and author Daniel Levitin, for instance, suggests that one of the system's advantages is that it works like an external memory extension.The Science Behind Why People Going Crazy for Bullet Journals By Jessica Stillman Inc. 

Most productivity apps aren't about style.

Most to-do list apps focus on simple and clean visuals with minimal customization features.

Most productivity apps aren't about style.

Most to-do list apps focus on simple and clean visuals with minimal customization features.

Competitive Research

Opportunity

Can we create a to-do list app that engages our users by digitizing the tactile experience of hand lettering and bullet journals?

Opportunity

Can we create a to-do list app that engages our users by digitizing the tactile experience of hand lettering and bullet journals?

Design Process

Initially, I designed my wireframes around the traditional features I was seeing. I prioritized search, filtering by priority, and the decorative features. I focused on emulating a gallery wall or moodboard layout, inspired by Pinterest and Instagram.

Design Process

Initially, I designed my wireframes around the traditional features I was seeing. I prioritized search, filtering by priority, and the decorative features. I focused on emulating a gallery wall or moodboard layout, inspired by Pinterest and Instagram.

IntialWires

Initial Userflow

Userflow

How do people organize their task list?

I conducted user research by analyzing how my testers currently used to-do list apps and looked at social media hashtags #todolist and #bulletjournal to get a better idea. 

How do people organize their task list?

I conducted user research by analyzing how my testers currently used to-do list apps and looked at social media hashtags #todolist and #bulletjournal to get a better idea. 

How do people organize their task list?

I conducted user research by analyzing how my testers currently used to-do list apps and looked at social media hashtags #todolist and #bulletjournal to get a better idea. 

75%
of users did not use 'medium' or 'low' priority

75% of users did not use 'medium' or 'low' priority

75%
of users did not use 'medium' or 'low' priority

Most users averaged

3-4
task list categories.

Most users averaged 3-4 task list categories.

Most users averaged

3-4
task list categories.

Goals
Work
were the top categories in which users grouped tasks.

Goals & Work were the top categories in which users grouped tasks.

Task list content averaged

30-60
characters.

Task list content averaged

30-60
characters.

Task list content averaged 30-60 characters.

UserResearch

Mid Fidelity Wireframes

Mid Fidelity Wireframes

Mid Fidelity Wireframes

A to-do list that inspires

I wanted the wall of notes to take up a majority of the screen so that the app immerses the user like a mood board. The notes alternate between two different sizes of a  1:1 square or 3:4 portrait to replicate the off set of gallery walls.

Floating action buttons were chosen to highlight the endless scroll of the gallery feed. 

 

A to-do list that inspires

I wanted the wall of notes to take up a majority of the screen so that the app immerses the user like a mood board. The notes alternate between two different sizes of a  1:1 square or 3:4 portrait to replicate the off set of gallery walls.

Floating action buttons were chosen to highlight the endless scroll of the gallery feed. 

 

A to-do list that inspires

I wanted the wall of notes to take up a majority of the screen so that the app immerses the user like a mood board. The notes alternate between two different sizes of a  1:1 square or 3:4 portrait to replicate the off set of gallery walls.

Floating action buttons were chosen to highlight the endless scroll of the gallery feed. 

 

FloatingGallery
Frame 2

Users want flexibility to organize their tasks the way they want.



From my user research, I knew that users did not prioritize their tasks by priority of high, medium and low. Most users starred or highlighted important tasks rather than ranking them.

I also added a feature to pin important items, and an additional ambiguous label that would be fixed to the top of each note. This was inspired by the popular stationery accessory washi tape.

 

Users want flexibility to organize their tasks the way they want.



From my user research, I knew that users did not prioritize their tasks by priority of high, medium and low. Most users starred or highlighted important tasks rather than ranking them.

I also added a feature to pin important items, and an additional ambiguous label that would be fixed to the top of each note. This was inspired by the popular stationary accessory washi tape.

 

Users want flexibility to organize their tasks the way they want.



From my user research, I knew that users did not prioritize their tasks by priority of high, medium and low. Most users starred or highlighted important tasks rather than ranking them.

I also added a feature to pin important items, and an additional ambiguous label that would be fixed to the top of each note. This was inspired by the popular stationary accessory washi tape.

 

Thumbnail previews aren't enough

During testing, many users desired to preview every style option and font because they could not see the style or font clearly in the thumbnail. Additionally, Shuffle was added as a feature so that users could quickly shuffle through styles for faster note-taking.

Thumbnail previews aren't enough

During testing, many users desired to preview every style option and font because they could not see the style or font clearly in the thumbnail. Additionally, Shuffle was added as a feature so that users could quickly shuffle through styles for faster note-taking.

Thumbnail previews aren't enough

During testing, many users desired to preview every style option and font because they could not see the style or font clearly in the thumbnail. Additionally, Shuffle was added as a feature so that users could quickly shuffle through styles for faster note-taking.

LessisMore

Switching to a higher fidelity medium



For my second and third round of testing, I added some color and visual to the UI as it would be important to test user interaction with the visual cues because of the importance of style.

Switching to a higher fidelity medium



For my second and third round of testing, I added some color and visual to the UI as it would be important to test user interaction with the visual cues because of the importance of style.

Switching to a higher fidelity medium



For my second and third round of testing, I added some color and visual to the UI as it would be important to test user interaction with the visual cues because of the importance of style.

HigherFidelity

Creating a cohesive look

In some of my feedback, many said that it was hard to read some of the notes, and the designs felt a bit random. To create more cohesion, I grouped typography posters together to try and find the most cohesive motif. I decided on using Motif #1, as it best represented an aesthetic similar to popular bullet journal styles. In the future, there could be more opportunities to bring in many different theme packs for the user to download, similar to VSCO photo filter packs.

Cohesive Styles

In some of my feedback, many said that it was hard to read some of the notes, and the designs felt a bit random. To create more cohesion, I grouped typography posters them together to try and find the most cohesive motif. I decided on using Motif #1, as it best represented an aesthetic similar to popular bullet journal styles. In the future, there could be more opportunities to bring in many different theme packs for the user to download, similar to VSCO photo filter packs.

Cohesive Styles

In some of my feedback, many said that it was hard to read some of the notes, and the designs felt a bit random. To create more cohesion, I grouped typography posters them together to try and find the most cohesive motif. I decided on using Motif #1, as it best represented an aesthetic similar to popular bullet journal styles. In the future, there could be more opportunities to bring in many different theme packs for the user to download, similar to VSCO photo filter packs.

Cohesive Styles

In some of my feedback, many said that it was hard to read some of the notes, and the designs felt a bit random. To create more cohesion, I grouped typography posters them together to try and find the most cohesive motif. I decided on using Motif #1, as it best represented an aesthetic similar to popular bullet journal styles. In the future, there could be more opportunities to bring in many different theme packs for the user to download, similar to VSCO photo filter packs.

VisualDesign

Design Solution

Get inspired by your notes

When you open the app, the notes greet you on the page. You can pin notes to the top by turning on the pins feature.

Get inspired by your notes

When you open the app, the notes greet you on the page. You can pin notes to the top by turning on the pins feature.

Get inspired by your notes

When you open the app, the notes greet you on the page. You can pin notes to the top by turning on the pins feature.

Get inspired by your notes

When you open the app, the notes greet you on the page. You can pin notes to the top by turning on the pins feature.

Aninteractivemoodboard2

Flexible organization.

Choose a washi tape color or pin to add some flair or organize your notes for better filtering.

Flexible organization.

Choose a washi tape color or pin to add some flair or organize your notes for better filtering.

Flexible organization.

Choose a washi tape color or pin to add some flair or organize your notes for better filtering.

Flexible organization.

Choose a washi tape color or pin to add some flair or organize your notes for better filtering.

Add some style

Users can add flair to their notes by swiping through infinite style choices.

Add some style

Users can add flair to their notes by swiping through infinite style choices.

Add some style

Users can add flair to their notes by swiping through infinite style choices.

Add some style

Users can add flair to their notes by swiping through infinite style choices.

Cross it off, you did it!

There’s nothing better then being able to cross off a task. Swipe the note to cross it off, and keep it on the board, or swipe the note to hide it.

Cross it off, you did it!

There’s nothing better then being able to cross off a task. Based on their preference, users can show or hide completed tasks

Cross it off, you did it!

There’s nothing better then being able to cross off a task. Based on their preference, users can show or hide completed tasks

Cross it off, you did it!

There’s nothing better then being able to cross off a task. Based on their preference, users can show or hide completed tasks

What users said about Noteworthy

“I really love the different fonts and styles, and there aren’t too many choices so I don’t have to think about it too much. It would be a way to make my to-do list fun, and this could make it more upbeat and make me happy to open the app. ”

- Cat Caudillo, illustrator.

 

“I like all the different options for the themes. I would use this for smaller tasks or quick notes. I think this could be nice for cute reminders or positive affirmation notes, especially because it is so stylized. This could be nice for those people who like to Instagram hand-lettered graphics.

I would totally want to take a screenshot of certain notes I want and make it my iPhone background!”

- Karina Cordon, software engineer.

What's Next?

Although the app gives the user the option of themes to decorate their note, as the user base grows and understands how to use the app, I would consider implementing more customization based on how Noteworthy is used.

I'd love to test more on what subjects users write in their notes. Do users gravitate towards motivational quotes, or are they sticking to more of an errand list? What types of notes end up being pinned at the top? Some testers mentioned that they would consider taking screenshots and sharing their notes on social media.

Try my Figma prototype :)

try my figma prototype :)

Designed and made by Samantha Del Rosario, 2020