MVP UI2FUX for DEV презентация

Содержание

1. MVP UI2FUX for DEV
2. Green = all transition animations
3. Screen 1. Login screen/Sign up screen
4. Screen 2.Home screen (News Feed) Loads recent
5. Screen 3 Expanded View of Full Trip
6. Screen 4 My Itineraries Click on icon->will
7. Post Post trip?
8. Itinerary Budget Screen 6 Create Itinerary Name
9. Itinerary Screen 6.1 Create Itinerary Hub Click
10. Screen 6.2 Create Itinerary Choose Transportation Click
11. Round Trip v Screen 6.3
12. Screen 6.4 Create Itinerary Date Click on
13. Screen 6.5 Transportation cost input Click on
14. Screen 6.6 Add transportation round trip different
15. Screen 6.7 Calendar input Replace “What Dates”
16. Screen 6.8 cost of transportation input round
17. -Once done entering numbers; -User clicks
18. Screen 7. Add data for
19. Screen 7. Add data for
20. Screen 8 Add Transit round trip
21. Screen 8.1 Add transit one way Click
22. Screen 9. Add Transportation (ship) round trip
23. Screen 9.1 Add Transportation (ship) one-way cont’d
24. Screen 10. Add Housing Replace “Which
25. 11. Add Restaurant -API from Google
26. Screen 12 Add activity Add Average
27. Screen 13. Favorites feed Click on “Andy’s
28. Screen 13.1 Favorites add to own Have
29. Screen 14. Explore (slide function and display)
30. Screen 14.1 Explore People (expanded) When clicked
31. Username (Full Name) Username
32. Screen 14.3 Explore People (expanded 2.0) Click
33. Screen 14.4 Followers/Following Itineraries (default) it shown
34. 14.5 Explore Locations Search bar for finding
35. Screen 15. Notifications When the social icon
36. Screen 16. My profile This is
37. 17. Settings Anytime anyone hits the settings button / Facebook invite
38. 17.2 Change Password Submit Submit
39. 17.4 Email invite So they click
40. 17.5 Contact us When they submit the
41. 18 Edit / Delete Ship+Airplane+Transit User clicks
42. 18.1 Edit / Delete Car User clicks
43. 18.2 Edit / Delete Lodging
44. 18.3 Edit / Delete Restaurants+Activities User clicks

Green = all transition animations Red = if the item was clicked Blue = same as red but to show another motion or action separate from red

Слайд 1MVP UI/UX for DEV

Слайд 2
Green = all transition animations
Red = if the item was

clicked
Blue = same as red but to show another motion or action separate from red
Purple = same as blue and red but separate from either

Слайд 3
Screen 1. Login screen/Sign up screen

Once the sign-up button is clicked,

it will fade out and the sign-up page fade in

Terms and Conditions

On sign-up page, if requirements are not met, it will display message

Click hyperlink “Log In” -> goes back to login screen

Слайд 4Screen 2.Home screen (News Feed)
Loads recent trip posts from user’s followers.
Display

date of trip submitted. If under 24 hours, it will show hours or minutes **This will show up on every submitted itinerary throughout the app (Excluding current ones that the user has)**

Слайд 5Screen 3 Expanded View of Full Trip Transportation
Click on itinerary->will open

full itinerary on new screen.
Click back button->will go back to home screen

Round trip trans. There will be two separate entries organized in chronological order (one for departing and one for arriving). On second entry instead of cost it will display “As shown above”

As shown above

When user clicks on star, star will be filed. There will be a prompt message saying “Added to favorites!”
“Un-favorited!”

Слайд 6Screen 4 My Itineraries
Click on icon->will open new screen “My itineraries.”

Click on “Remove”->trash can icon will appear on the right of the entries, pushing the name of the trip and locations slightly to the right and they can delete there. User click on trash can icons -> confirm box appears.

Confirm delete?

Remove

Yes

No boxes nor blue fill.

H2:
In Progress Favorites Posted

When section is clicked-> Underline bar slides to clicked category

Then confirm layover box

Слайд 7Post
Post trip?

Add Transportation
Add Lodging
Add Restaurant
Add Activity
Screen 5. My Current Itineraries-Transportation
Click

on Andy’s LA Trip itinerary->will open “in progress” itinerary on new screen
Click on “+” it will open layover in middle-> same screen
1. Add Transportation
2. Add Lodging
3. Add Restaurants
4. Add Activities
Click on “Remove”->trash can icon will appear on the right of the entries, pushing the name of the trip and locations slightly to the right and they can delete there. User click on trash can icons -> confirm box appears

Post your trip?

Yes

Remove

Post

Слайд 8Itinerary
Budget
Screen 6 Create Itinerary Name
Click on “Create Itineraries” to will

open new screen on right

Text box manual input

Слайд 9Itinerary
Screen 6.1 Create Itinerary Hub
Click “Next”->Open new screen as shown on

right

Слайд 10Screen 6.2 Create Itinerary Choose Transportation
Click on “Plus icon”->opens same screen

with overlay
Click on “Add transportation ->opens up new screen as shown on very right
User clicks on Transportation icon ->goes to next screen (all icons are bolded already)

Add Transportation

Add Lodging

Add Restaurant

Add Activity

Слайд 11Round Trip
v

Screen 6.3 Transportation round trip same transportation
Click Airplane icon ->

Opens new screen as shown in middle
Default option for this screen: Round trip underlined and same airline checked
Click on “Next” -> opens new screen on right

Слайд 12Screen 6.4 Create Itinerary Date
Click on “Next”->opens new screen as shown

on second screen
Replace “What Dates” with “Select Date Range”
Click on “Select Date Range”->same screen opens up calendar on bottom half of screen
Click on “Done”->same screen; calendar will disappear
Default option: It will already populate to today’s date.

Highlight function to visualize the duration of itinerary

Слайд 13Screen 6.5 Transportation cost input
Click on “Next” ->new screen as shown

on middle screen
The keyboard will cover the whole bottom portion

-Once done entering numbers;
-User clicks “Done” -> number pad slides down and disappears.

-User clicks area in blue circle-> Brings up number pad bottom on screen (slide up motion from bottom)

$ .00

Слайд 14Screen 6.6 Add transportation round trip different airlines
-Uncheck “same airline”->same screen

it displays another search bar under first search bar as shown on right
-Click “Next” it will take user to new screen shown on right

Round Trip

Слайд 15Screen 6.7 Calendar input
Replace “What Dates” with “Select Date Range”
Click on

“Select Date Range”->same screen opens up calendar on bottom half of screen
Click on “Done”->same screen; calendar will disappear
Default option: It will already populate to today’s date.

Highlight function to visualize the duration of itinerary

Слайд 16Screen 6.8 cost of transportation input round trip
Click on “Next” ->new

screen as shown on right screen
The keyboard will cover the whole bottom portion
Once done with inputting cost, user clicks done and the finish button will be to the bottom right.

-User clicks area in blue circle-> Brings up number pad bottom on screen (slide up motion from bottom)

Once done entering numbers;
-User clicks “Done” -> number pad slides down and disappears->resembles screen all the way on the right

Finish

Слайд 17
-Once done entering numbers;
-User clicks “Done” -> number pad slides down

and disappears.

-User clicks area in blue circle-> Brings up number pad bottom on screen (slide up motion from bottom)

Finish

Screen 6.9 Add transportation one-way

-Flow is same as slide 14-16

Слайд 18

Screen 7. Add data for car transportation
Click on “Next” ->new screen

as shown on right screen
Click on “Select Year”, “Select Make”, or “Select Model”-> same screen will open scroll selection as shown on last 3 screens on right
Google API EST. Miles from screen 6.2.
Google API EST. MPG from Year, make, model data
App automatically calculates Miles/MPG=gallons used

Screen 7. Add data for rental car transportation

Click on “Personal Car” -> it will underline
Click on “Rental Car” -> it will underline and search bar will appear below in the center

Finish

$ .00

Circled in yellow
*Results may vary per driver*

Слайд 19

Screen 7. Add data for car transportation
Click on “Next” ->new screen

Screen 7.1 Add data for personal car transportation

Click on “Personal Car” -> it will underline
Click on “Rental Car” -> it will underline and search bar will appear below in the center

Circled in yellow
*Results may vary per driver*

Слайд 20
Screen 8 Add Transit round trip
Click on “Next” ->new screen as

shown on right screen
Click on “Round trip”-> word will underline
User clicks area in blue circle-> Brings up number pad bottom on screen (slide up motion from bottom)
Once done entering numbers;
-User clicks “Done” -> number pad slides down and disappears.

Finish

Слайд 21Screen 8.1 Add transit one way
Click on One-way -> word will

underline; fade out: “Which Transit?” +“Round trip” + “one-way”->Fade in: “Which Departing Transit?” search bar + “Which Returning Transit?” search bar.

-Google API for transit names

-User clicks area in blue circle-> Brings up number pad bottom on screen (slide up motion from bottom)

Once done entering numbers;
-User clicks “Done” -> number pad slides down and disappears->resembles screen all the way on the right

$ .00

Finish

Слайд 22Screen 9. Add Transportation (ship) round trip
Click on “Round trip”-> word

will underline
User clicks area in blue circle-> Brings up number pad bottom on screen (slide up motion from bottom)
Once done entering numbers;
-User clicks “Done” -> number pad slides down and disappears.

$ .00

Finish

Слайд 23Screen 9.1 Add Transportation (ship) one-way cont’d

Click on One-way -> word

will underline; fade out: “Which Ship?” +“Round trip” + “one-way”->Fade in: “Which Departing Airline?” search bar + “Which Returning Airline?” search bar.

User clicks area in blue circle-> Brings up number pad bottom on screen (slide up motion from bottom)

Once done entering numbers;
-User clicks “Done” -> number pad slides down and disappears->resembles screen all the way on the right

$ .00

Finish

Слайд 24Screen 10. Add Housing
Replace “Which Housing” to “Which Lodging”

-Google API

for Hotel, motel, inn, etc. names

Which Lodging?

-User clicks area in blue circle-> Brings up number pad bottom on screen (slide up motion from bottom)

Once done entering numbers;
-User clicks “Done” -> number pad slides down and disappears.

Total cost?

Слайд 2511. Add Restaurant
-API from Google
-Instead of date slider; user

can only choose one date
Add Average Cost Per Person line (automatically calculates)
-font-default helvetica white

No banner! For no scroll option on page

How many people? (placeholder)

Total cost?
(placeholder)

Avg cost per person $20.51

Слайд 26Screen 12 Add activity

Add Average Cost Per Person line (automatically calculates)
Add

Average Cost Per Person line (automatically calculates)

Instead of date slider; user can only choose one date

How many people ? (placeholder)

Total cost? (Placeholder)

Activity?

Avg cost per person $67.51

Слайд 27Screen 13. Favorites feed
Click on “Andy’s LA Trip” to expand to

the next screen.
Clicking “Remove”will bring up the trashcans (at right)

When “+” sign clicked it brings up Overlay in middle of screen so you can pick which itinerary to add it to
(Slide 28)

Remove

Слайд 28Screen 13.1 Favorites add to own
Have divider lines like the pop-up

menu on the bottom

Southwest
San Jose to Los Angeles
_______________________

San Diego Trip
Euro Trip 9/28

Example for the overlay is shown right

Blurry background besides overlay (shown with white waves)
User will be able add section to only ONE current itinerary at a time

Southwest
San Jose to Los Angeles

San Diego Trip

Euro Trip 9/28

Socal Trip !!!!!

Confirm Southwest
San Jose to Los Angeles

To

San Diego Trip ?

Block, report, cancel “+” button comes up when the trip is favorited.

Yes

Слайд 29Screen 14. Explore (slide function and display)
Search bar for finding people

by name and username
Slide bar function: the “people” icon to “location” icon.
Username (Full Name) for screen on left. Username only for screen on right

Username (Full Name)

Слайд 30Screen 14.1 Explore People (expanded)
When clicked it expands to the user’s

profile where you can view his itineraries and followers.
It was default on itineraries (itineraries should be underlined to show selection, if you click followers, the underline slides over to under the text “Followers”

Click for popup menu 3 items:
1: Block
2: Report
3: Cancel

Username (Full Name)

H1 Username (Full Name)

Once follow button is clicked, it fills orange (no outline) and the word changes to following; example below:

Following

Username (Full Name)

Слайд 31Username (Full Name)

Username (Full Name)

Screen 14.2 (block/report)
Once the button is clicked

the pop up menu comes from the bottom showing the options shown
Whatever the user clicked on the left screen will show up on the “action” text as shown on right

If report is chosen, there will be a reason box for the user to input why , or maybe options to choose from?

Confirm report?

Yes

Слайд 32Screen 14.3 Explore People (expanded 2.0)
Click on trip -> content changes

to full view of trip as shown on right

“+” wont show up unless favorited

Слайд 33Screen 14.4 Followers/Following
Itineraries (default) it shown on the left picture. If

you click followers on the right, the underline moves and then shows followers
Click on user profile pic or Username (full name) -> will take user to their profile

Able to scroll to see the whole list of followers (the people you follow on top display first)

H1 Username (Full Name)

Username (Full Name)

Слайд 3414.5 Explore Locations
Search bar for finding people by location
When they search

locations and they click on the itinerary it should just show the itinerary in full page form
if the user clicks on the searched person's profile picture or name (username (full name)) it will navigate them to their profile (not specified to the searched itinerary just the default itinerary list)

H1 Username (Full Name)

Слайд 35Screen 15. Notifications
When the social icon is clicked at any time,

will show most recent notification on top
No requests need for following approval. Anyone can follow anyone. User can block any unwanted follower
New: Any new activity/notification

When name or picture is clicked, it will take the user to said profile e.g. screen 36

Notifications

Слайд 36Screen 16. My profile
This is the user’s own profile page.

(get here by clicking on the profile icon on previous screens -- >
User click on profile pic or “change profile picture” -> takes user to phone’s gallery

Full name
Username
Email

H1 Username (Full Name)

If they want to change their email, they have to input their password (security because you reset your password by email if they’ve forgotten)

Please enter password to confirm email change

Слайд 3717. Settings
Anytime anyone hits the settings button

/ Facebook invite

Слайд 3817.2 Change Password

Submit

Submit

Слайд 3917.4 Email invite
So they click the facebook icon and tries

to open facebook through browser or app and they choose from the list
Same with email but they open up the primary mail on their phone and go through their contact list
If they want to invite someone to the list but don’t have it saved they can email input (which I feel like would be redundant because you can just tell the person the name of the app but there’s the option)

Submit

Слайд 4017.5 Contact us
When they submit the form it should send to

our inbox, maybe our trippostapp@gmail.com

Submit

Thanks for sharing!

(Maximum 500 characters)

Disregard, blue background. Use same PNG background.

Слайд 4118 Edit / Delete Ship+Airplane+Transit
User clicks trash can icon -> brings

up confirmation box to delete entry.
When user clicks on a section-> it will bring the user to that section of the create itinerary process

Delete entry?

Yes

Update

Слайд 4218.1 Edit / Delete
Car
User clicks trash can icon -> brings up

confirmation box to delete entry (pic on left)
When user clicks on a section-> it will bring the user to that section of the create itinerary process

Update

Delete

Delete entry?

User clicks on Transportation icon ->goes to next screen (all icons are bolded already) (basically starting over for that section)

Слайд 4318.2 Edit / Delete
Lodging
User clicks trash can icon ->

brings up confirmation box to delete entry.
When user clicks on a section-> it will bring the user to that section of the create itinerary process

Слайд 4418.3 Edit / Delete
Restaurants+Activities
User clicks trash can icon -> brings up

confirmation box to delete entry.
When user clicks on a section-> it will bring the user to that section of the create itinerary process

Скачать презентацию

MVP UI2FUX for DEV презентация

Содержание

Слайд 1MVP UI/UX for DEV

Слайд 2Green = all transition animations Red = if the item was

Слайд 3Screen 1. Login screen/Sign up screenOnce the sign-up button is clicked,

Слайд 4Screen 2.Home screen (News Feed)Loads recent trip posts from user’s followers.Display

Слайд 5Screen 3 Expanded View of Full Trip TransportationClick on itinerary->will open

Слайд 6Screen 4 My ItinerariesClick on icon->will open new screen “My itineraries.”

Слайд 7PostPost trip?Add TransportationAdd Lodging Add RestaurantAdd ActivityScreen 5. My Current Itineraries-TransportationClick

Слайд 8ItineraryBudgetScreen 6 Create Itinerary Name Click on “Create Itineraries” to will

Слайд 9ItineraryScreen 6.1 Create Itinerary HubClick “Next”->Open new screen as shown on

Слайд 10Screen 6.2 Create Itinerary Choose TransportationClick on “Plus icon”->opens same screen

Слайд 11Round TripvScreen 6.3 Transportation round trip same transportationClick Airplane icon ->

Слайд 12Screen 6.4 Create Itinerary DateClick on “Next”->opens new screen as shown

Слайд 13Screen 6.5 Transportation cost inputClick on “Next” ->new screen as shown

Слайд 14Screen 6.6 Add transportation round trip different airlines-Uncheck “same airline”->same screen

Слайд 15Screen 6.7 Calendar inputReplace “What Dates” with “Select Date Range”Click on

Слайд 16Screen 6.8 cost of transportation input round tripClick on “Next” ->new

Слайд 17-Once done entering numbers;-User clicks “Done” -> number pad slides down

Слайд 18Screen 7. Add data for car transportationClick on “Next” ->new screen

Слайд 19Screen 7. Add data for car transportationClick on “Next” ->new screen

Слайд 20Screen 8 Add Transit round tripClick on “Next” ->new screen as

Слайд 21Screen 8.1 Add transit one wayClick on One-way -> word will

Слайд 22Screen 9. Add Transportation (ship) round tripClick on “Round trip”-> word

Слайд 23Screen 9.1 Add Transportation (ship) one-way cont’dClick on One-way -> word

Слайд 24Screen 10. Add Housing Replace “Which Housing” to “Which Lodging”-Google API

Слайд 2511. Add Restaurant -API from Google -Instead of date slider; user

Слайд 26Screen 12 Add activityAdd Average Cost Per Person line (automatically calculates)Add

Слайд 27Screen 13. Favorites feedClick on “Andy’s LA Trip” to expand to

Слайд 28Screen 13.1 Favorites add to ownHave divider lines like the pop-up

Слайд 29Screen 14. Explore (slide function and display)Search bar for finding people

Слайд 30Screen 14.1 Explore People (expanded)When clicked it expands to the user’s

Слайд 31Username (Full Name)Username (Full Name)Screen 14.2 (block/report)Once the button is clicked

Слайд 32Screen 14.3 Explore People (expanded 2.0)Click on trip -> content changes

Слайд 33Screen 14.4 Followers/FollowingItineraries (default) it shown on the left picture. If

Слайд 3414.5 Explore LocationsSearch bar for finding people by locationWhen they search

Слайд 35Screen 15. NotificationsWhen the social icon is clicked at any time,

Слайд 36Screen 16. My profile This is the user’s own profile page.

Слайд 3717. Settings Anytime anyone hits the settings button/ Facebook invite

Слайд 3817.2 Change PasswordSubmit Submit

Слайд 3917.4 Email invite So they click the facebook icon and tries

Слайд 4017.5 Contact usWhen they submit the form it should send to

Слайд 4118 Edit / Delete Ship+Airplane+TransitUser clicks trash can icon -> brings

Слайд 4218.1 Edit / DeleteCarUser clicks trash can icon -> brings up

Слайд 4318.2 Edit / Delete Lodging User clicks trash can icon ->

Слайд 4418.3 Edit / DeleteRestaurants+ActivitiesUser clicks trash can icon -> brings up

Похожие презентации

Обратная связь

Что такое ThePresentation.ru?

Слайд 2
Green = all transition animations
Red = if the item was

Слайд 3
Screen 1. Login screen/Sign up screen

Once the sign-up button is clicked,

Слайд 4Screen 2.Home screen (News Feed)
Loads recent trip posts from user’s followers.
Display

Слайд 5Screen 3 Expanded View of Full Trip Transportation
Click on itinerary->will open

Слайд 6Screen 4 My Itineraries
Click on icon->will open new screen “My itineraries.”

Слайд 7Post
Post trip?

Add Transportation
Add Lodging
Add Restaurant
Add Activity
Screen 5. My Current Itineraries-Transportation
Click

Слайд 8Itinerary
Budget
Screen 6 Create Itinerary Name
Click on “Create Itineraries” to will

Слайд 9Itinerary
Screen 6.1 Create Itinerary Hub
Click “Next”->Open new screen as shown on

Слайд 10Screen 6.2 Create Itinerary Choose Transportation
Click on “Plus icon”->opens same screen

Слайд 11Round Trip
v

Screen 6.3 Transportation round trip same transportation
Click Airplane icon ->

Слайд 12Screen 6.4 Create Itinerary Date
Click on “Next”->opens new screen as shown

Слайд 13Screen 6.5 Transportation cost input
Click on “Next” ->new screen as shown

Слайд 14Screen 6.6 Add transportation round trip different airlines
-Uncheck “same airline”->same screen

Слайд 15Screen 6.7 Calendar input
Replace “What Dates” with “Select Date Range”
Click on

Слайд 16Screen 6.8 cost of transportation input round trip
Click on “Next” ->new

Слайд 17
-Once done entering numbers;
-User clicks “Done” -> number pad slides down

Слайд 18

Screen 7. Add data for car transportation
Click on “Next” ->new screen

Слайд 19

Screen 7. Add data for car transportation
Click on “Next” ->new screen

Слайд 20
Screen 8 Add Transit round trip
Click on “Next” ->new screen as

Слайд 21Screen 8.1 Add transit one way
Click on One-way -> word will

Слайд 22Screen 9. Add Transportation (ship) round trip
Click on “Round trip”-> word

Слайд 23Screen 9.1 Add Transportation (ship) one-way cont’d

Click on One-way -> word

Слайд 24Screen 10. Add Housing
Replace “Which Housing” to “Which Lodging”

-Google API

Слайд 2511. Add Restaurant
-API from Google
-Instead of date slider; user

Слайд 26Screen 12 Add activity

Add Average Cost Per Person line (automatically calculates)
Add

Слайд 27Screen 13. Favorites feed
Click on “Andy’s LA Trip” to expand to

Слайд 28Screen 13.1 Favorites add to own
Have divider lines like the pop-up

Слайд 29Screen 14. Explore (slide function and display)
Search bar for finding people

Слайд 30Screen 14.1 Explore People (expanded)
When clicked it expands to the user’s

Слайд 31Username (Full Name)

Username (Full Name)

Screen 14.2 (block/report)
Once the button is clicked

Слайд 32Screen 14.3 Explore People (expanded 2.0)
Click on trip -> content changes

Слайд 33Screen 14.4 Followers/Following
Itineraries (default) it shown on the left picture. If

Слайд 3414.5 Explore Locations
Search bar for finding people by location
When they search

Слайд 35Screen 15. Notifications
When the social icon is clicked at any time,

Слайд 36Screen 16. My profile
This is the user’s own profile page.

Слайд 3717. Settings
Anytime anyone hits the settings button

/ Facebook invite

Слайд 3817.2 Change Password

Submit

Submit

Слайд 3917.4 Email invite
So they click the facebook icon and tries

Слайд 4017.5 Contact us
When they submit the form it should send to

Слайд 4118 Edit / Delete Ship+Airplane+Transit
User clicks trash can icon -> brings

Слайд 4218.1 Edit / Delete
Car
User clicks trash can icon -> brings up

Слайд 4318.2 Edit / Delete
Lodging
User clicks trash can icon ->

Слайд 4418.3 Edit / Delete
Restaurants+Activities
User clicks trash can icon -> brings up