DAYBREAK
Daybreak is an alcohol Support app that helps people from a healthier relationship with alcohol
For this app, I created a basic UI Design System to help with consistency through the colour scheme, layout details and shape selections. Also, for the user interface, I created original icons that corresponded with the general style and were intended to accomplish informative and navigational functions. You can see some of the icons below.
In addition, I created micro animations to support the user by giving visual feedback and displaying changes more clearly.
#Motion for
Emotion
User can share how he is feeling through the app and receive support from Daybreak online community. What the user feels when he uses the app is the reason behind the fact that he keeps using it. this micro-interactions that I designed are a clear sign of the care of a user.
-
They make it easier for users to interact with the app
-
They encourage sharing and commenting on the content
-
They direct users’ attention
-
And, finally, they just make your site more emotional
The color scheme is based on light and airy background that makes the text content highly readable while the color accents easily caught in different conditions of the app use. The current app is using the Green color as primary, so it helped me to understand the vision of the visual style. My idea was to make the app friendly and easy, and round the corners of unpleasant situations by elegant style not provoking any tension or over distraction.
Splash screen: Simple, Bold, and Quick
Regarding to Apple human interface guidelines, the splash screen should be quick. How quick? As quick as possible! “Show content as soon as possible. Don’t make people wait for content to load before seeing the screen they’re expecting. Show the screen immediately, and use placeholder text or graphics to identify where content isn’t available yet. Replace these placeholder elements as the content loads. Whenever possible, preload upcoming content in the background, such as while the user is navigating a level or menu.”
Quick examples
Also, this app is being used regularly (users are opening the app at least once a day). Imagine having to sit through a 3-second Daybreak splash screen every time you want to talk to someone or ask for help!
Fortunately, In this app, we have this opportunity to show the content to the users very quickly and we don’t need to buy time for loading.
Splash screen
Sign up: Clean, Minimal and User-centric
When brainstorming of ideas, I thought maybe some illustrations could be used for the sign up page. I mean, wouldn’t it liven up the pages? *chuckles*. I gave the idea a second thought and decided to do away with illustrations. The presence of illustrations could very well take the user’s focus away from the goal of this app. I wanted to stay clean, minimal and user-centric approach to design.
What’s fun is the copy in the password field: “It’ll be our secret”. I believe little elements of joy in the UI can provide a great user experience for the user and Typeform knows this. This is one way We can show our personality and how trust- able we are.
Other pages: Clean, Minimal and User-centric
Contrast matters. bringing out the bottom form with the its green background, which contrasted with the page’s white background And conversely. It brings focus to the form.
Placeholder text can be useful in a user interface because it provides an example to the user of what to write. Rounded corners making the app more user friendly. I found out that rounded corners take less cognitive effort to visually process. No wonder!
