The productivity app project helped me understand the foundations of designing with a mobile-first approach.
I looked into Monday.com, Asana, and Notion to research which UI patterns and design principles they were using. This led me to understand what the users would expect.
I converted the paper wireframes I had created earlier into low-fidelity wireframes in Figma.
I applied an 8-column grid with a 16px gutter and a 20px margin to the wireframes to ensure the elements were in alignment.
I applied vertical padding and margin between the elements. By applying a number of pixels which was divisible by 8 (such as 8, 16, 24, 32), I could scale the spacing in predictable steps.
I went ahead and created a series of icons with a similar look and feel using an icon grid.
I began creating a mood board from three words I picket to describe the mood of the app. These were:
I created the mood board because the mood of an app can spark positive emotions in the user and lead to an engaging and pleasurable experience for the user. It will likely lead them to feel more connected to the brand.
After having created the mood board, I was inspired to create an illustration style that backed up the three words I had chosen to define the mood of the app.
To ensure that the user would easily be able to navigate the app and find relevant information, I applied a typographic hierarchy using the 1.250 scale.
In the end, I created mockups to present the product.
