Hong Kong China Rugby
Client
Hong Kong China Rugby
Year
2024
Scope of Work
Information Architecture, User Flow, Wireframing, UX Design, UI Design
Location
Hong Kong
HK China Rugby (HKCR) is revamping its website to better engage fans, handle traffic spikes, and boost conversions for events like HK7s. The new site will be user-friendly, clean, and easy to navigate, with best practices for content management.
Overview
In this project, my role involves drafting the website's information architecture, designing the UX journey's user flow, creating wireframes, and developing the final UI design. I'm grateful for the collaboration and support from my teammates and the opportunity provided by Hong Kong China Rugby and DigiSalad to contribute to this innovative endeavor.
Project Goals
1. Enhance User Engagement
- Create an appealing, user-friendly website with intuitive navigation, up-to-date fixtures, results, league tables, and quick access to event information.
2. Enhance Website Interface for Consistency
- Improve the website interface to ensure a consistent user experience. Focus on uniform design elements, seamless navigation, and cohesive branding.
Problems
1. Overwhelming and Poorly Structured Content
- The website currently has too much content that is poorly structured, making it very difficult for users to browse and navigate to specific information.
2. Confusing and Poor Navigation
- Pages are often hidden within other pages, requiring multiple clicks to reach the desired content.
3. Inconsistent Content Organization and UI
- Different pages on the website have varying content organization and inconsistent UI elements, leading to a disjointed and confusing user experience.
Solutions
1. Logical Categorization
- Organize content into clear, logical categories that make it easier for users to find specific information.
2. Breadcrumbs and Shortcuts
- Use breadcrumbs and shortcut links to help users quickly navigate to desired content with fewer clicks.
3. Standardized Templates and Consistent UI Elements
- Develop and implement standardized templates for different types of pages to ensure consistency in content organization and use consistent UI elements, such as buttons, fonts, and colors, across all pages to create a cohesive look and feel.
Design Process
Given the extensive content on the website and my unfamiliarity with rugby, I have dedicated considerable time to studying the teams, matches, and programs. This effort allowed me to thoroughly understand all the pages and reorganize the content for better structure and easier navigation.
Efficient Design with Components
Given the vast content on the rugby website, we've leveraged components and variables extensively to drive efficiency. By encapsulating frequently used widgets into components, we've simplified editing and organization, ensuring a seamless and structured approach to managing our diverse content.
Vibrant Finish: Powering Up with Blue and Red
In the final screens of our rugby website, we've integrated the energetic hues of blue and red, synonymous with the sport, to amplify the visual impact. This color scheme not only ensures brand consistency but also injects a dynamic and engaging rugby-inspired essence into every corner of the site.
