The First Mutative Sample App: Selene
Brief: For the second phase of Project Phoebe, developer Francisco Franco and I collaborated on the very first open-source mutative sample app - Selene. Selene is a notes app with two main screens - the home screen and the note screen. The home screen has tabs for past (archive), present (stateless), and future (reminder). The note screen is minimal, with just a title, text, and toolbar.
The goal of building Selene is to demonstrate simple mutations and their underlying mechanics. We wanted to start small, with two relatively "easy" mutations, to show developers and designers that stepping into mutative design doesn't have to be as daunting as it sounds.
Right now, the app executes two main mutations - the contrast mutation (illustrated above), and an onboarding mutation.
The contrast mutation
The contrast mutation is what it sounds like - Selene can change its contrast in response to your surroundings. As the user enters bright light, the app automatically compensates by darkening button and note backgrounds, and lightening text to white.
The mutation itself is simple, but it introduced new considerations to the design process. To walk through that, let's first look at the mother palette.
The above palette represents all the colors we started with for note backgrounds, text, buttons, and other elements like tab labels and links. After a bit of research (read: walking around outside with various phones in the sunlight), we determined some fast, simple rules for contrast on digital displays.
Basically when you enter sunlight, every color on the display trends toward white. Black text on a white background becomes gray text on a white background. White text on a black background becomes white text on a gray background.
But of course we couldn't simply make the palette trend to black in sunlight, since that would defeat the purpose of the palette (distinguishing note types from one another). So we set a floor to how dark the colors could go, achieving great contrast without losing the distinctiveness of each color.
Mutation as onboarding
The second mutation in Selene is a tool for onboarding.
If the user enters the app without creating a note and lingers on the home screen, or begins swiping aimlessly, the floating action button (FAB) visually transforms into a full-width action with a more explicit label, staying this way until the user successfully completes the action.
The visual transformation is critical, since the transformation isn't triggered by a user's action - it must make visually clear the meaning of the button, both as it transforms to the full-width action and as it transforms back.
Of course there’s the potential for evil here too, or so-called “dark patterns” of UI — it’s easy to imagine for example that a custom mutation (so, if we’re living in the future where Gaia is implemented at the OS level, a mutation that lives outside Gaia) could destroy a user’s muscle memory by for instance switching two buttons with the goal being to increase engagement on one or the other.
But as discussed in this post on Phoebe & Selene, this should be avoided. In order for mutative-design-as-onboarding to work, and indeed for the whole concept of mutative design to reach adoption, it would be necessary to define patterns and best practices. To start, we’d define these based on what we know, and then once we have more live apps, we could define them based on what we learn from users. Hopefully with the next phase of Project Phoebe we’ll begin this work.
The app is in beta, with the open source code available at source.phoebe.xyz.