Screenshots

[srcreigh]

Here are a couple screenshots of the app so far. Those list items are loaded from a hardcoded JSON string in the app and decoded; in the future the data will be loaded from Firebase.

The list also takes a string identifier. We can use this to specify different data sources.

There's only one item in the navigation drawer right now, but it can be extended to load different pages.

I have yet to determine what the JSON data model should look like for updates. It currently has a title and a body, as you can see in the list. We might want a "from" field, in case we want to specify who the update is from --- the HTN team, a sponsor, the judges, etc. I think we will get timestamps by default from Firebase.

[srcreigh]

The list is now loaded live from this firebase. How do you want to do the legit firebase, @KartikTalwar?

[KartikTalwar]

@srcreigh this is great! Can you paste/link the json model here?

[srcreigh]

You can follow the link in my previous comment to see the model. It's not finalized; right now it's just {... key: { title: too, body: bar} ...}.

Here's the current data at the root of the firebase:

{
   "data":{
      "-JQuRpqIBnpEOhofnYbq":{
         "body":"This is another message from us.",
         "title":"Title 2"
      },
      "-JQuU-p2vfogKyYmoUG5":{
         "body":"Hey sup",
         "title":"Title 4"
      },
      "-JQtnfQgbuCnm5gg3Rj1":{
         "body":"This is a message brought to you by the Hack the North team!",
         "title":"Title 1"
      },
      "-JQuRtxOvdFI-uOCQxJJ":{
         "body":"Message 3. Are you still there?",
         "title":"Title 3"
      },
      "-JQu_vTry_pdLp1NPXot":{
         "body":"Come get your food!!!",
         "title":"FOOD IS COMING"
      },
      "-JQuZNd8899BIsddP3TM":{
         "body":"Spaceship",
         "title":"Everything is awesome!"
      }
   }
}

[srcreigh]

I think we should add a date field and a sender field. I don't think we will need to add anything else to the Update model.

[KartikTalwar]

haha, I was just typing that @srcreigh great, I think you should add ISO8601 compatible timestamp for every message too and have the date in the UI. There should also be a case where we don't necessarily need a title for the update,

[moezbhatti]

I cleaned up the UI for the updates page and I added a couple things.

This data that it's loading is dummy data that I just hardcoded in, but I'm keeping the time in ISO8601. At runtime it's creating a relative timestamp, which is what's actually shown on the update card. Avatars are stored locally and displayed depending on the name of the person submitting the update. If no matching name is found, then it will show the circular HTN logo

Is there anything you guys feel needs to be added or improved?

[KartikTalwar]

This looks clean and good! I like it :+1:

[VicV]

Put a logo in the top left or lower the actionbar height. Doesn't look right, right now.

On Wed, Aug 6, 2014 at 7:00 PM, Kartik Talwar notifications@github.com wrote:

This looks clean and good! I like it [image: :+1:]

— Reply to this email directly or view it on GitHub https://github.com/hackthenorth/hackthenorth-android/issues/6#issuecomment-51409473 .

[srcreigh]

Looks awesome Moez :)

[moezbhatti]

The action bar is the standard height. In Android L, it's actually going to be even bigger and they're moving away from having the app icon in the action bar. It just looks big because the status bar is tinted

[srcreigh]

Do you think it might be worth it to color the status bar black? I find that more visually appealing, personally. L isn't out quite yet and most apps color the status bar black.

[KartikTalwar]

We are trying to make both apps look the same right? Wouldn't that mean the menu bar should be at the bottom like the screenshot @sitefeng posted

[moezbhatti]

@srcreigh You're right, the tinted status bar looks pretty bad on KK. The shadow is terrible. I'll put it to black for KK.

@KartikTalwar We want them to have a similar feel, but still adhere to the design guidelines for each platform. A bottom action bar is not something you ever see in a well designed app on Android. Instead, we're using a sliding navigation drawer

[sitefeng]

i agree, since the android default tab bar is at the top, the apps would look natural and similar to each other at the same time.

[srcreigh]

:+1: @moezbhatti

[KartikTalwar]

I guess that makes sense but that side sliding bar in android is a terrible UI interaction element. It doesn't make sense for us to make a user do more work to get basic information considering the app is only doing listing of 3-5 things.

[VicV]

@moezbhatti yeah I think the problem is just that it doesn't look right on < L. That being said, don't design to L-spec considering its not going to be widely used at all by sept 19.

@KartikTalwar open up G+ and see what you think of that nav style. Its basically a double actionbar, but can easily be put into one in our case.

Essentially, rather than making a full new page, we could make the dropdown button actually just act as a dropdown.

That, or we could just make the entire fragment a viewpager and navigate like the facebook app, which I think would be the better option.

[moezbhatti]

@KartikTalwar I disagree completely, I think it's a fantastic UI element that organizes the app in a very clean way while still being very functional and easy to use. It's very easy to implement it poorly however, so I can see why you might have that impression of it. That being said, you do have a point, since there isn't that much that's even going to be in the app. A ViewPager is another viable option

[KartikTalwar]

@moezbhatti that element does have its merits but my opinion was specific to HTN app.

[moezbhatti]

Yeah, I see what you're saying. Now that I think about it, I think that a ViewPager might be more appropriate. What do you think @srcreigh ?

[VicV]

@moezbhatti That depends entirely on what your app is doing. It has been agreed by designers that its a terrible UI interaction element. This is why the big names have dropped it (Google plus, facebook). Its actually really ugly and very rarely well implemented. It should only really be used as a list of content to display when there are MANY options. Like messaging apps, and netflix.

That being said, even the top messaging apps are moving away from it. I think Hello is the only one that implemented it in the best way (sidebar peek). The main issue is that as more and more people implement this design pattern, devs see it as a 'bin'. Its just a place to put new stuff. Look at Youtube, and Flickr!

I know this isn't really a place for this argument, but I thought I should let you know, the paradigm is shifting, so be careful!

But yeah I really think a ViewPager is the most appropriate option here. The app has like 3 functions, no need to hide them.

[moezbhatti]

@VicV "devs see it as a 'bin'" That's a good point, I didn't really think about that before. I think I was just thinking about it from a bit of a biased perspective because I'm using it in my app, where it's definitely the best option. (It's an SMS app)

I don't think it's going anywhere though. Have you looked at the Material Design guidelines? There's a hamburger icon in nearly every example.

You're absolutely right though, it's overused, and I was almost about to become someone who contributed to that, so thanks for saving me!

[srcreigh]

Although I didn't see anything wrong with the drawer, our app is small enough to fit the information in tabs (as @sitefeng has so beautifully shown us). I think having some tabs on the top would be the prettiest at no loss of functionality. :)

[moezbhatti]

Yep! That's what a ViewPager is haha Here's some good reference in terms of design http://www.google.com/design/spec/components/tabs.html#

[sitefeng]

Good thing that everyone here takes UI so seriously.

[VicV]

Its literally the only thing the user sees. How can you not lol.

On Wed, Aug 6, 2014 at 9:38 PM, Si Te Feng notifications@github.com wrote:

Good thing that everyone here takes UI so seriously.

— Reply to this email directly or view it on GitHub https://github.com/hackthenorth/hackthenorth-android/issues/6#issuecomment-51420620 .

[moezbhatti]

I made a little concept of how we can display the detailed information for mentors. What are all your thoughts on this? Keep in mind that this is only a single item, it would be in a list in the actual app

[VicV]

Pls center viewpager choices On Aug 12, 2014 12:25 AM, "Moez Bhatti" notifications@github.com wrote:

I made a little concept of how we can display the detailed information for mentors. What are all your thoughts on this?

[image: concept] https://cloud.githubusercontent.com/assets/4358785/3886367/86328c1c-21d8-11e4-8c24-992e1fa6899a.png

— Reply to this email directly or view it on GitHub https://github.com/hackthenorth/hackthenorth-android/issues/6#issuecomment-51872224 .

[moezbhatti]

They don't all fit on the screen at once, so I'm making them scroll with the content.

[VicV]

Ah there's more than 3 On Aug 12, 2014 12:32 AM, "Moez Bhatti" notifications@github.com wrote:

They don't all fit on the screen at once, so I'm making them scroll with the content.

— Reply to this email directly or view it on GitHub https://github.com/hackthenorth/hackthenorth-android/issues/6#issuecomment-51872582 .

[moezbhatti]

5 total; Updates, Schedule, Prizes, Mentors, Team

[moezbhatti]

Notification icon

[sitefeng]

@moezbhatti Mentors page was very cool, except I thought it was the detail page after tapping on a card. Cards itself should be more simplified imo

[srcreigh]

@sitefeng Moez and I talked about this quite a bit. We had a few ideas for simpler cards (i.e. having shorter cards that expand on tap), but then decided that since there will be > 100 mentors anyway, it won't be any easier to browse short cards than tall cards.

• the main form of navigation will probably be search, not browse

[moezbhatti]

Adding on to what Shane said about search being the main form of navigation, we'll also have a thumb scroll bar so that you can quickly scroll, and have a little overlay that shows you the current letter or skillset type that you're currently on while you're scrolling

[sitefeng]

I see, i'll probably do the thumb scroll as well. but the team screen will look quite different on both devices

[srcreigh]

Which is fine :)

[srcreigh]

So since there hasn't been any comments in a few days, we're assuming that these designs are good! We'll probably be implementing this today so last chance for feedback @hackthenorth/commiters

[KartikTalwar]

Final comments.

• All mentors won't be that high profiled. We don't really want to deal with getting a photo of them and having it on the app theres going to be a lot of last minute changes..
• Also bandwidth concerns, I'd stay away from images anyway since data is offline and internet in E5 is shitty, plaintext should be the way to go
• Having photos of judges is not bad idea!
• That notification icons looks good!

[srcreigh]

• You sure? We have to get info (name, org, skills, times) from them anyway, and we could have a no image alternate design. "From you to be included in the mentor listing we need your name, org, available skills and times, and (if you'd like) a link to a picture of you", along with the designs for picture/no picture mentor cards.
• Idk about iOS, but on Android we have a library that handles disk / memory caching of images, so bandwidth might not be as bad as you think. Also the data won't be offline, we'll be loading it (and then caching it, mind you) from Firebase

[sitefeng]

I could write the code for caching profile images if needed on iOS.

[KartikTalwar]

@srcreigh yeah thats fair. We'll be getting name,company,skills and times but photos might be a mess - resizing, quality (them wanting it on the app) and stuff like that is what I dont wanna get into. It might be useful to just have their gravatar on the left.

[moezbhatti]

@KartikTalwar the design works whether or not there's an image, and I've already implemented the scaling, so that's not an issue. Here's a screenshot of how it looks in the app without a picture (screenshot, not concept). The whitespace needs to be adjusted but that should only take a couple minutes

Update: Fixed the whitespace issues. Here's an updates screenshot

[sitefeng]

Here is the Mentors Detail page on iOS

[srcreigh]

I understand that it's extra work for the pictures, but I think it's worth it. Pictures here aren't just there to look nice; they are functional, and will help the hackers identify the mentors.

We're willing to take on the extra responsibility of making sure the images they give us work I think, right @moezbhatti? I think most of them will be fine anyway, if not it'll take half a minute to save, crop, upload to imgur and fix the link in firebase.

[moezbhatti]

@srcreigh Yeah, I definitely am. And since we've already got the functionality itself working in the app, we have a lot of time to do the cropping of pictures and stuff like that later on. Even if we run out of time or decide to get rid of them at the last minute, the layout is built to handle both cases. I don't see any problem with trying

[KartikTalwar]

@moezbhatti this looks good! :+1:

[vtsatskin]

lose the drop shadow on the mentor images for iOS.

[moezbhatti]

Potential redesign for update list items Shane likes one, I like the other What do you guys think?

Edit: made a couple tweaks

[moezbhatti]

Schedule

The colour on the left of each card indicates the event type