My role
UI design
Timeline
2 weeks
Tools
Sketch, Figma, Pen and Paper, Procreate, InVision
Design principles, heuristics and patterns
I studied Nielsen’s 10 Usability Heuristics, the Principles of Design, and Gestalt Laws, while researching and analyzing other similar apps and identifying evidence of these design principles and heuristics. I also looked at the UI patterns these apps use for similar problems I am trying to solve and then started thinking about the UI patterns that would be the best choices for my app. I wanted to make sure to not deviate too much from what users consider the norm and at the same time bring some personality to my app.
Rationale and initial ideas
I chose to design a to-do list app for my very first UI design project. I enjoy structuring and organising my tasks and have been using task management tools at work. However, I have not found an app that makes to-do lists fun and engaging. That’s why I often still prefer to write down my personal tasks, goals and to do’s in a paper notebook. Moreover, I like the core functionality, nature and simplicity of this type of app, which I believe helped me to focus on the essential aspects of usability and design.
First set of low-fidelity wireframes
Based on the functionalities, I moved on creating my first set of low-fidelity wireframes. Using pen and paper allowed me to brainstorm the layout and content, considering only the essential content and functionality of the app.
Mid-fidelity wireframes
Inspiration board
Up to this point, I was working primarily in grayscale to fully focus on composition and layout before moving into color and styling. I first looked for visual design inspiration and curated a few inspiration pieces, including colours, textures, typography, imagery, quotes and wording. This helped me to have a clear visual style and direction for my project.
