Project 2: 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. We're going to use the techniques from this week to implement the Carousel app from the signed out state to the basic signed in state.

Time Spent: 20 hours

Completed User Stories:

• [x] Static photo tiles on the initial screen
  • [x] Optional: Photo tiles move with scrolling
• [x] Sign In
  • [x] Tapping on email/password reveals the keyboard and shifts the scrollview and Sign In button up.
  • [x] User sees an error alert when no email is present or no password is present.
  • [x] User sees a loading screen upon tapping the Sign In button.
  • [x] User sees an error alert when entering the wrong email/password combination.
  • [x] User is taken to the tutorial screens upon entering the correct email/password combination.
  • [x] Optional: When the keyboard is visible, if the user pulls down on the scrollview, it will dismiss the keyboard.
  • [ ] Optional: On appear, scale the form up and fade it in.
  • [x] Optional: Tapping "Next" selects the next field and tapping "Go" on keyboard submits form.
  • [x] Optional: Forgot Password
  • [x] Optional: Field is automatically selected when no email or password is present.
• [x] Optional: Sign Up
  • [x] Optional: Tapping in the form reveals the keyboard and shifts the scrollview and "Create a Dropbox" button up.
  • [x] Optional: Tapping the Agree to Terms checkbox selects the checkbox.
  • [x] Optional: Tapping on Terms shows a webview with the terms.
  • [x] Optional: User is taken to the tutorial screens upon tapping the "Create a Dropbox" button.
  • [x] Optional: Clicking "Go" on keyboard submits form.
  • [x] Optional: Field is automatically selected when no first name, last name, email, or password is present.
• [x] Tutorial Screens
  • [x] User can page between the screens
  • [x] Optional: User can page between the screens with updated dots
  • [x] Optional: Upon reaching the 4th page, hide the dots and show the "Take Carousel for a Spin" button.
• [x] Image Timeline
  • [x] Display a scrollable view of images.
  • [x] User can tap on the conversations button to see the conversations screen (push).
  • [x] User can tap on the profile image to see the settings view (modal from below).
• [x] Optional: View a photo
  • [x] Optional: Swipe up to share photo
• [x] Settings
  • [x] User can dismiss the settings screen.
  • [x] User can log out
• [x] Optional: Learn more about Carousel
  • [x] Optional: Show the "Learn more about Carousel" button in the photo timeline.
  • [x] Optional: Tap the X to dismiss the banner
  • [x] Optional: Swipe left to dismiss the banner
  • [x] Optional: Track the 3 events:
  • [x] View a photo full screen
  • [x] Swipe left and right
  • [x] Share a photo
  • [x] Optional: Upon completion of the events, mark them green.
  • [x] Optional: When all events are completed, dismiss the banner.

Notes:

Spent way too much time on this project tweaking things here and there, but learned a lot along the way.

Walkthrough of all user stories:

GIF created with LiceCap.