pratti
pratti_website_memoire.png

Memoire

dashboard
Interface
category
Iconography
just_a_mockup.png

Introduction

Memoire is a note-taking app for Android devices and was originally released in 2016. This page goes over the entire redesign process and considerations for its major 2018 refresh.

Home

Inside the homepage, content is the focus. Since users are able to pick different colors for every note, the app's theme needed to be simplistic, in order to avoid clashing colors. Memoire's pink, however, is used sparingly, serving as a branding tool and a way to differentiate your content from important UI widgets, like the floating action button at the bottom right.

Users can also switch between one and two column layouts to suit their preferences. 


Create

The app supports four note types; these being to-do lists, regular text notes, notes with embedded images and links. While lists, text and image notes have their own details page, link notes function as shortcuts.

Once again, Memoire's branding elements are absent when interacting with colored notes. The floating action button - previously pink - is now monochrome, to provide enough contrast in every situation.


Tags

The tags section contains a simple layout. Adding and editing can be done directly from this screen, and the active entries are displayed with higher elevation to signify a state change. 


Day & night


With its night theme, besides changing its primary colors to dark grays, the colors of all notes were tweaked to better suit the environment. They had their brightness levels lowered and their saturation increased. This helped differentiate the cards from their content - given that the text becomes white throughout the app.

Light



Dark



This helped reduce eye strain within note pages, where the color of the card determines the background.


Icon animations

Animations are one of the core principles of building a modern UI. Not only do they establish a sense of responsiveness, but they can also be used to provide a subtle flourish to the experience. However, animations aren't strictly focused on UI blocks; they can also be applied to icons. Memoire contains several icon animations delegated to important tasks, either displaying state changes but also accompanying transitions to avoid pop-ins and other unwanted breaks in motion.

smartphone
Tap to play
desktop_windows
Hover to play
 

1 Column | 2 Columns

Signals a state change between one and two column layouts.

Search | Voice Search

Replaces the search icon for the voice search icon when opening search.

Expand | Collapse

Used when expanding and collapsing item details in lists.

 
 

Menu | Close

When activating edit options for tags, this icon is used to provide continuity between the regular and edit states.

Reorder | Delete

When viewing advanced options for to-do items, this animatio is used to replace the reorder icon for the delete icon.

Add | Checkbox

Unused due to technical limitations.

 

Interaction sheets

Bottom sheets are Memoire's primary component for displaying contextual options throughout the app.

Sheets have dynamic content. Link note sheets, for example, function differently from the others. Due to the thumbnail taking over the background rather than a specific color, the option inside it was replaced by a 'Copy link' shortcut. When uploading an image, the options become 'Take photo' and 'Choose image'.

If an action in a sheet requires more steps, they can either be displayed with an animation - as is the case for 'Move' - or be invoked through another sheet - the behavior when tapping on the 'Tags' and 'Color' options.


Product icon

Memoire's main objective is to store what you want to keep in mind, what you want to revisit, remember, or create. As such, a notebook was adopted to illustrate that concept.

Adaptive icon (Android 8.0+)

On newer devices, Memoire's icon is made up of two layers. The cover, and the pages.


Widget

Memoire also has a customizable widget that displays all of your cards right on your homescreen.