1. About

DIAMON.Do is an app project I made inspired by “To-Do” apps, that aims to combine a to-do list feature with a note-taking app.

Since organization is key in a world with so much noise, things to do and to see, work chores, and leisure options, I wanted to create something that could be just someplace to note down some ideas, as well as an organization app that could remind users of tasks they need to do.

Deliverables

Branding • Low, Mid & High Fidelity Wireframes • Moodboards • Style Guide • Animation • Mockups

Shape

2. Features, Flows & Wireframes

This was the very first project I did for my UI Course. It started with a competitor research phase, where I analyzed other organization and to-do apps like Any.Do and Google Keep, amongst others, to understand common elements and resources, and to identify possibilities to bring something new to my design. After that I started noting down the features I’d like to explore, thought about some of the basic user-flows, and started sketching the first low-fi wireframes.

Shape

3. Mid-Fidelity Wireframes

I wanted to do an app whose main objective would be to make it easy to input a new item, be it a quick note or a reminder. So, the idea was for it not to have a lot of features, at least for its first version, with the “Add New” button having a prominent space on the screen.

Shape

4. Moodboard

While doing the moodboard, gathering references of typography, color palettes, inspirational quotes and images, I realized that the app should have a clean, minimalistic design. The idea was for it not to compete with the notes and information the user would input, bringing the idea of a blank canvas which the user would then fill up with his ideas and things to do.

Shape

5. Stylesheet

When developing the Stylesheet I had a chance to apply some of the concepts I already knew from my graphic design background, paired with the knowledge I learned on the UI course, such as designing icons that could be perceived as part of the same family and thinking about the hierarchy of heading and text styles.

At this stage, I also defined a simple logo for the app, which I did by transforming a document/note icon into a Diamond-like shape. And I decided to try my hand at animating it by using Flinto, and created a simple motion animation.

Shape

6. High Fidelity Wireframes & Mockups

And finally, I designed the high-fidelity screens for the app. I opted for a purple color palette that, aligned with the overall use of white for the inner screens, gave a more elegant feel to the app. 

All in all, this was a project where I got to apply some of the new knowledge I learned in the course, and familiarize myself with several new UI design concepts and tools.