Noted
Noted
The app was the main element of my senior project, and I truly enjoyed creating the content and design. From research to wireframes, I learned something along every step of this journey.
Read about my process work and experience the app below!
You can also click here to view the XD prototype.
Research
For the first few weeks of the semester, I created a survey and sent it to college students and the general public. I asked questions about current app usage, what they like and dislike about similar apps, and what components (i.e. calendar vs to-do list) they found most important. To my surprise, I obtained 177 responses (146 students and 31 non-students).
Astonishingly, when asked "would you use an app like this," more than half the students said definitely and over 90 percent of students said probably or definitely. When asked what they were looking for in an app like this, several people responded that they want everything to be in one place. Furthermore, when asked what they like/dislike about the current productivity app they use, several respondents said they disliked how “spaced out” the apps were and how they have to “use a different app for basically everything.” From my survey, I have narrowed down what I believe college students want (and very much so need): an all-in-one organizational app with calendars, schedules, and to-do lists/notes that are seamlessly synced together.
Along with my survey, I also spent a lot of time analyzing similar applications and researching UI/UX design. In my final design, I considered Apple design standards, navigation strategies, trending concepts (like neumorphism), general app standards, the thumb zone (especially noticeable in the "add" button on the navigation), and more.
Moodboard
Information Architecture
Though there are similar apps out there, there weren't any that had exactly what I was looking for. I researched as much as I could and created the structure of the app accordingly.
You'll notice some of the content changed (due to user testing, further research, and such), but the final structure is fairly similar.
Low-Fidelity Wireframes
User Testing
I created user tests (like this one) and worked closely with classmates and peers. I made sure users were able to navigate easily, often providing them with a screen and asking them to complete a task. Throughout the project, I kept an open mind while evaluating user needs.
High-Fidelity Wireframes
One of my favorite phases! I was able to design the brand of this app and establish visual elements. I created the icons (i.e. navigation icons), designed the app's visual appearance, established transitional movements, and prototyped it together. The final design consists of over 100 artboards.
Prototype
Here's a prototype of one of my artboards. Adobe XD's new "components" feature made prototyping this app MUCH easier (and saved me time!).
Final Design
App Introduction
Upon startup, users are guided through the app. Watch the introduction video here, or continue scrolling to experience the app.
Calendar
Theoretically, users would have the ability to import their schedules or create one from scratch. Users' assignments and exams would automatically appear in their calendar on the date they are due.
In my survey, I asked students "what would you like to see in an app like this?" Some of the most frequent responses were "ease of use," color-coordinate options, and a "daily note page for classes."
To-Do Lists
Noted automatically generates a primary to-do list based on the user's class assignments. Users can also add or edit additional to-do lists.
When I asked students to rank a list of components "in order of importance," the most requested feature was "to-do lists." I made sure this component was convenient but not too complicated (hence, the automatic list).
Information Hive
The information hive stores cells of information, whether that be class files, class information, or personal life files. Theoretically, if a college was a participating member, the college would create their own hives and cells and provide students access. For example, there could be a hive or cell for college resources.
In my survey, several students really pushed the idea of "combin[ing] both school and life events" with links to "resources."
Customizable Settings
This app is meant to be personalized to fit the needs of each user. Options include color schemes, light or dark mode, edit notification preferences, and more.
More than 30 students who took my survey stated they wanted to be "reminded of due dates." I made sure this option was not only available but customizable as well.
Experience the App
If you have trouble using the example below, click here to view the prototype.