ATN Mobile App UI Specification
ATN Mobile App UI Specification Page 2
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
ATN Mobile App UI Specification Page 3
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
ATN Mobile App UI Specification Page 4
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.
ATN Mobile App UI Specification Page 5
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
ATN Mobile App UI Specification Page 6
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
ATN Mobile App UI Specification Page 7
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
ATN Mobile App UI Specification Page 8
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
ATN Mobile App UI Specification Page 9
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
ATN Mobile App UI Specification Page 10
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
ATN Mobile App UI Specification Page 11
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
ATN Mobile App UI Specification Page 12
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
ATN Mobile App UI Specification Page 13
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.
ATN Mobile App UI Specification Page 14
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.
ATN Mobile App UI Specification Page 15
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
ATN Mobile App UI Specification Page 16
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
ATN Mobile App UI Specification Page 17
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
Border color = Border gray
LINKS to PAGE 2.2 Book Pod - Order summary
Depart Form
ATN Mobile App UI Specification Page 18
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
ATN Mobile App UI Specification Page 19
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
ATN Mobile App UI Specification Page 20
PAGE
2.3 Book Pod - Payment Options
NOTES
1.0 Apple Store button. 260 (w) x 78 (h).
Font and icon color = Font gray
Border color = Border gray
Click to open Apple store information form
1.1 Email (text field)
1.2 Password (password text field)
1.3 Cancel button. 80 x 80
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
ATN Mobile App UI Specification Page 21
PAGE
2.3 Book Pod - Payment Options (continue)
NOTES
2.0 Credit Card button.
Click to open Credit card information input form
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
Click to open Paypal information input form.
3.1-3.4 similar to 1.1-1.4
Credit Card Form
Paypal Form
ATN Mobile App UI Specification Page 22
PAGE
2.4 Book Pod - Complete Purchase
NOTES
1.0 Order summary. NO LINKS
2.0 Cancel button. 80 x 80
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
ATN Mobile App UI Specification Page 23
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
ATN Mobile App UI Specification Page 24
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
ATN Mobile App UI Specification Page 25
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
ATN Mobile App UI Specification Page 26
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
Border color = Border gray
Background color = white
Foreground color = theme color
LINKS to PAGE 3.0 My Network - map view
ATN Mobile App UI Specification Page 27
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
Font color = theme color
Click to book the same trip as this friend.
LINKS to PAGE 2.5 Book Pod - Confirmation.
ATN Mobile App UI Specification Page 28
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
ATN Mobile App UI Specification Page 29
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
Font color = theme color
LINKS to PAGE 4.0 My Bookings
4.0 Edit Button
LINKS to PAGE 4.1.2 Edit Booking
ATN Mobile App UI Specification Page 30
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.
LINKS to PAGE 4.0 My Bookings.
4.0 Exit button.
Do not save any change.
LINKS to PAGE 4.0 My Bookings.
ATN Mobile App UI Specification Page 31
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
3.0 Cancel button. 80 x 80
Do not save any change.
LINKS to PAGE 4.1 One Booking
4.0 Save button.
Save changes.
LINKS to PAGE 4.1 One Booking
The rests are similar to PAGE 2.1 Book Pod - Destination
ATN Mobile App UI Specification Page 32
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.
ATN Mobile App UI Specification Page 33
PAGE
5.1 Edit Favorite
NOTES
1.0 Payment method radio buttons.
2.0 Cancel button. 80 x 80
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
ATN Mobile App UI Specification Page 34
PAGE
6.0 Register
NOTES
1.0 Full name (text field)
2.0 Email address (text field)
3.0 Password (password 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
ATN Mobile App UI Specification Page 35
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
2.0 Credit Card button.
Click to open Credit card information input form
3.0 Paypal button
Click to open Paypal information input form.
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.
LINKS to PAGE 1.0 Home.
ATN Mobile App UI Specification Page 36
PAGE
6.1 Sign In
NOTES
1.0 Email address (text field)
2.0 Password (password text field)
3.0 Cancel button. 80 x 80
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
ATN Mobile App UI Specification Page 37
PAGE
6.1.1 Forget Password
NOTES
1.0 Name (text field)
2.0 Email address (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
ATN Mobile App UI Specification Page 38
PAGE
6.1.2 Email Confirmation
NOTES
1.0 OK button. 80 x 80
LINKS to PAGE 6.0 Sign In
ATN Mobile App UI Specification Page 39
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
6.0 Cancel button. 80 x 80
Terminate the set up profile process.
LINKS to PAGE 1.0 Home
7.0 Save button.
Save all the information and changes.
LINKS to PAGE 1.0 Home.
ATN Mobile App UI Specification Page 40
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)
4.0 Cancel button. 80 x 80
Terminate the change password process.
LINKS to previous page
5.0 Save button.
Save the changes.
LINKS to previous page.
ATN Mobile App UI Specification Page 41
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
6.0 Cancel button. 80 x 80
Click to terminate the process.
No change has been saved.
LINKS to previous page
6.1 Save button.
Save the changes.
LINKS to previous page.
ATN Mobile App UI Specification Page 42
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.
ATN Mobile App UI Specification Page 43
PAGE
6.5 Share With Friends
NOTES
1.0 Share or Not share radio buttons.
2.0 Cancel button. 80 x 80
Do not save any changes.
LINKS to PAGE 1.0 Home
3.0 Save button. 80 x 80
Save changes.
LINKS to PAGE 1.0 Home.