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.
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
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.
- 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.
- 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.