In anticipation for the biggest fight in Canadian history: Pascal vs. Bute, favored boxer Jean Pascal was as the height of his career after defeating Kuziemski in 2012 & Blades in 2013. Ready to take on any opponent worth fighting, Pascal’s popularity was increasingly growing with a Twitter follower-base topping nearly 150,000. Although Twitter & a variety of other social networks served him well as promotion tools, they didn’t provide him the value he sought from his brand. Most of his Tweets stayed on Twitter & didn’t link back to any source that he could call the “Jean Pascal Home”. That’s because his previous online identity was built on outdated technology (flash), and didn’t provide the superstar with any functionalities to curate his own content, yet alone easily manage his career history.
Contrast Web acknowledged the opportunity to help an emerging superstar set himself on the right path for online personal branding & proposed to develop a one-of-a-kind platform that would reinvent both his online image & provide him with a promotion tool that no other boxer in the world holds.
Digital Strategy
In order to build this platform, we needed to define a goal-set plan which first outlined the opportunities, challenges & objectives the brand may face. With those details ironed out, we were able to make some new goals for our next development moves:
Develop a unique architecture style that would set the brand apart from its worldwide competitors.
Develop an news publishing platform that would serve as a microphone for Jean Pascal’s communications with additional requirements to support both English & French languages.
Develop an event publishing platform that would schedule events, set related results, photo galleries, news & most importantly build a historical map of the boxer’s career with additional requirements to support both English & French languages.
Develop a friendly user interface for easy management.
Develop the product using the flexible language/framework - Python/Django.
Develop an SEO strategy to set the markup in the right direction for proper indexing activities.
Content Architecture
With the increase of content being produced on the Internet, search engines are setting stricter rules for sitemap architectures & content organization. Websites that follow the architecture guidelines get rewarded with increased rankings for specific keywords, while the latter get diminished positions on rankings due to the search engine’s inability to rank for specific keywords. It’s a follow-or-die landscape.
We decided to define the website structure in a systematic method in order to optimize website flow & content discovery both for the users & search engines:
1
Homepage: Directed visitors towards the right direction.
2
Event Dropdown: Lists upcoming & past events in Jean Pascal’s bout schedule.
3
Event Page Section: Provides the user with an event fight card along with related news, video or photo albums.
4
News List Section: Lists news articles based on chronological order - whether they were event-related or not.
5
News Page Section: Provides the user with an on-site experience for external news - diminishing the risk of losing that visitor to another external source on click-out.
6
Video List Section: Lists videos based on chronological order - whether they were event-related or not.
7
Video Page Section: Pulls videos directly from YouTube to bring the viewing experience within the Jean Pascal brand.
8
Photo Album List Section: Lists photo albums based on chronological order - whether they were event-related or not.
9
Photo Gallery List Section: Lists photo galleries based on chronological order - whether they were event-related or not.
10
Biography Section: Lists Jean Pascal’s biography along with some creative & well produced story-told videos highlighting his path to success.
11
Statistics Section: Pulls statistics from the platform such as his wins, losses, knockouts, rounds boxed, knockout percentages along with his last body measurements.
12
Fight History Section: Displays Jean Pascal’s professional career in a timeline form, allowing viewers interact with moments of his career in time by watching video samples of his fights or viewing more details on the event.
User Experience & Usability
In order to create a well-rounded user experience, we needed to marry the content strategy with pleasant usability functionalities. Given the first goal of the brand was to engage visitors to into the website, we knew we needed to emphasize our usability around the content-heavy architecture.
Listed below are some key concepts that stood out from our brainstorming sessions:
1The prioritization of most important information above the fold gives visitors what they need to see, at any given time.
2The persistent navigation allowed easy access to core sections of the website.
3The well-organized & consistent content architecture allows visitors to easily position their current location on the website.
4The consistency in style eases the navigation’s learning curve as visitors dig through the website.
5The integration of hidden, but easily accessible social network feeds directly on the website strengthened user engagement as it diminishes the likelihood of ripping the user out of the website.
6The integration of javascript technologies made it possible to hide / unhide pieces of content from a page -- giving the visitor control over what materials interested him the most.
7Good use of CSS styling makes it possible for users to understand the functionality of individual elements such as buttons & links.
8The integration & styling of iframe based external news sources directly on the website strengthened user engagement as it diminishes the likelihood of ripping the user out of the website.
Frontend Markup & Search Engine Optimization
Once the objective were set, content architecture laid out & visual design completed, we were finally ready to set path for the HTML, CSS, Javascript programming & markup optimization activities.
Our frontend developers explored a variety of javascript technologies to create a sense of interaction urgency with the design. Sliders, transitions & custom image sliders served an integral part for making the design fit into its aggressive theme, while making the browsing experience more pleasant for the visitor.
As we progressed with the programming of the markup & cross-browser testing, we made use of the most important search engine optimization tactics in our html code:
1
Built a friendly & descriptive link architecture to make it easy to determine one’s position on the website.
2
Set descriptive & engaging meta data, following character lengths rules.
3
Set descriptive title & alt data for internal links & images.
4
Set link attributes to each website section – allowing external links to be created for each section.
5
Set internal links to establish a site architecture & spread link juice.
6
Set descriptive anchor text to each link to set relevancy.
7
Made use of heading elements to describe the topic of a section.
8
Made sure that each page had distinct content in order to avoid ranking loss.
ACHIEVEMENTS
Thorough study of Jean Pascal’s career prior to any product development.
Prioritization of clever call-to-actions for increased goal conversions.
Implementation of CSS3 attributes for an efficient CSS markup.
Implementation of a server-based automatic XML based Sitemap Generator for continuous direction-feeding to search engine bot crawlers.
Implementation of HTML5 elements for an efficient HTML markup.
Implementation of jQuery mobile framework elements.
Implementation of Twitter feed for an enhanced Social Experience.
Implementation of Facebook feed for an enhanced Social Experience.
Implementation of Instagram feed for an enhanced Social Experience.
Implementation of a Python / Django based platform for direction flexibility.
Search Engine Optimization of HTML markup to aid bot crawling & indexing of content within major search engines.
