Vossier Brief #1: Dreamer.ai

Vossier is a weekly challenge to work on the interface design of a brief created by the team at Mikleo. Every fortnight you’re given a made-up brief for a made-up company and asked to create the design files for the project. It’s a nice, and free (as in beer), way to hone your design skills.

I recently decided to take part in Vossier, but also decided to put a spin on it. As well as working to create a user interface for the challenge given, I’ll also be looking at expanding each project (primarily the iOS-based ones) into full-fledged project designs. And I’ll be sharing what I make on here.

So, let’s get started!

The Brief

We’re Dreamer.ai, a startup based in Berlin and we’ve created an app that can trigger lucid dreams.
In a lucid dream, the dreamer is aware they’re dreaming and they have control of how the dream unfolds and progresses. Lucid dreaming is an exciting tool for learning and we’re hoping to change the way the world dreams forever.
At this stage, the app is predominantly backend code. There’s a front end interface, but it’s weak and the experience is poor, more than that, we need something to show investors.
We haven’t got a logo or any art direction set yet, but we do have plenty of information on what we’ll need from you to make this project a success.

My Initial Designs

I knew from the off that I wanted to use the cloud metaphor in the design of this application. It’s an image we often associate with dreaming, and it seemed like the perfect image to use in parts of the application.

With this in mind, the initial design draft of the application had multiple, multi-coloured clouds on the login screen.

My first attempt

This screen was definitely “striking”, but in the wrong way. The overuse of non-harmonious colour resulted in a rather garish screen.. Following some feedback, I decided to go to one cloud, and try out different colours for the background.

Trying out different colours for the Dreamer app interface

It became clear from this that I wanted to use purple as the background colour for the application. It offered the deep colours we associate with night and sleep, but without being so dark to verge on black.

Trying out different state indicators

Once I had decided on the main design direction of the application — the background colour and the cloud metaphor — I then played around with the state indicators that would be needed at various points through the application. In the above screenshots, you can see the two forms of username and password indicators I used. One based on underlining and the other on an icon at the end of the line.

I decided I preferred the underline, as it gave a clearer indicator of state, one that didn’t require someone scanning to the end of the line. But, the colour needed work.

After some discussion with Luke Jones, I decided on a basic red and green colouration of the status indicators. These are literally #FF0000 and #00FF00. I also boosted the weight of the lines, a decision that was later reversed.

SO MANY SCREENS!

Above, you can see the final iteration of the application design, which included a login screen (more on that in a moment). You can see that the cloud on the login screen slowly moves from left to right, just like it would in the sky. The status indicators are matched with microcopy to help you understand what’s going on, and a “Reset password” button appears after a couple of failed password entries.

I also added an emoji-based “How did this dream make you feel?” screen, helping people summarise in one icon how they felt in their dream. I may change this to show a keyboard icon in the bottom right, so that people can choose their own emoji.

Why A Login Screen?

After stepping away from Sketch for a couple of days, a question popped into my head: “Why does Dreamer need a login screen?”.

It’s a personal belief, but I do believe that people should be in control of their own data. And dreams, some of the most personal moments in our life, are definitely our own data.

So, what if we removed the link to a backend server with identifiable credentials? What if we could use iCloud and CloudKit, provided by Apple, and offer the reliability of cloud storage and the power of server-side code without needing to store the info ourselves?

And, because iCloud and CloudKit are set up by Apple when a device is activated, we wouldn’t need a forgettable login and password. The app just starts. A win-win!

And with that, we have an application that helps people log their dreams and stores them safely and securely on Apple’s privacy-focussed iCloud infrastructure.

Things I Could Improve

This is one of the first applications I’ve designed, so there’s likely a lot that I could do better. For one, I think the “Choose custom emoji” button on the feelings screen could do with work to make it more obvious what it is. And perhaps a change of colour, as the yellow (based on the Apple emoji background colour) isn’t used elsewhere.

I’d also like to design a Home Screen icon for the app, and perhaps play around with designs for widgets for Notification Centre and 3D Touch. Perhaps the app should also be locked behind a passcode/Touch ID.

But, as we’re not actually making this app, these decisions can wait. And perhaps crop up in future Vossier projects I do.