Landing pageS
The Brief.
The Affiliates Team at Pinnacle requested a redesign of their affiliates acquisition landing page. The problem being that it had been a long time since their original design was done and felt something more modern was needed. The landing page would be sent to various would-be customers and clients across different countries in the hope to drum up further sales and sign-ups. It would need to be flexible enough in its design to cater for promotional messages across different products that Pinnacle offer, sometimes in the form of either a single message or dual message. Additionally the landing page would also have to accommodate for any potential sign up forms that may be needed by different product teams.
In the initial meeting between myself and the Affiliates Team, we discussed the project objectives, the teams needing involvement, timescales and deliverables. I set up the necessary communication channels between the appropriate teams, scheduled weekly meetings and outlined the requirements. In its design, the landing page needed to:
-
Cater for localised promotional messages - Japanese, Korean, Norwegian, Portuguese, Russian, Spanish and Swedish
-
Accommodate different product offers, namely Sportsbook and Casino
-
Ability to showcase either single or dual messages
-
Accommodate for potential sign up forms
-
Be responsive across a range of resolutions
-
Showcase Pinnacle's USPs
-
Create a more engaging aesthetic
The landing page was going to need a simple, future-proof design, acting as a template, and would be a good opportunity to push Pinnacle's branding. It was to be built by the development team on a CMS so that the various product teams at Pinnacle could use it and add the content they needed, whilst adhering to the structure and branding of the page. This got me thinking and I came up with the idea that all other future Pinnacle landing pages should utilise this new design to maintain consistency and brand identity across the entire site; an idea that's currently being implemented by the company.
Exploration.
I was sent a selection of landing page examples being used by other betting companies. The Affiliates Team and I discussed why they chose these designs as inspiration and what they liked/disliked about the pages. Moreover we analysed the pros and cons of different content alignments and whether these examples would theoretically align with the requirements of the project brief. After assessing the various opportunities and constraints of the examples, I requested the copy for the page so that I could establish the information hierarchy and how that would translate to the wireframe designs.
Wireframes.
Reviewing the requirements and the landing page examples, it seemed clear that I would need to design a template that incorporated a lot of space for the varying lengths of copy and number of promotional offers. A left aligned approach seemed more appropriate to utilise when considering all the variables the page would have to accommodate for. Considering the information hierarchy it felt pertinent to list the offer alongside the imagery with Pinnacle's USPs sitting underneath, running across the page. If the terms and conditions was a requirement (as it was a variable), it felt necessary to add this to the bottom of the page so as not to interfere with the rest of the design. I designed both desktop and mobile wireframes and presented these to the Affiliates, Content and Development teams. They were all in agreement that this approach to the information hierarchy and layout was the most suitable, it also gave each team an idea what to expect in terms of their respective contributions to rest of the project.
Had it been possible, I would've liked to have tested the wireframes on a sample of users to gauge any potential pain points, what they liked/disliked and whether it would meet their needs as well as fulfil the brief. I would've collated any data I acquired and determined whether any amendments needed to be made to achieve a more user-centred design.
UI Conceptualisation.
With the wireframes agreed upon, I moved the project to the UI phase where I started creating a mood board of landing page designs. Gaining some inspiration led me to experimenting with gradients and textures that could be applied for both the casino and sportsbook products. Further exploration meant the design started to gain traction with regards to typefaces, imagery and colours. Both generic and game-specific designs were created to test whether the sizings of various design elements would be deemed future-proof. Regarding imagery there were a few avenues that could be taken - devices, stadiums, pitches and sports players could theoretically be used however, the Design Team had informed me that they were working on a new in-house creative style. Both the Design Team and I discussed its use and agreed that this project would be a great opportunity to showcase the new style. The discussion extended to the use of typefaces and the need to unify one to be used on future UI and Design Team projects. This ensured consistency throughout the brand and across the various channels this style would appear. It was realised that the outlined, italic typeface in the preliminary designs wouldn't actually be suitable to use when it came to localised text and thus it was agreed that a simpler approach should be taken.
The next step was to design the landing page template at different resolutions. This established the various sizes each element on the page needed to be and would be used as reference to help the Development Team when they came to building the responsive page. It was at this point I received the finalised copy from the Content Team. Ideally I would've like to had this final copy at the wireframe stage but nevertheless I adapted and designed the landing page with the localised copy. In turn this tested the font size choices and determined whether any amendments needed to be made. Fortunately it seemed that, even with long languages such as Russian, the chosen sizes were appropriate to carry on using. Regarding accessibility, I checked that the colours used passed the accessibility colour contrast test. Other accessibility checks pertained to the font sizes that were chosen were considered large enough to be legible at smaller screen resolutions and that the form fields had clear, readable labels. Moreover when the landing pages were being developed, alt tags, keyboard navigation and visual indicators were present in the code.
During the implementation of the localised text, to my surprise I was informed that both stakeholders in the Affiliates Team were leaving the company and their departure occurred rather suddenly, the result of which left me managing the project. As I had been involved since it's inception and my experience of managing other projects, I knew what actions needed to be taken and by whom. I had informed the relevant teams of the news and what plan of action I would be undertaking to take the project over the finishing line. In order for each respective team to prioritise and carry out their associative tasks with regards to timelines, I ensured that tickets were created and sent over to each team as early as possible. To keep the momentum of the project going, I made sure the turnover of mockups, pertaining to the localised text, was a quick one. As there was no Affiliates Team to give sign off on these mockups, I instead presented them to the Content and Localisation Teams for their consideration and approval.
The Design Team sent me their finalised creative for both Casino and Sportsbook pages. I placed this onto the UI and set upon designing the remaining potential use cases i.e. radio buttons, sign up forms, dual promo messages, USPs and Terms and Conditions. A presentation felt necessary to ascertain whether each relevant team were happy with the landing page and for myself to outline what the next steps should be. After presenting and conducting a Q&A session, each team agreed that the finalised landing page template design seemed to have met all the requirements. The green light was therefore given to move the project into the development phase. Had this been a perfect world, I would've liked to test the same sample of users at the wireframe phase. Using a combination of ethnographic field research and one-to-one interviews, I could analyse user behaviour and identify any potential pain points based on the results.
Early iterations of the casino landing page
Early iterations of the sportsbook landing page
Final landing page design - single offer
Final landing page design - single offer - Korean
Final landing page design - registration form
Final landing page design - dual offer - registration form
Final landing page design - Sportsbook version
Final landing page design - at 1920px, 1280px, 1024px, 900px and 768px screen resolutions
Development.
Once the green light was given, I set up a meeting with the Development Team to conduct a handover of the project. All assets such as iconography and imagery were prepared, exported and sent over to them. A style guide was provided, highlighting the responsive font sizes and spacial alignments. Other behavioural and states of elements such as the language selector and sign up form were designed for the developers' reference. The designs were added to Invision where the developers could inspect the front-end properties of the designs. I acted as a consultant for the Dev Team to answer any further questions they had about the design, as they carried out their work on the page. Once the coding had neared completion, I conducted a front-end review as a means of quality control. The developers were sent a list of minor amendments at different resolutions to implement, ensuring the design on the screen matched the designs on my file.
Style guide for the Development Team
Registration form behaviour
Post Production.
Currently the Affiliates Landing Page is being developed but requests for other landing pages have been brought to the fold. The Chinese Country Manager needed a landing page but with additional content such as testimonials and a 'how it works' section. Regarding the aforementioned idea of utilising the Affiliates Landing Page template design for all other future landing pages, I designed a concept for the new Chinese landing page by utilising this template. However I would ideally liked to have tested the Affiliates landing page once it has gone live first to gauge the performance of the design and what our users think of it. This in turn would mean that the Chinese landing page wouldn't fall into the same traps but unfortunately time and prioritisation of the company's projects don't allow me the luxury to wait for the test results before continuing with other landing page requests. Nevertheless once the Affiliates landing page has gone live, I'll be requesting any data I can acquire. Analysing the results and reviewing tools such as heat maps, will give me greater insight into any adjustments that may need implementing to continually improve and refine the landing page template. Additionally once the Landing Page template has been developed, I would test the pages links and functionality to see if all works as intended. I would also conduct a front end review as a means of quality control, to ensure that the design on the screen looks pixel perfect on the computer screen. To find out what difference the new landing page design had on user conversion, I would seek to conduct an A/B test against the current landing page design where by 50% of users would be shown the new landing page and the remaining 50% would be shown the current one. Once the data had been collected and analysed, I would disclose this information back to the new Affiliate Team members and advise which landing page design should be shown to 100% of users where conversion was higher.
