Design
Here are the designs for each of the major screens of the web application and of the mobile application. Please note that these are subject to change in response to Dr. Valafar's preferences.
- Image carousel details follow in the Log In Page examples.
- In this page, users can register themselves with the web version of Delta.
- If a user already has an account, then they can click "Have an account?" to be transferred to the login page.
- Upon registering, users will be moved to Registration Page Part 2 to add an organization if they have one.
- Here you can check if a user is part of an organization or not
- Each organization has a code associated with them, for now Delta itself will manage organizations (ie users cannot create them)
- Regardless of if a user has an organization or not, they will be moved next to the home page.
Basic Log In Page for the Delta Web App. Components include:
-
Image carousel on left half of screen
-
Login in credential fields
-
Sign in button to submit credentials
-
Link to Registration page for users without accounts
-
Upon log in move to home page.
Another example of types of images that will rotate in the carousel.
-
The carousel will display an assortment of people doing various activities to subtly reinforce the base function of the app. That is to track biometric data.
-
Images will have uniform size format. For purposes of this proto-type they are not.
-
Examples of the types of images that will rotate around the image carousel, presented in a continuous stream.
-
Images depict various activities or behaviors people engage in, close-ups of the types of app users, the outdoors or landscapes, or anything that implies an activity or behavior.
-
Expectation is that Delta will be used by a diverse pool of users.
-
Some want to track biometrics to change behaviors; others want to use it as a research platform; and some may use it for community.
-
Images will have uniform size format
-
Cycle through the images using a fixed time
-
Images will flow in a seamless manner, perhaps with fade in or out effects, to aid the transition. Goal is to minimize clashing elements, or at least the stark contrast between some elements in the carousel. For example, a simple fade in and out effect between an image of a person exercising in the bright outdoors and group of people enjoying the night life.
-
Home screen. Two sections "At a Glance" and "Detailed View".
-
"At a Glance" shall be very graphical. Detailed view can have more information.
-
Information is tailored for user uses's: ie if someone is using Delta to monitor exercise, then the graphs would show things like "Recognized exercise minutes" whereas if a user focused on uploading models or datasets, the graphs would show "Download counts today for your model X" or "Number of models created based on your dataset Y".
-
"Detailed view" Allows scrollable thru "Today", "This Week", and "Total" categories. Less information is offered for each category than "At a Glance" view.
-
"Detailed View" presents more of an analysis on consumed / uploaded content and their types.
-
Can search a data as well and see info for that day.
- Profile page shall be simple
- Will allow for editing fields
- Generally only used for management of your information
- Page for Downloading Data
- Similar to how Amazon's searching for products is
- Can apply different key words (ie: has above 100 downloads) to potential data types
- Download multiple data sets / models as a zip
- Here you just upload the file.
- After uploading the file a user proceeds to step two, as marked by the navigation bubbles.
- Note: a user proceeds to the next bubble by clicking it.
- On this page you add more info on the file.
- You can name the file upload, tell if it is a dataset or a model, add it to a registered organization, and set viewing permissions.
- Essentially most of the metadata is created here.
- Note: a user proceeds to the next bubble by clicking it.
- This page allows a user to check their entries and add a description to their data.
- Upon the final check users can submit their data.
- Community Page #1
- Shows all of your uploads.
- If you click on an upload, it will give more info, see Community Page (Personal, Detail).
- Community Page #2, Detailing an uploaded data set.
- Detailing an uploaded model looks the same.
- The "See More" links to the model detail page, which is the same as this page.
- Community page for followed users.
- Note that posts are sorted in order of date published.
- Upon clicking a post you go into the same exact style of page as seen in "Community Page (Personal, Detail)"
- Here you can see all of your followed / registered organizations.
- Upon clicking an organization, you go to "Community Page (Detail an Organization)"
- Here you see an individual organization.
- Upon clicking a post a user is taken to the same exact style of page as seen in "Community Page (Personal, Detail)"
- This screen shows up every time a user starts the app
- It is a typical Splash Screen, lasts for about 2 sec
- Here users see a short introduction to the capabilities of the application
- Swipe left / click button to continue to the next boarding screen.
- Simple welcome screen. Swipe left / click button to continue to the next boarding screen.
- Explains that a user can pair the watch with their phone. Swipe left / click button to continue to the next boarding screen.
- Explains that a user can upload the data they collected via their watch to the cloud. Swipe left / click button to continue to the next boarding screen.
]
- Final explanation screen. Tells the user that they can even monitor their own behaviors. Swipe left / click button to continue to the next boarding screen.
- Simple registration screen.
- Contains basic information necessary for registering a user with the system.
- If already have an account, can click the "Already have an account?..." link to be taken to sign in page.
- This screen appears after the user has clicked the "Create Account" button in the registration screen.
- This allows a user to join an organization that they are a part of.
- If they are not part of an organization, then they can click the link to skip this screen and go straight to the home screen.
- Basic login screen.
- Contains information necessary for logging in a user.
- If don't have an account, can click the "Do not have an account?..." link to be taken to registration page.
-
Home Screen
-
Shows user different activity metrics. Notifications are expandable with more information being shown for each topic.
-
Screen is scrollable, with notifications appearing in chronological order.
- This is where users can view their models and data collected from their watch.
- The user is able to click on the "Pair Watch" link to go into the settings and pair their watch if they haven't done so yet.
- To access this page the user clicks on the cloud icon on the bottom of the phone screen.
- This is what the user will see once they click on the model they want to view.
- The user will be able to download the specific model they want to view it.
- The upload button takes them to the upload screen.
- Here you can pick what file you would like to upload.
- Similar to the web upload page, you can add some metadata on the file.
- The back button takes the user back to the cloud screen (top left corner).
- This is the Settings Screen where they can manage all of the apps settings.
- They are able to pair their watches to the app to collect the data.
- To get to this page, the user will click on the the settings icon on the bottom of the phone screen.
- This is the screen where the user will be able to select their watch to pair via bluetooth.
- To get to this page, the user will click on the "Pair Watch" option in the settings page.
- To go back there is a back icon on top of the screen to go back to the regular settings page.
