This is my redesign for the Flock to Fedora website. The main focus is to make a page that is useful and informative for people of all levels of interest in the event.
See the full mockup here.
Hero
The goal of this hero is to support 80%-ish of use cases. This is done through base information and seasonal CTAs.
By providing fundamental “who”, “what”, “when”, and “where” of the conference along with some info on newer additions to Flock (Nest and Hatch), a lot of answers can be found immediately on page load. Also, Barcelona is just a placeholder text.
The format of bottom left content can also be used for other future changes to the conference. The white space on the right side gives room for other types of announcements as well.
CTA’s
The two CTA buttons are seasonal and will offer specific actions based on the time of the year. For instance, the current state would be active from roughly spring to the end of the event. But then in the immediate aftermath, before Youtube etc is updated, there wouldn’t be any actions, just a small thank you banner statement (this will keep it relevant while giving time for contributors to get their work done for the next state). Between mid August to early winter, the CTAs could do a few things, I think directing users to last years content and having a link for sponsors for next year would make sense - but this could be a few things. A note on when the call for proposals (CFP) is open would also be sensible IMO. Then winter to spring would focus on the CFP.
This is how I have been thinking of the seasonal states, which is one area of feedback where I would really appreciate comments from community members and stakeholders.
F33 Wallpaper
The F33 wallpaper made sense thematically because of the global nature of our community, and to me this wallpaper just screams Fedora. I went with the night theme because it visualizes a feeling of energy, activity, and life. The space theme also connotates a feeling of the future and exploration which feels right.
The layout used is pretty standard for a hero, allowing little to need to be changed in the event of updating the background in the future.
Explore the latest in Open Source Section
This section is meant to set base expectations and communicate what goes on in general at Flock. It would likely be most useful for newer Fedorans or people who are new to Flock. The links in each card scroll the user down to the Flock calendar with a filter set to show the relevant information. If we change formats in the future, these cards can also provide a good space to indicate basic info about that.
Past Footage
The Footage section will have the past years playlist pulled up for quick viewing wheras the “Visit Fedora Youtube” link will take the user to the youtube channel in a separate tab.
Hybrid Format Section
This section was somewhat challenging to create due to the changing nature of Flock. The layout is designed to make it easy to access in person/virtual information (and to place announcements for either of those aspects of the event).
The image gallery is meant to be easily updatable, and to be able to adapt to different screen sizes. So on mobile, the grid with nest information would all be displayed together while the rest of the asymmertical gallery would be displayed in context with the Flock information.
The Learn more links open up a FAQ page in a separate window that is currently being designed. This will contain all the extra details. The “Destination” and “Online Platform” links will open up pages that have travel information and info on whatever online platform we are using (currently Hopin)
Hatch is given it’s own section because it’s new and separate, but fits still resides within the “Flock” Umbrella. When proposals aren’t being accepted, the button will be grayed out and the text will state the date that the proposal window is open.
Important Dates
The goal of this section is to make participating in Flock and Hatch easier. When the dates are past due, they are grayed out as is seen with the first one, The CFP is green with a purple button to indicate that it’s time sensitive, in comparison with the Flock registration where there is less of an emphasis on the Deadline. For registration, there’s also a link for accomodation info.
The Fedora characters are added for a little fun and brand consistency.
Calendar
This section is intended to be the most action focused. Which is why the first section of content takes the user here (as does the second action in the hero section). I didn’t put it first because I think the narrative flows better having it here after Important Dates.
In contrast to the Format Section, where Hatch follows Flock/Nest, this is ordered chronologically because I think it follows the order that users would use it.
The tags used here are all colour coded (as noted below). the dark gray ones in the Flock Calendar are for location (the Track 1/2 example is a Nestified version, for Flock this would indicate rooms at the conference location). The coloured tags are to create better distinction between types of events, the tags can also be used for filtering.
- Light blue: 25min session
- Dark blue: 50min session
- Purple: Keynote Speaker
- Orange: Lightning talk & Socials
- Green: Workshops
- Pink: Hackfests
Hatch
This is done as a calendar with an info box because otherwise it’d be 31 days of scrolling. I was thinking it could also be cool to use flags as the event indicators on the dates to show where an event is happening at a glance. Hatches are very community focused so it would be good do do something like that. The “More Information” link will take the user to the organizer’s event info.
Flock
This is designed to be a continuous scroll through all 3 days. The tab will adjust based on how far the user scrolls. Also, if dates from another tab are still visible while scrolling, they will be dimmed and grayscale to clarify further.
However it could also work to have the tabs be isolated, however this would add more steps to searching.
The design of this will be dependant on how Flock/Nest is to be organized in the future. If we go the route of having specific days virtual and others in person, then we can use the Flock/Nest logo in place of where I’ve placed the dates. However another way to do it is to put the dates above the times (which adds a lot of redundancy to the calendar but makes it very explicit).
The add to calendar button will interact with the user’s calendar, so you can add sessions directly. This can be useful for both in person and online events.
The filter would be focused on tags. However I was also thinking keywords could be used too. I was curious about other people’s input here. I don’t want to make this something that becomes extra work to maintain each year, or to only appeal to fringe use cases as this calendar is meant to be fairly quick and light.
Social Media and Communications
This section is pretty similar to what currently exists. Ask Fedora was added for people who are very new to the community.
Sponsors
I’ve changed the design from using the hierarchical depiction of sponsors through headings to instead use general logo size to communicate that. While differentiation is important, I thought size was a better way to do this as it makes it so all the logos can be seen in a single screen. everyone gets more screen time here. The box outlines account for the differences in shape as well.
On mobile, this will become an automatic scroll, where the bigger logos will be paused on for slightly longer (however on mobile, sizes would all be the same). The backgrounds would also not be used on mobile.
A future idea that I had was to have modal popups on click that has some info one something that the sponsor did to contribute to open source with a link to their homepage. However I wasn’t sure if the extra work to maintain and organize that info would be worth it, so I was curious on whether or not members of the community would find this interesting/desirable.
Benefits of sponsorship
This information is pulled from the prospectus as kinda a quick overview in hopes of attracting more organizations to our fantastic conference.
Footer
Standard Footer
I’m very interested in hearing your feedback!
My hope is that this design will make it easier for Fedorans to participate in Flock/Nest/Hatch at all stages, and especially to make it more accessible to newer members of our community. With the plans that we are making on the development side, we think that we can make the seasonal behaviour of this site still easy to maintain.
Thanks!
Ashlyn Knox (lilyx)
