PROLINE+ (OLG)
How-to-Play Redesign
ROLE
Product Designer
DURATION
2 Weeks
TOOL
Figma
TEAM
Sports Acquisition & Retention Lab
How-to-Play
CONCEPT OVERVIEW
Proline+ wants to decrease the user interaction costs by providing OLG customers a detailed and efficient 'How to Play' page for the sports betting user journey. With the goal of focusing on communication and transparency for all documentation, providing a better opportunity for user decision making and instilling a sense of trust and control for OLG customers.
Design Process
UX EVALUATION
To begin this project, I conducted a heuristic evaluation of the Proline+ how-to-play page to identify usability issues and inform future design enhancements.
UX EVALUATION
HYPOTHESIS
As a user I want to be able to easily find and understand information related to 'How To Play.' This can be accomplished with the ability to efficiently navigate through the related information and have a clear visual breakdown of the content, with the information presented in a logical manor.
VISIBILITY & USABILITY
The primary issue I aimed to address was the navigation of the how-to-play steps. Guided by the heuristic evaluation, I focused on ensuring that all relevant and necessary information was clearly presented and easy to navigate.
I aimed to design intuitive navigation paths that aligned with the content hierarchy, using familiar labels and terminology to ensure users could easily find and navigate to the information they need. By adding chevrons to the page, users can now quickly scan all available resources, engaging with content relevant to their goals. The chevrons also help keep the page length manageable, reducing the need for excessive scrolling between sections.
READABILITY
The second consideration I focused on was improving the readability of the page's content. I used design elements like headings, font sizes, colours, and spacing to create a visual hierarchy, guiding the user's eye through the content in a logical and digestible way to improve readability.
Additionally, I broke down large blocks of text into smaller, manageable sections, using headings, bullet points, and short paragraphs to make the content easier to scan and read.
REDUCING NOISE
The next major consideration was reducing the excess noise on the page. I aimed to clean up the initial visual impression to prevent overwhelming users with unnecessary information.
I started by taking a complete inventory of all existing content. Assess each piece for relevance, accuracy, and alignment with user needs and business goals. This audit helped to identify any redundant, outdated, or missing content.
WHAT I LEARNED
User-Centric Design: Designing with the user in mind was paramount. By aligning the content hierarchy with user needs, I was able to deliver a resource that is not only functional but also meets the expectations of OLG customers.
UX Evaluation: I gained valuable experience in conducting heuristic evaluations of site pages, identifying usability issues, and using those insights to inform design improvements.
Information Architecture: I deepened my understanding of how to effectively utilize information architecture to organize content, optimize readability, and enhance user navigation.
Feedback and Presentation Skills: I honed my ability to present design concepts clearly and effectively, incorporating feedback to refine and improve my work.
Figma Skills: I advanced my proficiency in Figma, particularly in wireframing and prototyping, which allowed me to create and iterate on designs more efficiently.
Design Systems: I learned to work effectively within a design system, ensuring consistency and scalability across projects while maintaining design integrity.
Design Empathy: I strengthened my ability to empathize with users, recognizing the importance of usability in creating designs that truly meet their needs.
Mobile
TRANSLATING TO MOBILE
This concept can be converted seamlessly for an easy transition between web and mobile use. All the same elements and formatting remains the same on all devices.
To better align the page with the OLG brand, I added a hero section, followed by a prominently placed tutorial video that had previously been hidden within a tab. This change gives users the freedom to choose how they consume the content.
What's New
Final Design
The final design integrates insights from the heuristic evaluation along with additional design changes. After the full mockup was completed, I made a few tweaks to further optimize the content flow of the page.
This redesign now maintains consistency in layout, design, and structure across the site, reducing cognitive load and helping users find specific information more easily. A clear hierarchy was established by organizing content into categories and subcategories, prioritizing the most important information to ensure it’s easily accessible. This hierarchy was thoughtfully designed to align with user needs, ensuring that OLG customers have access to an intuitive and user-friendly resource.
Problem
THE CHALLENGE
How to leverage information architecture to restructure content and optimize readability and usability?
CURRENT HOW TO PLAY PAGE
PROLINE+ (OLG)
How-to Play Redesign
ROLE
Product Designer
DURATION
2 Weeks
TOOLS
Figma
TEAM
Sports Acquisition & Retention Lab