Noteworthy

APP DESIGN - PERSONAL PROJECT

MY ROLE
UI Design
UX Design

Visual Design

Noteworthy

APP DESIGN - PERSONAL PROJECT

MY ROLE 

UI/UX Design, Visual Design

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

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

This project is a redesign of my first UI Design Course assignment, previously titled Grafic List.

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

This project is a redesign of my first UI Design Course assignment, previously titled Grafic List.

I was inspired by youtube bullet journals and typography design posters I have collected on Pinterest. I wanted the to-do list app to inspire and motivate the user with a colorful and fun mood board.

I was inspired by youtube bullet journals and typography design posters I have collected on Pinterest. I wanted the to-do list app to inspire and motivate the user with a colorful and fun mood board.

inspiration

I was inspired by youtube bullet journals and typography design posters I have collected on Pinterest. I wanted the to-do list app to inspire and motivate the user with a colorful and fun mood board.

Design Goals

design goals

Design Goals

goals

Users can decorate their to-do list tasks with fun inspired design themes.

Replicate the satisfying feeling of crossing off a completed task.

Make it easy to filter and organize the growing gallery of tasks

Users can decorate their to-do list tasks with fun inspired design themes.

Replicate the satisfying feeling of crossing off a completed task.

Make it easy to filter and organize the growing gallery of tasks

Users can decorate their to-do list tasks with fun inspired design themes.

Replicate the satisfying feeling of crossing off a completed task.

Make it easy to filter and organize the growing gallery of tasks

Initial Userflow

Userflow

Challenges

Challenges

challenges

Highlight the fun: The design of the app needs to compliment the gallery of notes.

Viz heavy: Because visuals and customizing the text is important for the user, I tested my design using high fidelity wireframes with color, fonts and graphics to better understand the pain points.

Paradox of choice: Too many options can overcomplicate the user flow and cause friction. Keep it simple.

Highlight the fun: The design of the app needs to compliment the gallery of notes.

Viz heavy: Because visuals and customizing the text is important for the user, I tested my design using high fidelity wireframes with color, fonts and graphics to better understand the pain points.

Paradox of choice: Too many options can overcomplicate the user flow and cause friction. Keep it simple.

Highlight the fun: The design of the app needs to compliment the gallery of notes.

Viz heavy: Because visuals and customizing the text is important for the user, I tested my design using high fidelity wireframes with color, fonts and graphics to better understand the pain points.

Paradox of choice: Too many options can overcomplicate the user flow and cause friction. Keep it simple.

Exploration Sketches & Balsamiq Wireframes

Exploration Sketches & Balsamiq Wireframes

Exploration
Balsamic

Design Process

Design Process

process

Before I started, I took a look at the previous project and found it lacking in several ways. This was one of my first UI projects when I was learning the software program Sketch, and so I felt much more limited. I wanted to test the previous UI I had created with several users to improve upon the feedback.

Using my outlined goals, I created several user flows to help me understand how many options one would need.

Before I started, I took a look at the previous project and found it lacking in several ways. This was one of my first UI projects when I was learning the software program Sketch, and so I felt much more limited. I wanted to test the previous UI I had created with several users to improve upon the feedback.

Using my outlined goals, I created several user flows to help me understand how many options one would need.

Before I started, I took a look at the previous project and found it lacking in several ways. This was one of my first UI projects when I was learning the software program Sketch, and so I felt much more limited. I wanted to test the previous UI I had created with several users to improve upon the feedback.

Using my outlined goals, I created several user flows to help me understand how many options one would need.

Before I started, I took a look at the previous project and found it lacking in several ways. This was one of my first UI projects when I was learning the software program Sketch, and so I felt much more limited. I wanted to test the previous UI I had created with several users to improve upon the feedback.

Using my outlined goals, I created several user flows to help me understand how many options one would need.

Mid Fidelity Rev 1, MidHi Fidelity Rev 2 Wireframes

Mid Fidelity Rev 1, MidHi Fidelity Rev 2 Wireframes

Wireframes

I sorted the flows by creating some quick sketches, then moving them into balsamiq to clean them up.
It was at this point I realized: because of the visual elements and features of the app, high fidelity wireframes would need some visual elements for testing feedback.

I tested my app with three people to get their feedback and sorted the feedback into three different categories. Navigation, Sorting and Filtering, and Style options. From here I went through several iterations of prototypes.

I sorted the flows by creating some quick sketches, then moving them into balsamiq to clean them up.
It was at this point I realized: because of the visual elements and features of the app, high fidelity wireframes would need some visual elements for testing feedback.

I tested my app with three people to get their feedback and sorted the feedback into three different categories. Navigation, Sorting and Filtering, and Style options. From here I went through several iterations of prototypes.

I sorted the flows by creating some quick sketches, then moving them into balsamiq to clean them up.
It was at this point I realized: because of the visual elements and features of the app, high fidelity wireframes would need some visual elements for testing feedback.

I tested my app with three people to get their feedback and sorted the feedback into three different categories. Navigation, Sorting and Filtering, and Style options. From here I went through several iterations of prototypes.

Screens_transparent

Design Solutions

Design Solutions

design solutions

design solutions

HOMEPAGE

  • Floating buttons are used to highlight the gallery of notes.
  • Three-button navigation used to maximize gallery space.
  • Removed Grafic List checkbox feature to reduce noise 

SORT AND FILTER

  • The search feature was tucked into the top and taken out of the filtering options.
  • After testing, I discovered not all users want to prioritize their tasks. The washi tape can refer to a priority, category, or just be purely aesthetic depending on what the user has in mind.
  • An additional category to washi tapes, pinned items can be automatically placed at the top of the home page.

STYLE OPTIONS

  • Customization options are reduced from four down to two: Theme and Tape Color
  • The size of the note responsive to the text in the note.
  • Themes are now previewed directly on the note instead of a thumbnail menu

HOMEPAGE

  • Floating buttons are used to highlight the gallery of notes.
  • Three-button navigation to maximize gallery space.
  • The checkbox was removed from the note to reduce noise 

SORT AND FILTER

  • The search feature was tucked into the top and taken out of the filtering options.
  • After testing, I discovered not all users want to prioritize their tasks. The washi tape can refer to a priority, category, or just be purely aesthetic depending on what the user has in mind.
  • An additional category to washi tapes, pinned items can be automatically placed at the top of the home page.

STYLE OPTIONS

  • Customization options are reduced from four down to two: Theme and Tape Color
  • The size of the note responsive to the text in the note.
  • Themes are now previewed directly on the note instead of a thumbnail menu

HOMEPAGE

  • Floating buttons are used to highlight the gallery of notes.
  • Three-button navigation used to maximize gallery space.
  • Removed Grafic List checkbox feature to reduce noise 

SORT AND FILTER

  • The search feature was tucked into the top and taken out of the filtering options.
  • After testing, I discovered not all users want to prioritize their tasks. The washi tape can refer to a priority, category, or just be purely aesthetic depending on what the user has in mind.
  • An additional category to washi tapes, pinned items can be automatically placed at the top of the home page.

STYLE OPTIONS

  • Customization options are reduced from four down to two: Theme and Tape Color
  • The size of the note responsive to the text in the note.
  • Themes are now previewed directly on the note instead of a thumbnail menu

Try my Figma prototype :)

try my figma prototype :)

try my figma prototype :)

Designed and made by Samantha Del Rosario, 2020