Updated Web Site Design

[kentyunge]

I've created a couple of rough mockups for a reimagined Lansing Codes site. Please feel free to comment, improve, or disregard. @egillespie you asked about adding the calendar back in, I spent quite a bit of time looking at dribbble inspiration and found that calendars are hard! This latest one would show calendar events in cards that the user could swipe through. Obviously, we can iterate on these concepts and add a full calendar view back in, if necessary.

Mock With Calendar Events

Mock with Full Calendar on another Page

[kentyunge]

Updated Upcoming Events section to have more of a calendar feel

[egillespie]

@kentyunge I like the events that can be swiped or scrolled for small screens.

For a full calendar, what if we iterate on what we already have and style the days to match the cards you use in other places on the page?

[kentyunge]

@egillespie To make sure I understand, you want a full 30(+/-) calendar including empty days, not just upcoming events, correct?

[egillespie]

@kentyunge Right now the calendar shows a rolling four-week period. I was thinking we could start with that and play around with the appearance.

[KatieMFritz]

@kentyunge Wow, I love the use of color and diagonal lines! It feels way more alive and sophisticated. 😍

I like highlighting the next event at the top too. For someone checking out the site before they head out to a meetup, it gives them the info they need at a glance - and it will keep fresh content circulating near the top of the page.

I hear you that designing a calendar that's functional, accessible, and looks good is tough - but I agree with Erik that it's a really helpful feature. As organizers, we use the calendar to quickly check for conflicts when scheduling community events and meetups, and as attendees, we cross-reference with our own schedules in our heads when we see what's coming up. Both of those tasks are much easier when you can see the data laid out in a calendar grid instead of just as a list.

I don't think we need to provide full info for each event at a glance; time and group name have been working fine on the current site. If we were to add anything, I'd say topic and/or venue. Tapping/clicking on the event could bring up a modal with more info and/or a link to the Meetup page itself.

More than 80% of the site's traffic is from desktop computers, so while we want to support smaller screens (an agenda view would be fine there), we have the real estate.

I'd also like to see a menu at the top to give an at-a-glance outline of what you'll find on the page. 📋

Do you have plans to actually code this, or are you looking for others to implement your vision?

[KatieMFritz]

Oh, we also need a prominent call to action to join Slack!

[kentyunge]

@KatieMFritz Excellent feedback, thank you. I will keep iterating on the calendar - I think I've mostly discarded it because I don't have a good idea in my head for it but I appreciate that you've articulated the why behind it - that helps. I, personally, do not use the site that way as I'm only interested in very specific meetups/topics. I would be curious what the cross section of people are that attend multiple meetup topics and if they are many, where the commonalities are. More of a thought experiment but I'm curious if someday you could personalize a view based on past behavior.

Totally agree that I missed a Slack call to action. We can shove it in a menu but I think a more aggressive CTA is probably appropriate as it's probably the most effective way to attract new members to meetups.

Am I going to code this? Good question. Designing and wireframing is outside the scope of my "daily job" so creating these mocks has been a fun change of pace and challenge for me. I also felt like the group was implementing a lot of technical debt features as part of the hacktober project but the end user really wasn't seeing the effects of all that effort. That said, I can certainly take a stab at it but would not want to be wholly responsible as family responsibilities will soon consume me - hacktober has been a nice excuse to work on this stuff :)

[egillespie]

@kentyunge We have a little bit of information about who attends more than one meetup. 🙂 In our recent survey, we asked about the meetup groups that people attended and here are the results from 52 responses:

About 52% attend 1 or fewer different meetups and 48% attend 2 or more. When someone attends two or more meetups, the most common combinations ordered by number of responses are:

• JavaScript and DevOps (11)
• JavaScript and Demo Night (11)
• JavaScript and Web (9)
• JavaScript and .NET (8)
• DevOps and Demo Night (8)
• DevOps and Web (8)

JavaScript, DevOps, and Demo Night all occur on different Tuesdays and I do a lot of the venue scheduling for those three events. I get asked a lot about "which one is next week?" which makes me think it would be a good idea for whichever view we use to offer some easy way to know the day of the week and relative order of the upcoming events. I think we capture this well now, with the exception of the list of upcoming events shown on small screens.

Would you mind adding the day of the week to the mockups? I think that may cover a lot of my concerns with non-calendar views.

Another thought I had was with the details event components. The section seems tall and I'm wondering if it would be helpful to tuck the details away in a vertical slide-out like this (sorry for the quick and dirty Gimp job, I'm having fun with this discussion 😂):

I'm fond of a denser view of the quantity of meetups because it also shows how active the tech scene in Lansing is.

[kentyunge]

@egillespie This is super interesting information - thanks for sharing. I love the fact that you have real data supporting this! 👍 Absolutely, I will try and stub out a few concepts.

@KatieMFritz I spent a bit of time tonight putting together a VERY rough HTML framework. I'll push a branch soon and let you know.

[kentyunge]

I have created a branch new-design which includes the bones of the proposed mockup - https://github.com/lansingcodes/www/tree/new-design

You can look at concept.html in the root folder

[KatieMFritz]

@kentyunge I'm working on implementing this design in a new branch, start-over-with-nuxt. It's really helpful to have visual inspiration and to see those styles in your concept.html! Thanks. 😁

[kentyunge]

@KatieMFritz I'm excited to see it and I'm happy I was able to help

[egillespie]

@kentyunge Do you have images for the different blue section backgrounds that you could share?

[kentyunge]

@egillespie I have the mockups as sketch files. I could export the backgrounds if you'd like or send the entire sketch file if you that would be helpful. If you want the backgrounds, what format would be most appropriate? (svg, png, etc...)

[egillespie]

@kentyunge Ooh, SVGs for the backgrounds would be awesome! That will allow me to tweak as needed. 👍

[kentyunge]

@egillespie I committed to the new-design branch - https://github.com/lansingcodes/www/tree/new-design/static/images/backgrounds Let me know if you need anything else

[egillespie]

Hi @kentyunge, do you mind sharing the names of the fonts and where you used them in the mockup? I'm using the fonts from our old site and they don't seem to match quite right.

Thanks! 😁

[kentyunge]

@egillespie Headings are Montserrat bold, body is Roboto regular. If it were me, I would probably take the the bootstrap native stack approach for body copy - https://getbootstrap.com/docs/4.3/content/reboot/#native-font-stack

[egillespie]

Hey guess what? The new design is live!

I'm going to close this and will plan on addressing individual bugs/features in separate issues.

@kentyunge, thank you so much for offering up this slick design. I know the results don't exactly match, but I did my best and am happy to receive feedback.

@KatieMFritz, thanks for the help choosing Nuxt and charging forward with the implementation. Samesies if you have tips — I'd love to hear about them!