Vossier-Dreamer-Brief.pdf

Login Screen

dreamer-login.gif

Static Version (after animation completes)

All Mockup Files

dreamer-login-static.png

dreamer-dream-journal-1.png

dreamer-dream-journal-2.png

Dream Journal Screen

Rationale

Login Screen

• Overview
  • The user is presented with an animation that shows each part of the login screen in sequence. The design direction is based on the art direction needing to be soft, colourful, and ethereal.
• Inclusion of Illustrations
  • Even though the brief said that these were not needed, it made sense to include them in order to make the login screen more striking to the viewer. Plus, since we are talking about dreams, why not have the user imagine what type of lucid dreams they might experience when they are about to log in? This design direction is also what influenced me to animate the login screen's elements as it would help to ease users into the experience.
• Reference
  • The illustrations for the astronaut and yacht originally came from the following MIT licensed resource: https://undraw.co/illustrations.

Dream Journal Screen (Handles the Dream Entry Workflow)

• Overview
  • The user is pushed right into the dream entry workflow. Since there are six questions, the dream journal screen would step through each question. For example, when a user finishes entering their answer to a question, they would hide the keyboard or editing control and select "Next Question" in order to move to the next question. After the user answers the last question, they could be presented with "Finish Entry" in place of the "Next Question" action and be given the option to edit the entry outside of the dream entry workflow.
• Assumptions
  • This design direction assumes that the display of each entry's date is handled outside the dream entry workflow. So, when the user opens the app to enter a dream entry, they could see a CTA (Call to Action) that shows the user the current date and asks the user if they would like to enter in the specifics for their most recent dream.
• Influences
  • I took a minimalistic approach and took inspiration from the survey tool, called Typeform, in order to make it so that only what's necessary to answer each question is shown.