Betting resources
The Brief.
Betting Resources is an information repository that sits within the Sportsbook product. It currently consists of articles pertaining to sports, casino and other betting content that aim to provide the user with a deeper understanding on the various topics discussed. Pinnacle offers to educate users to help them make more informed decisions when betting however, the need for improved usability throughout the repository has become essential. During the kick-off meeting, the project objectives were discussed and consisted of business and user requirements the redesign would have to satisfy, some of which were:
-
Improve optimisation for mobile users
-
Improve SEO performance
-
More user friendly
-
Highlight multiple content offering i.e. videos, podcasts
-
Take ownership of banner space and utilise it to promote content as well as acquisition
-
Make it easy to navigate between different categories
-
Make the content more relevant via personalisation methods
-
Overall look clean, feel dynamic and modern whilst avoiding looking crowded
Once the project plan had been laid out and understood, the project was handed over for usability analysis, exploration and wireframe design. As users of the Betting Resources are the same as the Sportsbooks, the same user personas could be used to form the basis of the redesign. However some users may come from a search engine result, meaning the arrangement of content for the redesign had to be carefully considered to be seen as both useful and usable to the wider audience.
User Experience.
Competitor analysis was undertaken to understand the current practises and how other companies tackle certain user flows and showcase content. Combined with analysis on the current iteration of the Betting Resources, the team shared their findings and proposed appropriate user testing scenarios. I was able to feedback, ask questions and suggest alternative methods. Working closely with the UX Team meant we could collaborate regularly to determine the most user-centric approaches to take regarding the various aspects of the repository. Further examining the qualitative and quantitive data gave the team insight as to what satisfies users and where the pain points were in the current design. To help us understand what the key stakeholders wanted out of the redesign, a word map was created to ascertain the theme of the redesign. 'Dynamic', 'modern', 'clean' and 'light' were the chosen words that kept reoccurring amongst stakeholders.
Wireframes were created in accordance with the data gathered. Betting Resources was to be responsive, opting for a mobile-first approach meant that the scaling up of various elements to desktop, could be done with ease without sacrificing structure or aesthetic. The UX Team had provided annotations to support the idea of certain functionality and behaviour, which I would replicate in the UI by designing the functionality journey or by providing a prototype. Upon completion of the wireframe designs a review process took place in the form of a presentation. We were walked through various structures, functionalities and user flows of each section that makes up Betting Resources. This was followed by a Q&A session in which I was able to collaborate with the UX Team and discuss in more detail regarding specific areas of the repository and the hierarchy of information. Alternative ideas and approaches were suggested to both the flows and the positioning of certain elements, leading to revisions being made in some cases to improve the user experience and further a user-centric design.
In an ideal world usability testing amongst Pinnacle and non-Pinnacle users would occur to determine whether the proposed wireframes, prototypes and flows met the needs of the user and the requirements outlined in the brief. More user data could have been collected and analysed to see what was liked about the proposed designs, what was disliked, where improvements could have been made and whether the flows made sense to the benefit of the user. This iterative design process would ensure the refinement of the designs through evaluation and incorporate feedback until a high level of usability has been achieved.
UI Conceptualisation.
To form the thought processes surrounding a redesign of this magnitude, a mood board was created in order to collect different creative information and define a coherent design concept without risk of losing sight of the bigger picture. After reverting back to the project requirements and cross referencing them with the wireframes, I started to think of ways in which I could implement a design system. Due to the dynamic nature of the content (written by the Content Team), the UI had to be designed in such a way that it could display varying different types of information and media. I started to consider how to future proof the design along with how to accommodate the different languages the content would be written in. Through experimenting with a range of concepts from on-brand and safe, to experimental and brand-expanding, I started to uncover different ways of presenting content and media that would meet the specifications reflected in the word map.
Adopting the mobile-first approach produced a range of different design elements that could be applied to the page. I started to investigate how the UI would look when gradients were applied, changing the orientation between image and content, testing different shapes for highlighting information, introducing Pinnacle's dark mode colour scheme to certain areas, testing how a container card approach would work, determining the placement of icons and how the small details of each concept would look like when extended to a full page design.
To gain an idea of what form the Betting Resources should take, I condensed these ideas into four themes in both mobile and desktop resolutions. Each theme brought something a little different to the table albeit wireframe-specific, image-based, neumorphic and an open theme with minimal containers. To whittle down the options into a more refined concept that would set the precedent for the other sections in the repository, I presented these themes to the teams and key stakeholders. Gathering feedback on both content structure and more granular details allowed me to discover what elements were deemed favourable and what could be discarded. It turned out that, in order to meet the project criteria, a 'Frankenstein' version was to be designed. This would amalgamate the favoured design elements of each theme and condense them into one concept. With communication being paramount in any project, another presentation was conducted that outlined the 'Frankenstein' concept in both desktop and mobile resolutions. The outcome of the presentation was an unanimous decision of approval and this concept would be the foundation upon all other sections of Betting Resources would be based on.
Now that a precedent was set, it was to be applied to the rest of the repository. The design system I created revolved around an atomic approach, whereby singular design elements would act as the 'atoms', the atoms would be pieced together to form the 'molecules' (i.e. container cards), the 'molecules' would amalgamate to form the 'organisms' (page sections), which would then bind together to form the overall design of the page. This method allowed for a modular approach to be taken ensuring design consistency, reusability of the code, reduced development time and design flexibility. Each of the page sections were equipped with container cards with varying orientations to create a more engaging and usable product, whilst avoiding a repetitive layout. The container cards were designed to look aesthetically pleasing no matter how much content would be used to populate them. As this content would also appear in other languages, there had to be enough space for the localised content for languages which are naturally longer in length. Other container cards like 'Predictions' held unique content to promote odds across different sports and would be present throughout various sections of the repository so the user has the opportunity to place a bet whenever they want to. To meet the personalisation requirement 'Spotlight' was introduced. Here a member-user can select from a number of categories of content they have interest in. When the Spotlight sub-nav is clicked, they’re shown relevant articles and media. Throughout the design of the Betting Resources interface, accessibility factors were taken into consideration. These related to the colours used across the site and whether they met web standards and the legibility of font sizes across desktop and mobile resolutions. Other considerations were given to the visual and information hierarchy of each page within the repository to convey how we wanted the users to perceive and use the interface.
To manage my side of the project, communication and time management were of the upmost importance. I would therefore break the project down into sprints (relating to the different areas of Betting Resources) and once a sprint was completed, the designs were presented to the internal design teams. This gave ample opportunity to collaborate and feedback on the designs, implementing any necessary changes before presenting to the wider stakeholder audience. Once the designs in the sprint were approved, the UI was uploaded to Invision so that they can be viewed at their leisure and discuss any potential further changes. This process was repeated for each sprint until all the UI had been designed and approved. Moreover when the project incurred any delays, I would make management and/or stakeholders aware. Revised deadlines and any appropriate plans of action from my side were given to manage their expectations. The project experienced a major changeover in staff during its lifespan and as a result, the responsibility of onboarding new staff and stakeholders as well as helping to lead the project to fruition fell to me. Explanations and insights into how the intended functionalities and behaviours worked across Betting Resources were given. It felt appropriate to breakdown the Betting Resources into digestible sections as there were over 200 designs that made up the project and in turn questions were answered and as much information was provided at both high and granular levels.
Development.
The UI has recently been approved and signed off by management and the key stakeholders. It has moved into the development phase and to aid the Development Team, I prepared an high level overview of the modular approach that was taken. This was a great opportunity to start discussing the process of building the designs into a framework. The 'atomic' key design elements and the 'molecule' container cards were elucidated to the developers as a starting point for their work. Moreover user interaction designs such as hover states, dropdown menus, content filters, mobile gestures, notifications and predictive search were all included in the handover to communicate to the Dev Team how I intended certain features and functionalities to behave. This also extended to prototyping micro-animations for key features such as carousels, data charts in the 'Predictions' section and article interactions. Additionally icons and other assets have prepared and handed over for implementation.
As the development progresses, I will continue to aid the Dev Team when needed to answer questions, provide further details on the behaviour of functionalities and to provide them with any additional assets they may need. Furthermore I will be liaising with the Content Team to discuss their localisation plan and the opportunities (and constraints) when the other languages are applied. Due to the modular approach that's been taken, the same dimensions for imagery can be applied to different types of container cards, reducing the Graphic Design Team's workload. These dimensions have been outlined and communicated to the team as part of the handover, which will take effect once Betting Resources is up and running. Betting Resources will utilise a CMS and though there may be constraints in using the chosen platform, flexibility will be required should certain features and functionalities be limited. Weekly meetings will be held to discuss the progression of the build and will provide a platform for questions to be asked, the findings of bugs within the system and development tasks to be prioritised.
Post Production.
After the development phase of the project, a testing environment will be set up for all teams involved to interact with the newly created repository. This will provide the opportunity to review the front end, the functionality and give feedback where necessary. Flexibility will once again be required at this stage should we feel that amendments to either the UX or the UI are needed once we're able to gain a real-world idea of how Betting Resources works. Testing at this stage is limited to the teams and stakeholders involved however once the product is live, user data and feedback will be collected and analysed via means of various usability testing. This will help us establish what users like/dislike about the repository, where pain points may be located, where user flows could be improved, how easily the user can accomplish their goals and whether the overall design meets their needs. A/B tests would be carried out whenever a revision in the design or user experience was to be made. Reviewing the results would help us establish whether these revisions had the desired outcome and would provide insight into how to act accordingly.
As part of a continual improvement process, future amendments may have to be carried out. For these changes to be effective, it must stem from the understanding of what does and what doesn’t work and how user needs have changed since the last iteration. Working closely with the Analytics Team will help to shed light on these understandings in the hope to continually improve a product that is both useful and usable to Pinnacle's users.