Tools
Figma, Miro
Role
UI/UX Design, UX Research, Personas, Wireframing, Prototyping, Usability testing
Project Context
During Fall semester of my Sophomore year I took an Intermediate Interaction Design class. This class spent the semester focusing on making an app within the program Figma, making sure that it was something that was iterated upon based on real user feedback.
Problem
I chose to focus on creating an app that helped people, specifically college students, manage their daily tasks to lessen the daily stress throughout the day. It was also focused on making the journaling process easier.
Solution
Building out an app that allowed users to keep track of tasks like a calendar, but also was visually appealing, encouraged you to check in often, and made journaling a few taps away.
Creating a Persona
The first step to finding out who the user for this project was preliminary interviews. This consisted of interviewing three different people with the same 20 questions surrounding mental health, managing tasks, and journaling. These interviews were then summarized and a persona was created.
Three design tenets were also created based on what users seemed to prioritize the most. These three tenets focused on: Consistency being made easy, customization for the user, and an aesthetically pleasing look.
Workflow Sketches
Following the persona, four main workflows were decided based on what the user would want to do within the app concept. The general pathway was drafted within Miro before being sketched onto paper. Each sketch also included which specific design tenets it made sure to focus on.
Lo-Fi & Hi-Fi Workflows
After getting feedback from classmates, I started on my lo-fi workflows within Figma. These workflows made sure to emphasize which design tenet(s) they were focusing on while also including notes that explained the interaction and other parts of the workflow throughout.
Again, feedback was received from classmates before going into making the hi-fi workflows. Creating the hi-fi workflows also included getting feedback on specific branding and design focused choices, such as the colors used in the gradient of the background. Feedback was received and implemented almost ever class session.
Usability Testing and Iterating
After our initial hi-fi workflows were created and properly linked in the prototyping feature of Figma, I tested each of the four workflows with 5 different test participants. Each participant was asked to comment on anything that stood out to them and notes were taken, both based on spoken comments and visual observations, while they went through the workflows.
Using highlighted notes and quotes from participants of usability testing, adjustments were made to each workflow with their comments linked to each change that was made.
Finalized Prototype & Extra Workflows
Once I finished iterating on each of my workflows, I linked all of the finalized workflows within Figma’s prototyping mode to demonstrate what a user going through the app would look like.
Along with finalizing our workflows, I also did additional workflows where the focus was gamification and Android. Gamification specifically focused on encouraging users to keep coming back to the app with features that made the app more fun. For my app, that was things like a daily streak, which I ended up including in my finalized working prototype.
Android workflows were simpler than gamification, as it was focused on making a hamburger menu for some of our original workflows. This included moving some of the buttons around to remove the bottom nav bar and add a menu button, but was a quick process in the end.
Conclusion
The biggest thing I learned from this project was the importance of linking specific user feedback to the changes you make while iterating. Those comments show proof that a change was made because it benefitted the user to make the change. It also made the organized of the project much easier, as the usability testing document could be referenced for each participant to see if they made any similar comments. A similar idea was seen when creating the user persona based on initial interviewing with college students, as design tenets were based on comments from interviewees. This project goes to show not only the importance of being creative while designing, but also backing everything up with direct evidence from real testers.