Here is our final design, screen by screen.
This is our loading screen. It displays a small icon and a "loading" scroll wheel.
This is our main screen. One of the feedback comments we got was our logo violated minimalism and whitespace, so we redesigned the logo to be neater and less imposing. We were unable to implement swiping UI, but pressing the buttons "swipes" the screen in the direction of the button.
This is the "Use Existing" page. The most important change was that we put in a "Cancel" button to return to the home screen. The most salient thing we noticed in user testing was that the users always wanted to try things out and return to their previous state; basically, they did not want to commit to one thing or another before they knew their choices. Not being able to go back was a fatal error causing a lot of frustration. Another thing we saw in user testing was that the "Popular" and "Yours" buttons did not work sometimes. We fixed that bug. We also made the buttons smaller, because the large buttons were confusing for users. As Rob mentioned in one of the lectures, if a button is too large it loses its affordances as a button.
This is our "History" page, which displays all the memes you've made in the past. We also added a cancel button to this, which swipes in the opposite direction as it did when you pushed the button on the main screen. This keeps the physical "pushing" metaphor.
This is the "filter" page. We only included two filters - invert and glow - but additional filters would simply stack horizontally and you would scroll on the bar to access more. Default takes the filter away. Filters also stack! We tweaked all the buttons to be perfectly sized and positioned.
This is, again, the filter page, with one of the filters applied.
This is the "background" page. We have all the possible colors of backgrounds in a horizontal scroller like the previous page, in which you can scroll and choose and it replaces the background on the image. We took out the functionality of resizing the image and felt that we should just center it without options because this was what most users wanted and thought it would add extra work to the task of preparing the image if you had to reposition every time.
This is the "meme done" page, where you enter the name of the meme.
This is the "label" screen. One big feature that we added was live updating. When you typed in the text box, it added that text, filtered with stroke, onto the image so you could see what it would end up like. The continuous representation of the label adds a lot to the safety of this page. One problem we encountered here was that we had to disable touch interactions for scrolling because we didn't want to show the "elastic scrolling" function of the browser in the app. When you entered the second label, you couldn't scroll back up without double tapping. This is something we hope to fix if we continue with the app.
This is the "done" page.
This is the "share" overlay. It fades up into position after you click the share button on the done page. Each of the toggles flips on and off.
This is the confirmation overlay that fades down after clicking "go". Clicking return brings you back to the home page.