Skip to content
Abe Park edited this page Dec 3, 2020 · 61 revisions

Youth Mobile App User Experience

201202_FocusGoals Page


New page: FocusGoals, where the list of "starred" tasks appear in a separate page.
Notice the new bottom left icon. When clicked, it redirects the user to the previous Pods page.
The user can be directed to the FocusGoals page by clicking the bottom left icon on their Pods page.
Feature: 1. the user can 'unstar' the task, and the task disappears from the page; 2. the user can check off the task, and the task is flagge to be 'Completed' + checkbox checked; Colors ang sizes may change.

201108_FocusArea Page


Colors ang sizes may change.

201106_PodSelection Page



Colors ang sizes may change.

201028_Size Standard(iPhone11:375x812)



The numbers will change as we progress, so no need to be super accurate with the sizes.
Yet, more importantly, we want to have responsive sizes and spacing. The current frame is iPhone11 (375x812). The design will NOT look attractive if we use the same size values(currently set for iPhone11) and launch the app on smaller devices such as iPhone SE, Android, or iPad. Therefore, we eventually want some of the objects to shrink sizes and space out in response to the device size.
Font used: Roboto (https://fonts.google.com/specimen/Roboto)

201025_Color Palette


On the left are the colors provided by MTW. On the right are the colors that I am actually using in the designs (colors may change).

201021_SignUp Page


Colors may change.

201014_Login Page


Colors may change.

201014_Outcomes Page


Colors may change.

Initial Home Screen, Pod Screen, & Outcomes Screen

homePodOutcomesScreen

Clone this wiki locally