3 icons (shown after touching the 3 dots button on the bottom of each post)

Notes:

I created these in Illustrator. I wanted them to match our smaller icons, but be simpler and look better at a larger size and with solid color.

The background / button color scheme matches the left menu bar. 

I think this menu should be a solid shape (no rounded corners on the top edge for the background), and slide up with an animation after the user touches the 3 dots icon on the bottom of each post.

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

Anar Seeds Bar (update #2)

Very close to highest anar seeds student

Photoshop source file: https://app.box.com/s/bwd0k8a3jy61t1cfx6ex

---

Highest anar seeds student

Photoshop source file: https://app.box.com/s/2j92562alhg7li1uiusx

---

No goal set by instructor

Photoshop source file: https://app.box.com/s/n1qop5o7pauktfkiuvwl

---

Lowest anar seeds student

Photoshop source file: https://app.box.com/s/9fbdsp6f766jfi6iy1xw

---

Under anar seeds average for the semester
(red bar and -12 from the average)

Photoshop source file: https://app.box.com/s/awiy4kqidgbr4k5zjc5e

Course Screen (tasks) (update #2)

Notes: 

This design is simpler and looks more modern than my previous design. It will also be much easier to program.

All of the information except for the green circle (active course icon) and the school name has been moved to a new section called "About Course". This section will have the start date, end date, instructor names, syllabus, and all other course information listed on the website.

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

Anar Seeds Bar Concepts

 

Notes:

I started with this concept. 

Problems:

• The plus or minus number that represents the difference from the average anar seeds that should be earned by the student can overlap the flag icon or the top anar seed student picture.
• The "350 of 500 anar seeds" area can overlap the top anar seed student picture.

---

Notes:

To make the previous design work, the top anar seed student picture needs to be below "350 of 500 anar seeds". This wastes too much vertical space. 

Also, the + or - number needs to be moved away from the bar, to the earned/total area. This makes it way too wordy and hard to read.

---

 

Notes:

I think we should go with this design. It's clean and simple. If the user wants to learn more information about the bar, they click the "?" button to the left of the bar (people read from left to right, so I think the left side makes sense). This also can give you the entire screen space to explain in detail how the +/- from the average anar seeds number works, how the lowest / highest anar seed students works, and bonus points for reaching the goal (if the instructor sets a goal for the course).

I also show the flag overlapping the top anar seed student picture. I put a white glow around it so it is still visible. In this case, the goal is 500 and the top student has 510.

I placed the +/- number below the total number earned, because if the current user is all the way towards the right edge of the screen, the number might be cut off if it's centered below the profile picture.

---

  

Notes:

Either blue or orange could be used if the instructor does not set a goal for anar seeds. This will also hide the +/- number and the flag icon.

Left Menu Bar

Notes:

I added icons for home, my profile, and logout.

The color scheme is now shades of dark blue instead of white. This is easier on your eyes.

The font size is 20 for the header (my courses and my conexus) and is in all caps. Most apps do it this way. The header font should be smaller, as you never touch it with your finger. I think a size 20 font is the minimum size we should use on the iPhone.

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

Top Icons (updated 7/17/2013)

Notes:

I changed the center top three icons to have a circular shape, so they match. This also makes the size and spacing look much better.

The "create post" icon in the upper right corner has been colorized. This makes the CN logo and the "create post" icon look similar on the left and right sides of the screen. It also makes the "create post" icon stand out much better.

The three center buttons are 60% opacity when they have no notifications (grayish). When the user gets a notification, it turns white. This makes the buttons not as bright and less annoying. 

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

Course Screen (tasks)

Notes:

I changed the tasks / posts bar, and moved it from below the course description to the bottom edge of the screen. This prevents the layout from becoming too crowded by having the task tabs and the tasks / posts tabs too close together.

I changed the task tabs from a standard iPhone UI to a custom tab layout, with the color of the task tab (chosen by the instructor) on the right edge of the tab. The bottom of the selected tab blends in with the background color below it.

I changed the anar seeds bar so it is more simplified. The student with the highest amount of anar seeds is now above the bar, and the logged in user is below the bar, to prevent them overlapping. The text "GOAL (500)" changes color once the red bar overlaps it. The red bar will grow with an animation from left to right when the course page loads.

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

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