Chrome Events Page
Chrome events page designed to create a platform for developers who want an easy way to connect with the community and find places to meet in person or virtually.
Facilitate seamless event exploration and access for developers, enabling them to effortlessly discover and participate in both physical and virtual events.
Goals:
Project duration:
8 weeks
Working on the project from concept to launch phase to ensure all of the stakeholder’s feedback and content is being accounted for. Providing art direction for illustration assets that need to be created for designs. Allowing enough time to do QA with the developer to get staging to look similar to the Figma design before launch date.
My role:
Software:
Figma
Starting point:
As a starting point, I came up with sketches and wireframes of different components that will be essential in holding different types of information and help provide organization for the layout once they are created.
To prioritize the organization of event cards, I started by creating a single card wireframe. This wireframe will ensure that the necessary content is displayed appropriately and that the card can accommodate all relevant information. By focusing on this crucial component of the page, I am able to establish a solid foundation for the overall design and information.
Card design:
Event blocks:
In addition to the event cards, parent event blocks were designed to enhance the organization of information and create a seamless user experience. By incorporating these elements, it will improve functionality, and ensure users can easily find the events they are interested in without clutter and overwhelming information displayed all at once.
Challenges:
1. Past events are hard to find and requires too much scrolling to reach right away. Users may not be aware that the section is even available
2. Event cards don’t look like they are a part of the panel when they are floating under it and need to look more unified
3. Three different types of event cards need to be designed with a way to identify what each one is for.
4. Having event blocks in blue when collapsed takes too much attention away from content and needs to be more subtle.
5. Event location and date are general information that should be displayed primarily on the event block instead of the individual event cards
Wireframe designs:
Wireframe designs created to show what the overall design will look like and how the event blocks, event cards and filters all come together.
Different types of event cards are needed that will represent specific events while also being able to tell them apart.
Problem 1:
Identifying the types of event cards needed to help create a card template for each one as an edge case.
Solution:
Added event cards
Three types of event cards were designed to represent the different types of events as an edge case. There will be events that will have a single speaker, a participant and multiple participants which will need to have their own type of card with their own specific information instead of a single card with general details
Finding a way present event details through concise event cards, minimizing the need for excessive scrolling and maintaining a clean, navigable page layout. Investigate techniques for nesting cards to avoid overwhelming visual clutter while ensuring ease of navigation.
Problem 2:
Putting minimal information inside the event sections to display little information so the user can quickly skim through at the first glance. Adding a button to see more event details to reveal event cards nested inside so the user can choose what event they want to view in more detail.
Solution:
Revised event block:
Updates made to the parent event blocks to remain in a light gray when selected instead of blue for a cleaner look that doesn’t take attention away from other content. Event cards are now also nested within the event block to show more unity which will minimize confusion for the users.
Tab navigation:
Having a tab feature to easily go back and fourth between recent and past events to give a prominent separation so that the user doesn't get confused with what section they are in. This also provides more visibility for the past events section when it is up at the top.
Upcoming events section will hold events that are more recent and up to date for the user to find what is currently available
Upcoming events
User will have the ability to tab into the past events section to view what has been done in the past and find specific events that have already passed.
Past events
Organization of abundant event data is needed to make it more effortless to locate diverse event types with ease and minimizing overwhelm.
Problem 3:
Using filters to help the user narrow down types of events and tag relevant event cards when displayed. Also using user profile images to show which event has a single speaker vs. multiple speakers as a way to tell the difference between the types of events.
Solution:
Filtering options:
Drop down filtering options for each category has been added to simplify scrolling through multiple events.
Final high fidelity:
Final website after adjustments were made to refine the color, cards and functionality of the page. Final graphic images for hero and event cards were also provided and added to the design.
High fidelity mobile design:
Final mobile design optimized to allow the same capabilities as the web version for a seamless transition between devices.
Filters & tab menu
Mobile filters will behave slightly different for mobile, filters will have a button which will reveal a sliding filter menu on the right side. Chips will be displayed after selection to make it obvious what has been selected for filtering. Tab menu will remain the same as the desktop to keep similar functions.
Event blocks optimized:
Event blocks will display the same as the desktop version as they are easy to view and scroll though even in a mobile view.
Single stacked cards:
Event cards will display in a single stacked manner to keep fonts and images at a reasonable size for accessibly and also to create less clutter on a small screen.
Style guide:
Google brand colors and fonts were used.
Google Sans
Roboto
End result:
Designs were handed off to the developer and launched after the QA process.
Mobile event cards don’t need to use a standard size like the desktop cards since they are single stacked. The cards could look cleaner to have them expand based on content so there isn’t extra blank space.
Event blocks can have more subtle color explorations to show active selection state opposed to inactive ones.
Reflections:
Mobile hero banner can be displayed as a splash screen instead of a banner upon launch to make it more interesting and utilize graphic images like the desktop page..