atn mobile app ui specification...3.0 paypal button click to open paypal information input form....

ATN Mobile App UI Specification


1. Table of Contents

1. Table of Contents --------------------------------------------------------------------------------------- 2

2. Overall Structure (Site Map) -------------------------------------------------------------------------------- 4

3. User Interaction -------------------------------------------------------------------------------------------- 5

3.1 Use Case 1: Register------------------------------------------------------------------------------- 5

3.2 Use Case 2: Sign In ------------------------------------------------------------------------------- 6

3.3 Use Case 3: Book Pod ---------------------------------------------------------------------------- 7

3.4 Use Case 4: Edit a booking ---------------------------------------------------------------------- 8

3.5 Use Case 5:Set up notification ------------------------------------------------------------- 9

3.6 Use Case 6: Share my bookings -------------------------------------------------------------- 10

3.7 Use Case 7: Edit my favorites --------------------------------------------------------------- 11

3.8 Use Case 8: Change password --------------------------------------------------------- 12

3.9 Use Case 9: Edit profile ------------------------------------------------------------------------- 12

3.10 Use Case 10: Mange payment -------------------------------------------------------------- 12

4. UI Specifications ------------------------------------------------------------------------------------------ 13

General Notes ---------------------------------------------------------------------------------- 13

Page 1.0 Home ------------------------------------------------------------------------------ 14

Page 2.0 Book Pod - Pod Preference ------------------------------------------------------ 15

Page 2.1 Book Pod - Destination ------------------------------------------------------ 17

Page 2.2 Book Pod - Order Summary ------------------------------------------------------ 19

Page 2.3 Book Pod - Payment Options ------------------------------------------------------ 20

Page 2.4 Book Pod - Complete Purchase ------------------------------------------------------ 22

Page 2.5 Book Pod - Confirmation ------------------------------------------------------------ 23

Page 2.6 Book Pod - QR Code ------------------------------------------------------------------- 24

Page 3.0 My Network - Map view -------------------------------------------------------------- 25


Page 3.1 My Network - List view ------------------------------------------------------------- 26

Page 3.2 My Network - A friend's booking ----------------------------------------------------- 27

Page 4.0 My Bookings ---------------------------------------------------------------------- 28

Page 4.1 One Booking ------------------------------------------------------------------------------ 29

Page 4.1.1 Remind Me ------------------------------------------------------------------------------- 30

Page 4.1.2 Edit Booking ----------------------------------------------------------------------------- 31

Page 5.0 My Favorites ------------------------------------------------------------------------------ 32

Page 5.1 Edit Favorite ------------------------------------------------------------------------------- 33

Page 6.0 Register --------------------------------------------------------------------------------- 34

Page 6.0.1 Set up Payment ------------------------------------------------------------------------ 35

Page 6.1 Sign In ------------------------------------------------------------------------------------- 36

Page 6.1.1 Forget Password ---------------------------------------------------------------------- 37

Page 6.1.2 Email Confirmation -------------------------------------------------------------------- 38

Page 6.2 Profile ------------------------------------------------------------------------------ 39

Page 6.3 Change Password --------------------------------------------------------------- 40

Page 6.4 Notification ------------------------------------------------------------------------ 41

Page 6.4.1 Newsfeed --------------------------------------------------------------------------------- 42

Page 6.5 Share With Friends -------------------------------------------------------------------- 43


2. Overall Structure

* Boxes have been labeled with page numbers. The boxes that do not have a page number are

categories or popup windows. They do not have a corresponding page.


3. User Interaction

3.1 Use case 1: Register

Description

The first time users can create an account on this app, or the users who

already have an account but want to create a new one.

Task flow

Pages 6.1 Sign in; 6.0 Register; 6.0.1 Set up payment


3.2 Use case 2: Sign in

Description

For the users who already have an account. A new user has to do

registration first.

Task flow

Pages 6.0 Register; 6.1 Sign in; 6.1.1 Forget password; 6.1.2 Email confirmation


3.3 Use case 3: Book pod

Description

The main function of the app is to book a pod. There are multiple approaches

to achieve this goal. It may take many steps for the first time users, but can

also be very quick for experienced users (the blue line in the task flow).

Task flow

Pages 2.0 Pod preference; 2.1 Desination; 2.2 Order summary; 2.3 Payment

options; 2.4 Complelet purchase; 2.5 Confirmation; 2.6 QR Code; 5.0 My

favorites; 3.0 My network - Map view; 3.1 My network - List view; 3.2 A

friend's booking


3.4 Use case 4: Edit a booking

Description

Users can make changes on a booking if it is not used yet. Basically, three

options are available: make some changes, delete, and add reminder.

Task flow

Pages 4.0 My bookings; 4.1 One booking; 4.1.1 Remind me; 4.1.2 Edit booking; 6.1

Sign in


3.5 Use case 5: Set up notification

Description

Users can set up notifications for their bookings. There are two options: a

notification for a specified booking, or a general notification for all bookings.

Task flow

Pages 6.1 Sign in; 6.4 Notification; 4.0 My bookings; 4.1.1 Remind me


3.6 Use case 6: Share my bookings

Description

Users can choose to share their bookings with friends in network. There are

two options: share a specified booking, or share all bookings.

Task flow

Pages 6.5 Share with friends; 5.0 My bookings; 5.1 Edit booking; 6.1 Sign in


3.7 Use case 7: Edit my favorites

Description

Users can save some bookings that are used very often into My Favorites.

They can also make changes on those favorites

Task flow

Pages 5.0 My favorites; 5.1 Edit; 6.1 sign in


3.8 Use case 8: Change password

Description Users can change the password to their account.

Pages 6.1 Sign in; 6.3 Change password

3.9 Use case 9: Edit profile

Description Users can create a profile on the app and can also make changes later.

Pages 6.1 Sign in; 6.2 Profile

3.10 Use case 10: Manage payment

Description Users can save some payment methods as default, and can also make

changes later.

Pages 6.0 Register; 6.0.1 Set up payment; 6.1 Sign in


4. UI Specification

GENERAL NOTES

* Theme Color = Light Blue (90c2dd). Used for Positive buttons (Next, Save, Submit, etc.)

* Rusty Red = b0090e. Used for Cancel, Delete and so on.

* Background Color = White.

* Font: Arial.

* Font Gray = 666666.

* Border Gray = CCCCCC.

* Button press effect:

- Positive buttons: Button Color = Theme color; Font color = white

- Negative buttons: Button Color = Rusty red; Font color = white

* Size dimension is defined in units of pixel.


PAGE

1.0 Home

NOTES

1.0 Banner image. 320 (w) x 90 (h). NO LINK

2.0 "Book Pod" Button. 220 (w) x 60 (h). Icon size 25 x 25. Icon color = Theme color. Font color = Font Gray. Border color = Border Gray. LINKS to PAGE 2.0 Book Pod - Pod Preference.

3.0 "My Network" Button. LINKS to PAGE 3.0 My Network - Map view.

4.0 "My Bookings" Button. LINKS to PAGE 4.0 My Bookings.

5.0 Voice control icon. 65 x 65. Border color = Theme color Press to start voice control function and press again to terminate.

6.0 Newsfeed notification. 45 x 50. Color = Rusty red. Font color = white LINKS to PAGE 6.4.1 Newsfeed.


PAGE

2.0 Book Pod - Pod Preference

NOTES

1.0 Back button. 32 x 32

Border color = white

Font color = white

LINKS to previous page, or PAGE 1.0 Home

2.0 Drop down menu.

Font color = white

Click to show the other three categories: My Bookings,

My Favorites, and My Network. Click again to fold the

menu.

2.1 My Bookings: LINKS to PAGE 4.0 My Bookings

2.2 My Favorites: LINKS to PAGE 5.0 My Favorites

2.3 My Network: LINKS to PAGE 3.0 My Network

-Map view

3.0 Setting. 25 x 25

Click to show the setting list. Click again to fold the list.

3.1 Sign in/Register: LINKS to PAGE 6.1 Sign in

3.2 Mange profile: LINKS to PAGE 6.2 Profile

3.3 Change password: LINKS to PAGE 6.3

Change password

3.4 Manage payment: LINKS to PAGE 6.0.1

Setup payment

3.5 Set up notifications: LINKS to PAGE 6.4

Notification

3.6 Share with friends: LINKS to PAGE 6.5

Share with friends

3.7 Sign out: log out and LINKS to PAGE 1.0 Home

Setting list


PAGE

2.0 Book Pod - Pod Preference (continue)

NOTES

4.0 Public button. 320 (w) x 55 (h).

Font color = Font Gray

Border color = Theme color

LINKS to PAGE 2.1 Book pod - designation

5.0 Private button.

LINKS to PAGE 2.1 Book pod - designation

6.0 Help. 30 x 30

Filled color = Theme color

Open a help popup window

6.1 OK button. 100 (w) x 45 (h)

Font color, border color = Theme color

Click to close the help popup window

7.0 Progress bar.

Filled color = Green (4AC954)

Border color = white

Indicates the current status of booking process

Help popup


PAGE

2.1 Book Pod - Destination

NOTES

1.0 Depart button. 275 (w) x 35 (h).

Font color = white

Button color = gray (999999)

Prefilled with the closest station

Click to show Depart station specification form

1.1 Type depart station (text field)

1.2 Select from my favorite locations (drop list)

1.3 Specify depart city (drop list)

1.4 Specify depart station in that city (drop list)

1.5 Cancel and close icon. 25 x 25. Theme color

1.6 Save and close icon.

2.0 Destination button.

Click to show Destination station specification form

3.0 Time button

Click to show Time specification form

4.0 Travelers drop list.

It shows only when Public Pod is selected.

It will be invisible if Private Pod is selected

5.0 Cancel button. 80 x 80

Font color = Rusty Red

Border color = Border gray

LINKS to PAGE 2.0 Book Pod - Pod preference

6.0 Next button

Font color = Theme color


LINKS to PAGE 2.2 Book Pod - Order summary

Depart Form


PAGE

2.1 Book Pod - Destination (continue)

NOTES

2.0 Destination button.

Click to show Destination station specification

2.1 - 2.4 similar to 1.1 - 1.4

3.0 Time button

Click to show Time specification form

3.1 Hour drop list

3.2 Minute drop list

3.3 AM/PM drop list

3.4 Clear time specification

Font color = Rusty red

Click to clear time specification.

Time specification form will be folded

Time button will show "Not specified"

Destination Form

Time Form


PAGE

2.2 Book Pod - Order Summary

NOTES

1.0 Order Summary. NO LINK

The header "Order Summary" and the "$2.00"

Font color = green (4AC954)

2.0 Cancel button. 80 x 80.

LINKS to PAGE 1.0 Home

3.0 Next button.

LINKS to PAGE 2.3 Book Pod - Payment options


PAGE

2.3 Book Pod - Payment Options

NOTES

1.0 Apple Store button. 260 (w) x 78 (h).

Font and icon color = Font gray


Click to open Apple store information form

1.1 Email (text field)

1.2 Password (password text field)


Cancel and close Apple store information form

1.4 Next button.

Save and LINKS to PAGE 2.4 Book Pod - Complete

Purchase.

2.0 Credit Card button.

Click to open Credit card information input form

3.0 Paypal button

Click to open Paypal information input form.

Apple Store Form


PAGE

2.3 Book Pod - Payment Options (continue)

NOTES



2.1 Cardholder's name (text field)

2.2 Card number (text field)

2.3 Expiration date

2.4 Billing address (text field)

2.5 Zip Code (text field)

2.6 Cancel button. 80 x 80.

Cancel and close the Credit card information form

2.7 Next button

Save and LINKS to PAGE 2.4 Book Pod - Complete

Purchase.

3.0 Paypal button


3.1-3.4 similar to 1.1-1.4

Credit Card Form

Paypal Form


PAGE

2.4 Book Pod - Complete Purchase

NOTES

1.0 Order summary. NO LINKS


Cancel and LINKS to PAGE 2.3 Book Pod - Payment

Options

3.0 Next button.

Save and LINKS to PAGE 2.5 Book Pod - Confirmation


PAGE

2.5 Book Pod - Confirmation

NOTES

1.0 Share this booking with friends (Check box)

2.0 Add this booking into My Favorites (Check box)

If checked, 3.0 will show up.

3.0 Set this booking as auto booking (Check box)

If checked, the Auto booking information form will

show up.

3.1 Auto book for selected days (Check boxes)

3.2 The end day of auto book (Radio buttons)

If "never stop" is selected, the month/day/year

select will be grayed out (disenabled).

3.3 Specify the end day of auto book (Drop lists)

3.4 Cancel button. 160 (w) x 42 (h)

Border color = theme color

Font color = rusty red

Click to cancel and close the auto

booking information form.

3.5 Save button.

Font and border color = theme color

Click to save and close the auto

booking information form.

4.0 Done button. 80 x 80

LINKS to PAGE 2.6 Book Pod - QR Code

Auto booking Form


PAGE

2.6 Book Pod - QR Code

NOTES

1.0 QR Code for this booking.

User presents this code to a QR code reader at the

ATN station. Information will be sent to the system.

2.0 Feedback.

Font color = Theme color

After click, the feedback form will slide in.

Click again, the form will slide out.

2.1 Comments area. (Text area)

2.2 Cancel button. 146 (w) x 42 (h)

Border color = theme color

Font color = rusty red

Cancel this feature and the feedback form

slides out

2.3 Submit button

Border and font color = theme color

Submit the feedback to the system, and the

feedback form slides out.

Feedback Form


PAGE

3.0 My Network - Map view

NOTES

1.0 Google map

2.0 A friend's picture. 50 x 50.

Shows the destination of this friend's booking.

LINKS to PAGE 3.2 A friend's booking

3.0 List view button. 50 x 50

Background color = white

Foreground color = theme color

LINKS to PAGE 3.1 My network - list view


PAGE

3.1 My Network - List view

NOTES

1.0 Search box.

Search icon: 25 x 25. Theme color

Search among friends.

2.0 Social media logos. 35 x 35 each

Import network through Facebook or Google +

3.0 A friend

Pic size 50 x 50

Font color = Font gray

LINKS to PAGE 3.2 A friend's booking

4.0 Map view button. 50 x 50


Background color = white

Foreground color = theme color

LINKS to PAGE 3.0 My Network - map view


PAGE

3.2 My Network - A friend's booking

NOTES

1.0 Friend's name.

Font color = green (4AC954)

NO LINK

2.0 Message button. 120 (w) x 30 (h)

Border and icon color = Border gray

Font color = theme color

Opens a message window

3.0 Call button.

Press to dial.

4.0 Pic of this friend. 150 x 150

NO LINK

5.0 Information of this friend's booking

Font gray

6.0 Book button. 80 x 80

Border gray


Click to book the same trip as this friend.

LINKS to PAGE 2.5 Book Pod - Confirmation.


PAGE

4.0 My Bookings

NOTES

1.0 One of the bookings.

Click to show the drop down menu.

Click again to hide the menu.

1.1 View Details button. 260 (w) x 40 (h)

LINKS to PAGE 4.1 One Booking

1.2 Remind me button

LINKS to PAGE 4.1.1 Remind me

1.3 Delete button

Click to show a delete confirmation popup

1.3.1 Yes button. 230(w) x 40(h)

Click to cancel this booking.

The delete confirmation popup is closed.

1.3.2 No button.

Click to close the delete confirmation popup.

1.4 Exit button

Click to fold the drop down menu.

No changes will be saved.

Delete popup


PAGE

4.1 One Booking

NOTES

1.0 QR Code for this booking.

2.0 Detailed information of this booking.

NO LINK

3.0 Exit Button. 80 x 80

Border gray


LINKS to PAGE 4.0 My Bookings

4.0 Edit Button

LINKS to PAGE 4.1.2 Edit Booking


PAGE

4.1.1 Remind Me

NOTES

1.0 Reminder time setup drop list.

2.0 Save button. 240 (w) x 45 (h)

Border gray

Font gray

Click to save changes.

LINKS to PAGE 4.0 My Bookings.

3.0 Set as default button.

Click to save this setting for all future bookings.


4.0 Exit button.

Do not save any change.



PAGE

4.1.2 Edit Booking

NOTES

1.0 Public/Private radio button

If Private is selected, Travelers drop list

will be disenabled.

2.0 Share/Not share radio button


Do not save any change.


4.0 Save button.

Save changes.


The rests are similar to PAGE 2.1 Book Pod - Destination


PAGE

5.0 My Favorites

NOTES

1.0 One favorite.

Click to show the drop down menu.

Click again to fold the menu.

1.1 Book button. 260(w) x 40(h)

Click to book this trip.

LINKS to PAGE 2.5 Book Pod - Confirmation

1.2 Edit button.

LINKS to PAGE 5.1 Edit Favorite

1.3 Delete button

Click to show delete confirmation popup

1.3.1 Yes button. 230(w) x 40(h)

Click to delete this favorite.

The delete confirmation popup is closed.

1.3.2 No button.

Click to close the delete confirmation popup.

1.4 Exit button

Click to fold the drop down menu

No changes will be saved.


PAGE

5.1 Edit Favorite

NOTES

1.0 Payment method radio buttons.


LINKS to PAGE 5.0 My Favorites.

NO changes will be saved.

3.0 Save button.

Save changes.

LINKS to PAGE 5.0 My Favorites.

The rests are similar to PAGE 2.1 Book Pod - Destination


PAGE

6.0 Register

NOTES

1.0 Full name (text field)

2.0 Email address (text field)


4.0 Re-enter password (password text field)

5.0 LINKS to ATN mobile use privacy policy.

6.0 Next button. 80 x 80.

LINKS to PAGE 6.0.1 Setup Payment


PAGE

6.0.1 Set up Payment

NOTES

This page is similar to PAGE 2.3 Payment Options

1.0 Apple Store button. 260 (w) x 78 (h).

Click to open Apple store information form.

Similar to PAGE 2.3 Book Pod - Payment Options



3.0 Paypal button


4.0 Skip button. 80 x 80

Click to skip the set up payment process.

LINKS to PAGE 1.0 Home.

5.0 Save button.

Click to save changes.



PAGE

6.1 Sign In

NOTES




Terminate the sign in process.

LINKS to previous page

4.0 Sign in button.

Sign in and LINKS to previous page

5.0 Forget password link

LINKS to PAGE 6.1.1 Forget Password

6.0 Create a new account link

LINKS to PAGE 6.0 Register

7.0 Social media

Sign in with social media accounts.

Share the same network as the social media.

Logo size: 35 x 35


PAGE

6.1.1 Forget Password

NOTES

1.0 Name (text field)


3.0 Submit button. 80 x 80.

Send the name and email into the system.

LINKS to PAGE 6.1.2 Email Confirmation


PAGE

6.1.2 Email Confirmation

NOTES

1.0 OK button. 80 x 80

LINKS to PAGE 6.0 Sign In


PAGE

6.2 Profile

NOTES

1.0 Name (text field)

2.0 Email (text field)

3.0 Add icon. 25 x 25

Theme color

Click to add a new station to the list.

A new box will show below the last one.

4.0 Remove icon

Click to remove a station from the list.

5.0 A favorite station


Terminate the set up profile process.


7.0 Save button.

Save all the information and changes.



PAGE

6.3 Change Password

NOTES

1.0 Current password (password text field)

2.0 New password (password text field)

3.0 Re-enter new password (password text field)


Terminate the change password process.


5.0 Save button.

Save the changes.

LINKS to previous page.


PAGE

6.4 Notification

NOTES

1.0 Reminder time. Drop list

2.0 Notification sound On or Off selection.

Each size: 47 (w) x 30 (h)

Border, foreground color = theme color

3.0 Notification vibrate On or Off selection

4.0 Receive Newsfeed On or Off selection.

If select On, 5.0 will show up.

If select Off, 5.0 will be invisible.

5.0 Notification for newsfeed. Drop list.

Four options: sound, vibrate, both, and silence


Click to terminate the process.

No change has been saved.


6.1 Save button.

Save the changes.

LINKS to previous page.


PAGE

6.4.1 Newsfeed

NOTES

1.0 A new story posted 15 minutes ago.

Each story is a collapse.

Click to expand the story.

Click again to fold it.


PAGE

6.5 Share With Friends

NOTES

1.0 Share or Not share radio buttons.


Do not save any changes.


3.0 Save button. 80 x 80

Save changes.


atn mobile app ui specification...3.0 paypal button click to open paypal information input form....

Documents