Carousel

The purpose of this homework is to leverage views, view properties, and events to create a high fidelity prototype that is difficult to distinguish from a production app.

Time spent: <16>

Features

Required User Stories

1. Landing Screen

• Static photo tiles on the initial screen.
• User can scroll to reveal # buttons.

1. #

• Tapping on email/password reveals the keyboard and shifts the scroll view and # button up.
• Upon tapping the # button.
• If the username or password fields are empty, user sees an error alert.
• If credentials are incorrect, user sees a loading indicator for 2 seconds followed by an error alert.
• If the credentials are correct, user sees a loading indicator for 2 seconds followed by a transition to the # screens.

1. Tutorial Screens

• User can page between the screens.

1. Image Timeline

• Display a scrollable view of images.
• User can tap on the conversations button to see the conversations screen (push).
• User can tap on the profile image to see the settings view (modal from below).

1. Conversations

• User can dismiss the conversations screen.

1. Settings

• User can dismiss the settings screen.
• User can log out.

Optional User Stories

1. Landing Screen:

• Photo tiles move, scale and rotate while user scrolls.

1. #:

• User can scroll down to dismiss keyboard.
• User sees the form scale up and fade it in as the screen appears.

1. # / Create a Dropbox:

• Tapping in the form reveals the keyboard and scrolls the form and button up so they remain visible.
• Tapping the "Agree to Terms" checkbox selects the checkbox.
• Tapping on "Terms" shows a web view with the terms.
• User is taken to the tutorial screens upon tapping the "Create a Dropbox" button.

1. Tutorial Screens:

• User can page between the screens with updated dots.
• Upon reaching the 4th page, the page indicator dots are hidden and "Take Carousel for a Spin" button is shown.

1. Learn more about Carousel:

• Show the "Learn more about Carousel" button in the photo timeline.
• Tap the X to dismiss the banner.
• Track the 3 events:
• (1) View a photo full screen, (2) Swipe left and right and (3) Share a photo - Upon completion of the events, mark them green.
• When all events are completed, dismiss the banner.

1. Settings

• User is presented with an action sheet with actions to cancel or logout.

The following additional features are implemented:

• List anything else that you can get done to improve the app functionality!

Please list two areas of the assignment you'd like to discuss further with your peers during the next class (examples include better ways to implement something, how to extend your app in certain ways, etc):

Video Walkthrough

Here's a walkthrough of implemented user stories:

GIF created with LiceCap.

Notes

Describe any challenges encountered while building the app.

• Any libraries or borrowed content.

Carousel

Carousel