Pickswise rebrand
Right before the 2022 Super Bowl, the Pickswise product needed some heavy duty technical work done. This gave a great opportunity for Marketing to refine the Pickswise brand. Both projects meant the Product Design Team could elevate the look, feel and user interface of the Pickswise website, address some of the larger usability issues, create a more flexible, consistent and accessible digital design system, and kick off the approach for designing the Pickswise mobile app; next next up on the roadmap.
THE CONTEXT & OBJECTIVES
To correspond with a larger technical replatforming projects already in the works, the business decided to give the Pickswise brand a refresh. The site had originally started off as a simple blog style affiliate site, but had grown into something bigger as a product, and the business wanted to expand it further. Beyond the current site creaking on its WordPress technical platform, the UI was also restrictive, muddled, and not hugely visually engaging.
Marketing set to work on refreshing the overall brand elements. Myself and the design lead worked with them to ensure colours and fonts could reach AA accessiblity in digital – if not within the formal, core brand, at least within a digital context. We needed to get all of this done, integrated into the new UI and the new page layouts in time for the devs to release the new site before one of the most lucrative days of the year for Pickswise.
OBJECTIVES
- Create and implement a refreshed UI utilising the newly rebranded logo, elements and colour palette
- Push to make that UI and related code meet a AA accessibility standard as much as possible
- Coordinate with devs to create tokens out of the Figma designed elements
- Squeeze in any new, validated features that could be integrated into the rebrand work
- Ensure everything could be ready for release the week before the 2021 Super Bowl
THE SET UP
- My role: Director of Product Design and User Research
- Company: Spotlight Sports Group, US Pickswise brand
- Main Team: B2C product designers and design lead, user researchers, B2C product management, delivery, development, 2 P&L owners, head of US content, the US marketing/branding team
For this project, I worked closely with the design lead, the head of product for the US, and the head of development for Pickswise to sort out the overall objectives, timelines, larger deliverables, design and research resource, and creative direction (in partnership with with the brand team).
THE OLD PICKSWISE SITE
DESIGN RELATED ISSUES
- Lots of colours competing for attention; little consistency of colour usage
- Hierarchy was muddled, especially around titling and content vs offers
- Users landed on a co-branded offer on the home page before they’ve been shown any content
- Pickswise specific, USP content (e.g. Latest News) way down the page
- The upper navigation was getting lost
- Issue with some body copy being too light or too small (basic accessibility was inconsistently implemented)
- Though not a rebrand issue, no real sense of how old any of the content was, of timeliness
THE PROCESS
This project kicked off with updated brand assess from Marketing, a brand new roadmap from Product AND a fairly new, rapidly growing product, design and development team. A whole of new people trying to put out a whole new platform, brand, design, and (some) new features.
I worked closely with the Head of US B2C Product and the Dev Lead for this work on shaping the process of how design and any discovery was going to be done alongside development as they built the platform, in which priority any newly designed elements would be implemented, and staging out any new features to be designed and developed within the overall schedule of implementation alongside the overall rebranding and UI clean up.
From there, I worked with the Design Lead and the 3 other designers on the team on approach to the design system to ensure we were aligned with Marketing’s approach, and also ensuring we hit our own design targets, especially around constructing the design system in Figma in a way to make it easy for the designers AND the devs to use and reference (very important once the devs started creating design tokens).
KEY HIGHLIGHTS AND FEATURES
- Brand collaboration: Design and Marketing worked closely to ensure the spirit of the rebrand was represented in digital and also that our priority of making the products more accessible went back to Marketing to update their documentation for their own digital executions with the new brand
- A (mostly) AA accessible UI design system: Throughout the design of the new system, the designers constantly checked their elements were AA accessible from a visual POV, along with formulating a minimum font size and working with the developers on accessible considerations including alt tagging and screen reading considerations.
- A rebalancing of elements in page layouts to highlight USPs and better visual hierarchy: Most pages on the website were reconfigured to ensure that we could still hit our revenue targets as an affiliate by giving commercial partners adequate real estate AND we could reposition and reconfigure our content modules to be more prominent and engaging – so users knew we were a content site with ads instead of an ads site with content shoved out of site.
REBRANDED SITE PAGES
HOME PAGE
ANALYSIS
GAME PREDICTIONS
EXAMPLES FROM THE DESIGN SYSTEM
CONTENT MODULES
NAVIGATION
OTHER KEY ELEMENTS
THE RESULTS
The rebranded website launched in September of 2021 in prep for the 2022 Super Bowl season
- After the rebrand launch, Total Average Users topped 1 million (Before the rebrand, average Total Users within a 30 day period was between 400k-500k)
- Page views increased by approximately 2 pages per session
- Bounce rate dropped from nearly 70% to 42%
- Revenue increased significantly (numbers NDAd)
- Speed of designing and developing new features improved significantly – going from weeks to days – with the new design system in place.
Want more detail?
This is just the topline . I am happy to go into more relevant detail. Just contact me and let me know which areas you’d like to know more about.
