Course Screen, Login Screen, and CN App Icon

Course Screen (Tasks)

Notes:

The tasks and posts sections on the course page are divided into two tabs. This avoids showing the posts section underneath the long tasks section.

The tasks bar can be scrolled horizontally, and the active task is highlighted in blue. The current task in the course should be loaded by default with the previous tasks before it.

If the instructor does not have any tasks in the course, these tabs should not appear, and the posts section will be shown instead.

Ali suggested a new feature showing a total number of anar seeds required to earn a bonus in the course. Also, showing the profile picture of the student with the highest number of anar seeds in the course, and how the logged in user compares to them. The lowest anar seed student does not get their picture shown (just the number).

Photoshop Source File: https://app.box.com/s/uquymo3yf1vvuyejb6si

Course Screen (Posts)

Photoshop Source File: https://app.box.com/s/5bmab1pe2xfadqd2uup3

Login Screen

Notes:

Currently, the giant CN logo on the splash screen moves down after loading is completed. Instead, I think the logo should scale down to the size/location of the CN logo on the login screen, above the login form.

I added a "create an account" link. It will open a web browser, and allow a new user to create a CN account.

Photoshop Source File: https://app.box.com/s/93oq0rlyovrp5e3ynv29

CN App Icon

Notes:

The CN logo is circular everywhere. For some reason, the app icon has a square around it. I think the circular icon makes more sense and looks much better.

I used a gradient for the background. The top is the same dark blue as the CN logo, and the bottom is black.

I think the transparent white half circle effect on the icon looks bad. Most iOS apps no longer use this. All of the icons for the default iPhone apps in iOS 7 (coming out later this fall) will have this shiny icon effect removed.

Icon .png download link: https://app.box.com/s/m1fopz2hrb3dzr7fslvk

Create Post (5 screens)

Create Post

Notes: 

When first opened, the text area will say "Write your post here" in light grey text. 

The black visibility bubble on the bottom right above the keyboard will say "Visible to: All CN Members", and will disappear once the user types one character, or if they touch the black bubble. If multiple visibility options are selected, the black bubble will expand, and they will all be listed until the user types another character on the keyboard.

The camera icon will have a number in parenthesis to indicate the number of attached photos.

Photoshop Source File: https://app.box.com/s/yizhv1bo8oskickeptzj

Take photo or choose from gallery

Notes:

This appears after the user hits the camera icon the first time, or after hitting the "plus" button (on the next screen).

Photoshop Source File: https://app.box.com/s/pwjrerdtunvaelh4tbbl

Attached images

Notes:

This screen appears after the first time images are selected, or if the user hits the camera icon after images are attached (a number inside parenthesis will be next to the camera icon).

Photoshop Source File: https://app.box.com/s/wgdlyje21xypxe9kev00

Visibility menu (first section)

Notes:

This is the first menu that appears after hitting the globe icon. Multiple items can be picked, and they will be highlighted in blue. Both "My Courses" and "My Conexus" have a right arrow indicating that there is a second level menu.

After the user selects from the list of courses or conexuses on the following screen, they return to this screen, and a number in parenthesis shows up in this menu (as shown next to "My Courses").

If "All CN Members" is selected, everything else in this menu is automatically deselected ("All" includes everything in this list. Picking "all" + anything else doesn't make sense).

Photoshop Source File: https://app.box.com/s/q5o5pcgj77wdjw3r8ucb

Visibility menu (second section)

Notes:

This is the screen that is shown after tapping either "My Courses" or "My Conexus" on the previous screen.

Photoshop Source File: https://app.box.com/s/ji1yh65chfp265dz0v69

8 designs (updated 7/9/2013)

Main Screen (not liked or reflected by the user) (updated 7/9)

Photoshop source file: https://www.box.com/s/67h6gr9tt6d6dnluuqkq

Main Screen (liked and reflected by the user) (updated 7/9)

Photoshop source file: https://www.box.com/s/7qnw3nr5lu4o8bczgz0c

Main Screen (10 line maximum) (updated 7/9)

Photoshop source file: https://www.box.com/s/7cbvlt0vln6cerazr8tl

Likes (updated 7/9)

Photoshop source file: https://www.box.com/s/5v5mjacj6m2w7ximvxlm

Reflections (updated 7/9)

Photoshop source file: https://www.box.com/s/7v0ugpfmncc9ttemaqph

Create Reflection (updated 7/9)

Photoshop source file: https://www.box.com/s/cl1ino6mijw6gdbpeb7b

Profile (updated 7/9)

Photoshop source file: https://www.box.com/s/o1jbdlnrzr15j5ppo6t3

Profile (detailed) (updated 7/9)

Photoshop source file: https://www.box.com/s/ge8teurfuz7fm85x5vez

3 icon states

Photoshop source file: https://www.box.com/s/ctv8y6vu84jb49atyj2q

Acknowledged touch state for links (updated 7/9)

Photoshop source file: https://www.box.com/s/l016l6evio110ozy2ibq