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