What: A complete revamp of the website’s UI and UX.
Why: To offer a more engaging and easier navigation experience for our users.
What: Implemented modern graphic elements to enhance visual appeal.
Why: To capture users’ attention and create a lasting impression.
What: Consistent and meaningful engagement on various social media platforms.
Why: To direct more traffic to our website and to stay connected with our audience.
What: Improved the backend functionalities and frameworks.
Why: To support the new features and to ensure the site remains scalable and secure.
What: Efficient planning and publicity of various events through the website.
Why: To drive user engagement and offer valuable content.
What: Our website now ranks at the top in Google, Bing, and DuckDuckGo search results.
Why: Enhanced search engine visibility increases the chances of being discovered by new visitors, thereby boosting overall website metrics.
What: Changes in the layout, user interface elements, and visual components of the website.
Why: To improve readability, navigability, and overall user experience, especially on mobile platforms like iPhone and Android phones.
What: The GSS website now offers an optimized layout and user interface for mobile devices.
Why: Given the increasing use of mobile phones to browse the internet, this ensures that the GSS website is easily accessible and navigable for students on the go.
What: Achieved a coherent and unified layout and structural design that represents the optimal state of the website over the past three months.
Why: Consistency in design and structure enhances brand recognition and makes the site more user-friendly, allowing students to comfortably find whatever information they need.
What: Introduce a newly designed and pre-structured post template for the GSS website.
Why: To streamline the content creation process, ensuring consistency across posts while eliminating layout-related issues. It aims to enhance both user experience and operational efficiency.
What: Includes the title of the post, the date it was posted, categories it belongs to, and a featured image.
Why: To provide immediate context and visual appeal to the reader, allowing for quick comprehension of the post’s topic and relevance.
What: A search bar embedded within the post.
Why: To encourage readers to explore related topics or posts on the GSS website while engaged with the content, potentially increasing overall site interactions.
What: A concise introduction to GSS.
Why: To build trust and establish a closer connection between readers and GSS, particularly for first-time visitors or those unfamiliar with the organization.
What: A simple form for newsletter subscription.
Why: To make it convenient for readers to stay updated with GSS activities by subscribing to the weekly newsletter in a matter of seconds.
What: The primary area where the actual post content will be added.
Why: Designed for ease-of-use, this is the only section that needs to be populated when creating a new post. The template takes care of all other structural elements.
What: Displays the most recent posts and upcoming events.
Why: To keep readers engaged with the latest GSS activities and to promote upcoming events, encouraging further interaction with the GSS website.
What: A navigation bar at the bottom of the post.
Why: To help readers easily move to previous or next posts, enhancing their navigational experience on the GSS site.
The implementation of this new template offers numerous advantages:
By incorporating these elements, we not only streamline our internal operations but also significantly improve how our audience interacts with our content.
What: This section will house the event’s name, a brief description, venue details, and other key attributes.
Why: To provide users with an instant overview of the event, facilitating quick decision-making.
What: Information on the date, starting time, and ending time of the event will be highlighted here.
Why: Allows visitors to quickly assess whether they can attend the event, without having to search through multiple areas of the page.
What: This section will detail the event’s cost (if any) and will contain a link for ticket purchasing or registration.
Why: To streamline the ticket-buying or registration process, making it easier for interested visitors to commit to the event.
What: Suggestions for other upcoming events will be displayed here.
Why: To engage visitors with additional GSS activities, potentially increasing attendance for future events.
By adopting this new structure and design, we aim to enhance the user experience on the GSS website significantly, specifically for those interested in attending GSS events. The new layout is designed to be intuitive, providing all necessary information at a glance while also allowing for quick and easy navigation.
What: The design of the Linktree page has been updated to mirror the GSS website theme, making it look more modern and formal.
Why: Consistency in design across platforms fosters brand recognition and trust among the users. The redesigned Linktree will help uniquely represent GSS while promoting a cohesive brand image.
To ensure that the revamped Linktree page remains effective and consistent, here are some essential notes for future maintenance:
What: All links attached to the Linktree should direct users to the GSS website rather than third-party platforms like Eventbrite or UBC Grad.
Why: The primary goal is to drive more traffic to the GSS website and help students get acclimated to using the GSS website as their go-to resource.
What: Thumbnail images should be cropped to square dimensions and avoid including any text.
Why: Thumbnails appear in small circles on each button in Linktree, and properly cropped images without text will ensure they present well and are easily recognizable.
By implementing these updates and adhering to the guidelines for future maintenance, we aim to optimize the GSS Linktree both in terms of design and functionality.
What: The Hiring Post has been redesigned based on extensive research from various references, including UBC job postings and other hiring websites.
Why: A well-designed Hiring Post is critical for attracting the right candidates. By adopting best practices from reputable sources, the post is now optimized for readability, engagement, and action.
What: Several new sections have been introduced in the Hiring Post, including the “Follow GSS on UBC Career Center”, “Most Recent Job”, and “Upcoming Events” sections.
Why: These additional sections serve various purposes:
“Follow GSS on UBC Career Center”: This section aims to increase GSS’s followers on the UBC Career Center platform and provides another avenue for job seekers to find GSS-related job posts.
“Most Recent Job”: This feature allows visitors to easily access the latest job opportunities, making the browsing experience more user-friendly.
“Upcoming Events”: Promoting upcoming GSS events in the Hiring Post serves a dual purpose of keeping the community engaged and informed.
What: The search feature is now fully functional on all platforms. Users can input keywords to find relevant posts, events, and pages.
Why: Previously, the search feature was not returning correct results, making it difficult for students and staff to quickly find what they’re looking for. By fixing this, we have significantly improved the website’s user experience.
What: The search bar located in the footer of the homepage has been repaired and is now operational.
Why: Having a search bar in the footer allows users to quickly search for content regardless of where they are on the page, offering another layer of convenience.
What: An additional search button has been added to the menu bar. Clicking on it triggers an animation that expands to fill the screen, providing a focused area for search input.
Why: This new feature adds an element of interactivity and aesthetic appeal to the website. Furthermore, the animation creates a sense of engagement, making the search process more intuitive and enjoyable for the users.
With these updates, we aim to reinstate and improve the search functionality on our website, providing a better and more efficient user experience for everyone involved.
What: The creation of a new newsletter post will now automatically display on the NEWS board on the homepage.
Why: This automated approach eliminates the manual work of updating the NEWS board, streamlining the content updating process and ensuring that the latest newsletters are easily accessible to our community.
What: The Newsletter post will feature a new design, incorporating multiple sections for better navigation and interaction.
Why: The new design aims to make the newsletter post more user-friendly and interactive. The different sections serve the specific needs of the users, from sharing and reading to subscribing, offering a complete and enriching experience.
What: Every Friday, after the newsletter is emailed to subscribers, the content will be posted on the homepage using a pre-designed template. This will then automatically update on the NEWS board.
Why: This weekly update workflow ensures that the website stays current with minimal manual intervention, providing visitors with the most recent information seamlessly.
By implementing these updates, we aim to make the GSS newsletters more accessible, interactive, and useful for our community. The automatic update on the NEWS board and the new design elements are all intended to enhance the user experience.
What: Added a new section to the homepage footer where visitors and students can input their email addresses to subscribe to the GSS Weekly Newsletter.
Why: This new feature aims to facilitate easy subscription to our weekly newsletter, especially for first-time visitors or students who want to stay updated with GSS activities and news. It provides a straightforward way to engage with our audience and keep them informed.
By implementing this quick and easy subscription feature, we aim to increase engagement and keep our community better informed about upcoming events, news, and other updates. It takes just 5 seconds to subscribe—simply input your email and hit the button.
What: The layout has been refined to be more user-friendly, with a focus on text readability. Font sizes have been adjusted to be smaller and more modern.
Why: These changes aim to enhance the visual appeal and readability of the website, especially for mobile users. Smaller, modern fonts and an improved layout contribute to a cleaner, more organized look and feel, facilitating better content consumption.
What: Added a flashing GSS logo as a loading indicator during page transitions.
Why: This provides users with a visual cue that the page is still loading, which serves to improve the overall user experience by reducing perceived wait times.
What: The new event page features a countdown to the next upcoming event prominently displayed.
Why: To create a sense of immediacy and excitement among visitors, encouraging them to learn more about upcoming events and consider participating.
What: The upcoming events are displayed in a ‘cards view,’ each card representing an individual event with key details.
Why: This visually appealing and modern layout facilitates easy browsing and quick understanding of each event’s specifics, thus enhancing user experience.
What: An option to browse all events in a monthly calendar view is available.
Why: This feature offers a holistic view of all the events scheduled for the month, allowing visitors to plan their involvement better and ensuring they don’t miss out on events they are interested in.
The redesign aims to offer a cleaner, more modern interface that aids easy navigation and efficient information retrieval, thus fulfilling the needs of our diverse visitor base.
What: The new component will showcase information related to the two upcoming GSS events.
Why: To keep our community informed and excited about upcoming activities, encouraging higher participation and engagement.
What: A countdown timer is included, ticking down to the start time of the nearest upcoming event.
Why: This creates a sense of urgency and excitement, prompting users to take note of the event and plan accordingly.
What: A “Events happening now” section will automatically appear and count down until the end of any ongoing event.
Why: To provide real-time information about current events, encouraging immediate engagement and participation.
What: The component is designed in line with GSS’s main colors and is optimized for mobile viewing.
Why: To maintain brand consistency and ensure a smooth user experience across various devices.
What: All components within this new feature will be automatically updated.
Why: To reduce manual maintenance efforts and ensure that the information displayed is always current and accurate.
What: Upon landing on the GSS homepage, the News Slideshow will be one of the first elements to load, taking up more than 60% of the visible space.
Why: To immediately capture the attention of visitors and prominently display the most recent and important GSS updates.
What: The news items in the slideshow will automatically slide, looping through the different updates.
Why: To provide a dynamic, engaging experience and ensure that visitors are exposed to multiple pieces of important information without having to interact manually.
What: Clicking on any slide in the slideshow will open the corresponding news post in a new browser tab.
Why: To allow easy and immediate access to detailed information, thereby improving user engagement and the information dissemination process.
What: Incorporated a smooth and visually appealing animation when changing between slides in the News Slideshow.
Why: To enhance the aesthetic appeal and user experience, while ensuring the animation runs seamlessly across all platforms. This creates a more engaging and professional presentation of the news updates.
What: Introduced a new layout and design elements specifically for the GSS Photo Gallery.
Why: To modernize the gallery’s appearance and make it more visually appealing, further enhancing user engagement and overall experience.
What: Implemented a feature that changes the photo order randomly each time the gallery page is refreshed.
Why: This provides a dynamic and fresh user experience, encouraging visitors to engage more with the gallery.
What: Ensured that the Photo Gallery is fully responsive and functional on all platforms including desktops, tablets, and smartphones.
Why: To make the gallery accessible and user-friendly, regardless of the device used, thereby improving the overall user experience.
What: Font size for both body text and headings has been reduced across all posts and the website.
Why: The reduction improves readability and layout, making the text easier to read and optimizing space on the web pages.
What: The website has been enhanced to be fully responsive, working seamlessly on computers, mobile phones, and tablets.
Why: This update expands the website’s accessibility, allowing students to access it conveniently from any device, thereby improving user experience.
What: Fade-out and fade-in animations have been added when transitioning between different web pages.
Why: These animations provide a smoother user experience, adding a level of professionalism and a modern aesthetic to the website.
What: Minor adjustments to the design elements like color, button shape, and iconography.
Why: To create a more visually appealing and elegant appearance that aligns with the brand’s aesthetic.
What: Added a zoom-in feature that activates upon clicking an image.
Why: To enhance user engagement and allow better viewing of the images, making the carousel more interactive.
What: Introduced a new section on the homepage titled “Our Services”.
Why: To provide an easily accessible overview of the services offered by GSS, improving user navigation and information retrieval.
What: Complete redesign of the layout, including new fonts, colors, and graphical elements.
Why: To make the board more visually appealing and engaging, which can potentially increase student interaction.
What: Articles are now displayed as neat cards, and the font size has been reduced.
Why: To present the news in a more organized and visually pleasing manner, making it easier for visitors to scan through multiple articles.
What: Colors and design elements have been updated to align with the brand’s guidelines.
Why: To create a more modern, friendly, and visually cohesive look, replacing the previous gray color that was less engaging.