Eagle Street Solutions (ES) require a design for an iPhone app. The app will be a native iPhone app version of the Accomplist Facebook app found at https://apps.facebook.com/accomplist. The app will be called "my Acccomplist" (due to "Accomplist" already being taken on the App Store).
The app should draw upon the existing design of the Facebook app to ensure consistency between the interfaces as much as is sensible. There is space for divergence, but this will be given more scrutiny.
A number of screens have been mocked up to give an idea of the basic functionality and screen flow of the app. It should be noted that this is not the definitive desired screen flow, but an indicative set of mock ups. The designer is free to present each screen in any layout they deem best, or even add/remove screens or reshuffle the content of screens where they feel appropriate, but these should be discussed with ES to ensure it still meets the business requirements.
Some of the mockups have been put together into a simple screen flow prototype using "Pop app", which can be viewed at http://popapp.in/w#!/projects/5110dc1ef546228239000dea/preview. It should be noted that the data on these screen mockups is not consistent, nor is many of the screen transitions as there are a number of various ways into and out of each screen depending on the user's history. This will be discussed in more detail later. Also, this does not represent the full list of screens, as some do not fit in the screen flow because they depend on user data.
The designer will need to provide assets to represent each of these screens plus a few more variations and details as noted below.
We will now cover each of the screens and their purpose & elements. The screens are attached.
Splash screen - image_0.jpeg - All iOS apps require a splash page. This page should include the Accomplist icon and the Eagle Street icon (available from http://eaglestreetsolutions.com).
Login screen - image_1.jpeg - This should be the first screen the user can interact with. The app should smoothly transition from the splash screen into this screen. It should contain the same information as the splash screen but also contain the solitary button to "sign in"/"connect with" Facebook. This will launch the Facebook app login dialog via the Facebook app and redirect the user to the user screen.
User screen (with data) - image_4.jpeg - This is the user screen. This can be used to show the logged-in user, or also another user, depending on the context. If it's showing the logged-in user then the top left button will be a "logout" button which goes back to the "Login screen", or if it's showing another user then it will be a "back" button, the destination of which will depend on context. The image and name is the details from the user's Facebook profile. The pie chart is based on the user's overall percentage complete of their Accomplist goals. The segmented control is a way of filtering the list of goals below depending on their status, as well as the totals of each type. The list of goals shows the goal photo, name, and the number in the circle depicts the amount of friends who also have this as "to-do" on their list. Tapping on the goal opens it in full view. The user can add new items to their list with the button at the bottom of the page. This button should be fixed to the bottom of the page such that it stays visible when the user scrolls.
User screen (tips) - image_2.jpeg - This is the user screen that the user sees when they first load the app. It shows a number of "coach marks" instructing the user how to get started with the app (similar to the pattern seen at http://pttrns.com/categories/21-coach-marks). It would be dismissed by tapping the screen anywhere. It may show on top of the "User screen (empty)" screen behind it or the "User screen (with data)" depending on whether the user is a new Accomplist user or not (as if they are an existing user of the Facebook app then the app would load their data from the Facebook app).
User screen (empty) - image_3.jpeg - This is the user screen when the user has no goals. The goals list area should have some kind of holding graphic to make the screen not seem so empty. Open to better slogan suggestions than "empty list, empty life"! Similarly, there may be better ways than showing that no goals are complete than the "0%" indicator.
Accomplices list - image_5.jpeg - This slide-in menu comes from the right, similar to the Facebook app friends list. The friends list should show the user's profile picture and name, as well as the amount of goals "to do" they have in common with the logged-in user. The "invite friends" button loads the Facebook app's "invite" dialog and returns to this screen when done.
Goal screen - image_6.jpeg - This is the goal screen that has a number of states depending on how the logged-in user has marked this goal. The "back" button is contextual. The goal details are shown including category, which should have a category icon shown there also, probably to the left of the "Travel" title. There are 3 buttons on the left. The top button (indicated by a tick) is for marking the goal as complete/incomplete. The middle button (indicated by a minus) is for adding/removing this goal from the logged-in user's list. The bottom button (indicated by a share icon) is for sharing this goal on Facebook, which will launch the Facebook share dialog. This screen needs to have the ability to perform all these actions, but the presentation of the buttons is very much open to creative suggestions. Tapping the complete/incomplete and add/remove buttons may provide an animation to move the goal between these states if appropriate. The lists at the bottom should be self-explanatory, and should link to the user screen for each of the friends listed. This screen shows the goal as on the user's list, but on complete (as indicated by the ribbon on the top-right, matching the design used on the Facebook app). The design should include a variation showing how the screen will look if there are no users in the bottom lists.
Goal screen (complete) - image_7.jpeg - This is the goals screen when the goal is marked as "complete" (as indicated by the "Accomplished" stamp, matching the design used on the Facebook app). This shows the different states the goal screen can be in, and how the buttons update accordingly. The design should include a third state which is not shown - with no ribbon and no stamp, where the goal is not on the logged-in user's list, but the user is just viewing the goal.
Add goal screen - image_8.jpeg - This is the add goals screen for adding a new item to the user's list. The search will bring up a screen similar to the "Find goals screen" but showing the search criteria where the category name is listed in that mock-up. The design should include a screen for how this search results screen will look. "Add a new goal" should be renamed to "Create a new goal". Open to creative suggestions for the layout of these options. For the browse sections, the user is able to scroll the sections horizontally or tap "See more" to view the full list on the "Find goals screen". This screen will show a browse section for "featured", "new" and then for each of the categories, which should show the category icon also.
Find goals screen - image_9.jpeg - This screen is the way to view the full list of goals when viewing search results or a category.
Create goal screen (name) - image_10.jpeg - This is the first screen in the process of creating a new goal. The user has to be forced to put the goal name in before they can progress. As soon as they type more than 3 characters, they will progress to the "Create goal screen (search for matches)". The "create" button in the top right is disabled and will stay in this state until all the goal data is entered. The whole create goal process is very open to creative layout suggestions, including transitions between screens.
Create goal screen (search for matches) - image_11.jpeg - This checks that there isn't an existing goal matching this goal description. Shows all matches and an option to create a new goal if none match.
Create goal screen (name entered) - image_12.jpeg - This is the screen the user is taken back to after confirming that they indeed do want to create a new goal. The user can either choose an image or a category at this point.
Create goal screen (image selection) - image_13.jpeg - This shows when the user chooses to select an image for a goal. The goal name is shown (and editable) as this determines the image search text. Images are searched using Bing. The user can see a semi-cover-flow type interface for choosing an image, similar to Google's web image search interface on mobile phones. The user taps on the selected image to confirm it.
Create goal screen (data entered) - image_14.jpeg - This shows when all create goal data is entered. The "create" button is now active. The user can edit any of the data if necessary. "Create" takes the user to the goal screen, where it is already added to their list (but not complete).
The final design artefacts should include all the screens & variation assets mentioned above in PSD format.
Update: the background image and icon from the Facebook app has been included for use in your design. Remember you can always get all the images from the Facebook app by simply downloading the images from the site.