Amanda E. Willis
user experience designer
iPad and iPhone 5.jpg

Noted UX

Noted is a to-do application that users can use to work collaboratively with other team members or on their own. I'd like to take you through my process for developing the user experience, starting with user personas and research.

User personas

User personas

After doing market research on other popular to-do list apps, I started to narrow down my user base. I developed three personas in a variety of ages and technical abilities. I wanted to understand what each of these users wants and needs.

Decision journey

Decision journey

I developed this chart to help myself understand what it would take for the user to make a decision. This is the start of grasping what keeps a user engaged and willing to adopt a new product.

Emotional journey

Emotional journey

Motivation is a big part of the user experience. I created this chart to gain an awareness of how the user would feel at certain points while creating a task or project. When I conducted interviews with potential users, I was told repeatedly that users wanted to feel accomplishment and it would help for them to see progress was being made.

Beginning of a site map

Beginning of a site map

I conducted a card sorting exercise with seven different users. I identified the titles of the cards and had the users organize them into open categories. I was curious as to what terms they thought were most appropriate for the grouped titles. The results helped me to develop the first site map.

Low fidelity wireframes

Low fidelity wireframes

I selected my tools of choice, Sharpie pens and blank notecards, and got to work on drawing flows. I refined them multiple times after conducting short user tests with a variety of people, asking them how they would accomplish specific tasks. I gained a lot of insight from my users and moved on to a higher fidelity wireframes.

High fidelity wireframes

High fidelity wireframes

I used UXPin to design high fidelity wireframes for mobile, tablet, and desktop versions of Noted. Using the program allowed me to speed up the process of ideation and also allowed me to test functions at a quicker pace. At first I printed out paper copies of my wireframes and had testers explain to me how they would accomplish a task.

More testing

More testing

Later, I made the wireframes interactive by using InVision and sending links of clickable wireframes to potential users. I was able to very quickly gather feedback and update and rethink how Noted would function. Because it was easier to connect with people virtually, I was able to collect a bigger sample size and discover the redundant problems users came across.

Applying UI and A/B testing

Applying UI and A/B testing

I brought Noted to life by first creating a mood board and later establishing a style guide with colors, fonts, icons, and buttons. I applied the guide to my wireframes and continued to refine the experience. It was during this point that I conduced A/B tests to learn user preferences for how to check off a task. My results were overwhelmingly in favor of using a check off box versus having to use a dropdown. My learnings helped me to create the best experience for Noted.