Milestone 6: Prototype II
May 22, 2014
Visit collagewithfriends.herokuapp.com for the functional prototype.
Main Changes
- Redesigned the entire user experience. See below for mockup. Then coded it all up (except optional landing video)!
- Added planner experience (as planned)
- Change to single-page experience for collaborators (in response to last week’s feedback on users’ confusion)
- Improved user interface (to improve user's understanding of our product and its appeal)
Implementation Progress
This week we migrated our product to a completely new look and feel, and added in experience for planners, which represents 95% finish for the entire end-to-end experience. Only a stand-alone receiver’s view is yet to create, but should be very quick and easy.
New Features
Planner:
- Ability to choose from a set of templates
- Get a sense of what a template looks like by previewing finished examples
- Create one’s own template with customized directions
Collaborator:
- Clearer instructions with distinct steps for the photo and video taking
- Allow user to take the photo while viewing the collage, so that she can better align herself for the template
- Choose whether one wants the video message to be public or private
- Retake photos / video messages
- Better countdown feature
- Allow user to seamlessly backtrack steps
- Edit a tile (photo and video) by the same user (if he doesn't reload the page)
- Delete a tile (reset to blank) finished by the same user (if he doesn't reload the page)
Redesign the User Experience
Based on our user study and discussions with John and Stephanie, we realized that our users were confused because they were not given enough structure. Without the structure, half of the users did not even attempt the heart template given to them. Further, some users did not even know that they could record personal video message so they were reluctant to pose in a silly pose for the template. Clearly, we needed to provide some successful examples to demonstrate the capabilities of the app and set expectations. In particular, we decided to redesign the website to highlight the following:
- 10 second landing-page video demonstrating the process of contributing to one tile, and the recipient receiving the entire collage.
- Example collages
- Endless scroll webpage, with very clear instructions for
- Step 1, take picture, and
- Step 2, take video
Mockup of the Redesign
Text in red are comments.
Clicking on a tile in the template will trigger AJAX changes directly on the tile, as illustrated below:
Clicking next after Step 1 is complete will lead the user to Step 2. Here, she records a personal message and chooses whether the message will be public (viewable by anything with a link) or private (viewable only to the recipient; all others will see a lock sign). After Step 2, she is directed back to the collage where she will see her contribution.
Below we also mocked up how one would initially organize a collage:
