#91 Make personal calendar into an aggregate of your group calendars

Created 2 years ago by ralph
Modified 4 months ago

It would be nice to know when all of your upcoming meetings are + when the next release is.

Attachments
FinalMockups.svg - 2016-06-07 16:51:07 Comment Download
FinalMockups.svg - 2016-06-07 16:51:07 Comment Download
calendar-widget_week-view-idea.png - 2016-06-09 16:20:49 Comment Download
meeting-reminders.png - 2016-06-09 16:20:49 Comment Download
calendar-widget_week-view-idea.png - 2016-06-09 16:20:49 Comment Download
meeting-reminders.png - 2016-06-09 16:20:49 Comment Download
g.png - 2016-06-13 13:57:47 Comment Download
g.png - 2016-06-13 13:57:47 Comment Download
visualPersonalCalendar.png - 2016-07-05 00:40:33 Comment Download
visualPersonalCalendar.png - 2016-07-05 00:40:33 Comment Download
CalendarUser.png - 2016-08-11 14:47:58 Comment Download
CalendarUser.png - 2016-08-11 14:47:58 Comment Download
my-upcoming-meetings.png - 2016-09-28 18:06:39 Comment Download
my-upcoming-meetings_modal.png - 2016-09-28 18:06:39 Comment Download
my-upcoming-meetings.png - 2016-09-28 18:06:39 Comment Download
my-upcoming-meetings_modal.png - 2016-09-28 18:06:39 Comment Download

would it make sense to aggregate meetings into a personal cal in fedocal then display via a calendar widget in hubs, on your inbox / "me" feed?

That could be a nice way to do it, yeah.

These are some of the use-cases me and mo discussed over yesterday.

1) The widget can show all of the meeting times for the teams the user is a member of

2) It will allow the user to click on the meeting in the calendar widget to get more details about the time / place, etc

3) Real time update about the meeting which might be taking place in the hub

4) A meeting suggestion feature which will be based on meetbot logs

So, points 1, 2 would be our top most priority, whereas the rest we will design keeping in mind the constraints. Additionally, we also brainstormed that if any current event is happening in and around the area, the widget will suggest the user to add the event to the calendar. Thus, from our yesterday's brainstorming session, we do have a fair idea of how the widget will work and look like. Feedbacks and suggestions welcome for this post.

Edited 2 years ago by duffy

Please find below the final mockups for the calendar widget. Feedback and suggestions welcome
FinalMockups.svg

Please find below the final mockups for the calendar widget. Feedback and suggestions welcome
FinalMockups.svg

Hey Radhika! This is a great start! Here's some initial feedback with suggested next steps:

1) The 'happening now' label is a great idea. Having it stand out with the red color is a good idea too.

2) I would poke at the week view to make it look more like a week view rather than a cropped calendar. I looked around at a bunch of week views on different calendaing apps and it seems like the pattern is to only show one week at a time with the days that have passed in the current week greyed out, so that might be the way to move forward. Or you could keep pushing on the two week design to try to make next week differentiated with the current week. There also isn't a callout of today, which might be useful. Quick idea below so you can see what I mean - the second week has been de-emphasized by being scaled down + a light grey outline/fonts.... today is highlighted with fedora blue... days that have passed have a grey background with a low contrast font on top... just some ideas. You don't need to tak ethese but it's one approach:

calendar-widget_week-view-idea.png

3) Just some visual styling tips - we're using Open Sans so the mockup is going to look more accurate if you work with Open Sans (you can fix it very quickly by opening the svg in a text editor and doing find-replace on 'sans-serif' to "Open Sans". I also wouldn't rely quite so much on green - we mostly use Fedora blue, Fedora dark blue, and shades of grey. I'd use other colors very sparingly.

4) I'd replace the icons with the font-awesome icons since that's the library we have included. For the meeting icon you could use fa-users, for the calendar ones there's fa-calendar, fa-calendar-o, fa-columns (could be useful for week view icon), fa-clock-o / fa-clock.

5) You might want to take a look at the styling used for the meeting widget / upcoming meetings display and emulate that so we're displaying meeting times in a consistent manner. The mockup for that is in mockups/widgets/meetbot_meeting_times-widget.svg. E.g.:

meeting-reminders.png

6) Try the 'squint test' on the mockup. Squint, and what stands out? To me, the date of the suggested meetings / upcoming meetings stand out - a lot more than the name of the meetings. But which is more important to the user at that point? You may want to demphasize the date a tad and empahsize the name of the meeting more. Other things that'd be useful to include in the display is what time the meeting is it and where is it located. I don't know if meeting minutes should be given as large a piece of real estate - they are useful to understand the type of meeting to evaluate if you want to go, but i'd make the link much smaller (and label it as 'past meeting minutes' since you can't get the meeting minutes for a meeting that hasn't happened yet.)

Okay, hope this helps! This is a great start!

Hey Radhika! This is a great start! Here's some initial feedback with suggested next steps:

1) The 'happening now' label is a great idea. Having it stand out with the red color is a good idea too.

2) I would poke at the week view to make it look more like a week view rather than a cropped calendar. I looked around at a bunch of week views on different calendaing apps and it seems like the pattern is to only show one week at a time with the days that have passed in the current week greyed out, so that might be the way to move forward. Or you could keep pushing on the two week design to try to make next week differentiated with the current week. There also isn't a callout of today, which might be useful. Quick idea below so you can see what I mean - the second week has been de-emphasized by being scaled down + a light grey outline/fonts.... today is highlighted with fedora blue... days that have passed have a grey background with a low contrast font on top... just some ideas. You don't need to tak ethese but it's one approach:

calendar-widget_week-view-idea.png

3) Just some visual styling tips - we're using Open Sans so the mockup is going to look more accurate if you work with Open Sans (you can fix it very quickly by opening the svg in a text editor and doing find-replace on 'sans-serif' to "Open Sans". I also wouldn't rely quite so much on green - we mostly use Fedora blue, Fedora dark blue, and shades of grey. I'd use other colors very sparingly.

4) I'd replace the icons with the font-awesome icons since that's the library we have included. For the meeting icon you could use fa-users, for the calendar ones there's fa-calendar, fa-calendar-o, fa-columns (could be useful for week view icon), fa-clock-o / fa-clock.

5) You might want to take a look at the styling used for the meeting widget / upcoming meetings display and emulate that so we're displaying meeting times in a consistent manner. The mockup for that is in mockups/widgets/meetbot_meeting_times-widget.svg. E.g.:

meeting-reminders.png

6) Try the 'squint test' on the mockup. Squint, and what stands out? To me, the date of the suggested meetings / upcoming meetings stand out - a lot more than the name of the meetings. But which is more important to the user at that point? You may want to demphasize the date a tad and empahsize the name of the meeting more. Other things that'd be useful to include in the display is what time the meeting is it and where is it located. I don't know if meeting minutes should be given as large a piece of real estate - they are useful to understand the type of meeting to evaluate if you want to go, but i'd make the link much smaller (and label it as 'past meeting minutes' since you can't get the meeting minutes for a meeting that hasn't happened yet.)

Okay, hope this helps! This is a great start!

Thanks for the great feedback mo, will start working on it. I really the liked the idea of scaling down the 2nd week calendar view. Further, will follow the guidelines for the meeting widget and upload the revised-mockups soon.

Few changes that I have incorporated include
1. Changing all the font to open-sans
2. The color scheme is consistent with the meeting widget shown above with a slight modification in the style.
3. Meeting names are more prominent and also shows the time of the meeting.

g.png

Few changes that I have incorporated include
1. Changing all the font to open-sans
2. The color scheme is consistent with the meeting widget shown above with a slight modification in the style.
3. Meeting names are more prominent and also shows the time of the meeting.

g.png

Hey Radhika -

Some thoughts on the latest version:

  1. I think the red text that talks about when a meeting is happening loses it power when it's used for every meeting. I think it might make sense only use it for 'happening now' meetings; it's more noticeable in the most dire situation then. When a meeting is say 2 hours from now, it's not really a "red" sort of situation, since you're not late yet. (does that make sense?)

  2. I think the red circular emblems stand out a lot on the calendar - maybe too much? The red isn't in the Fedora palette either. The closest thing to red is the Fedora magenta color - see https://fedoraproject.org/wiki/Logo/UsageGuidelines#Colors. I wonder if that would be too loud though; a medium or dark grey might be enough.

  3. I think you probably don't need quite that much padding with the icons and text on the left side... that could probably be compacted quite a bit more.

  4. Have you thought about the nomenclature for "subscribe" vs "add to calendar"? What would the user's expectations be if they saw "subscribe" ?

  5. The text of the meeting details is really tiny - do you think that's going to be readable? Maybe play around with the relative sizes, and try some other tricks to make less important info fade other than sizes - for example, use lighter shades of gray, play with bold vs unbolded text, etc.

  6. I think the visual design of the calendar could use a bit more pushing. If that's not your thing, that's totally cool, let me know and I can do a visual design pass.

Thanks! Great progress!

User Feedback

  1. The icons on the left for the weekly view "14" was very confusing.
  2. " Happening now " appears to be a link

Few minor changes from the user feedback include:

  1. The blue background in the monthly view is changed from white to improve readability and appear consistent with respect to other widgets in hubs
  2. The icon "14" is changed to "7" to represent the weekly view
  3. "Happening now" is shown as a text rather than a link

CalendarUser.png

Few minor changes from the user feedback include:

  1. The blue background in the monthly view is changed from white to improve readability and appear consistent with respect to other widgets in hubs
  2. The icon "14" is changed to "7" to represent the weekly view
  3. "Happening now" is shown as a text rather than a link

CalendarUser.png

Edited a year ago by radhikamani88

Okay, I've redesigned this a little bit to simplify it. I think the core thing we want is to give people a list of upcoming meetings; I think the calendar browse is a bit heavy and low on the bang for the buck, so a simple list it is.

The calendar should show a list of meetings affiliated with any teams the FAS acct user is a member of.

Here is the widget, it'll show the next 5 meetings or so, with headlines showing what day they are (should be today, tomorrow, and days of the week)

my-upcoming-meetings.png

If you click on "View More >" on the bottom, it takes you to a modal. That modal will show you a pageable list of all meetings in a given week; each page is another week.

my-upcoming-meetings_modal.png

Okay, I've redesigned this a little bit to simplify it. I think the core thing we want is to give people a list of upcoming meetings; I think the calendar browse is a bit heavy and low on the bang for the buck, so a simple list it is.

The calendar should show a list of meetings affiliated with any teams the FAS acct user is a member of.

Here is the widget, it'll show the next 5 meetings or so, with headlines showing what day they are (should be today, tomorrow, and days of the week)

my-upcoming-meetings.png

If you click on "View More >" on the bottom, it takes you to a modal. That modal will show you a pageable list of all meetings in a given week; each page is another week.

my-upcoming-meetings_modal.png

Login to comment on this ticket.