OVERVIEW
In this volunteer project, I was tasked with redesigning the homepage above the fold of Cassino Online Brasileiro, a popular online casino review site. The primary goals were to improve the user experience and increase the site conversion rate. Through a comprehensive design process, I implemented a series of changes aimed at creating a more intuitive, engaging, and trustworthy homepage. This case study details the steps taken to achieve these objectives and the rationale behind each design decision.
PROBLEM
The homepage of Cassino Online Brasileiro faces significant challenges in providing an optimal user experience and driving conversion rates. The website's current design appears outdated, which could further impact user engagement and perception. The users might experience difficulties navigating the site, the overwhelming brightness of CTA buttons, and a lack of clear trust signals. These issues could result in user frustration and decreased engagement, ultimately affecting the site's ability to convert visitors into customers.
​
The primary objectives were to:​
-
Modernise the look of the website to improve user perception.
-
Simplify and enhance the navigation for easier user access to key sections.
-
Adjust the CTA buttons to be more visually appealing and less irritating to the eye.
-
Improve the hero section to capture user attention and effectively communicate the site's value proposition.
-
Add trust signals to build credibility and trust with users.
-
Optimise the content layout to make it more engaging and easier to digest.
SOLUTION
-
Modernised Look
Issue: The website’s design looks outdated, affecting user perception and engagement. Action Taken: I employed a modern design aesthetic with updated typography, colours, and visual elements to make the site look contemporary and appealing.
​
-
Simplified Navigation
Issue: The navigation bar might overwhelm users with multiple dropdown options. Action Taken: I grouped related items under broader categories and ensured that the most important links, such as "Best Casinos" and "Exclusive Bonuses," were easily accessible. This was aimed at helping users find what they were looking for more quickly and reducing potential frustration.
​
-
Enhanced CTA Buttons
Issue: The CTA buttons could be too bright, irritating the eye. Action Taken: I adjusted the CTA buttons to be more visually appealing by using contrasting but less saturated colours that stood out against the background. I ensured the text on the buttons was action-oriented and compelling, such as "Play Now." This was intended to make the buttons more attractive and encourage user interaction.
​
-
Improved Hero Section
Issue: The hero section might be plain with just text and buttons. Action Taken: I used a high-quality, relevant hero image that captured attention. I included a clear and concise value proposition that highlighted what makes the site the best choice for users, such as “Discover the Best Online Casinos in Brazil with Exclusive Bonuses.” This was designed to immediately communicate the site's value and engage users from the moment they arrived.
​
-
Added Trust Signals
Issue: There might be no visible trust signals above the fold. Action Taken: I added trust signals such as ratings to build credibility. This was aimed at building user trust and confidence in the site.
​
-
Optimised Content Layout
Issue: The content above the fold could be text-heavy and fail to capture immediate attention. Action Taken: I used more engaging visuals such as icons, images, and infographics to break up the text and make the content more digestible. I highlighted key information with bolder text or icons. This was designed to make the content more visually appealing and easier for users to scan.
In my final proposal for the Lodging carousel, I streamlined the process of saving a listing by implementing a concise 3-step method. This replaced the cumbersome 4-step process previously in place, significantly reducing user effort and time required for saving listings directly from the carousel.
Before & After redesign
APPROACH
-
Identify Need: Conducted thorough analysis of current state to identify pain points and opportunities for enhancement within the trip overview carousels.
-
Collaborative Effort: Collaborated closely with the Attach and Core Recommendations teams members to take ownership of the project's delivery, given the incomplete state of the Native version of the Shared UI component.
-
Scope Definition: Initially focused efforts on optimising the Lodging carousel within the native app, with plans for subsequent integration of cars and activities carousels later in 2024 for US point of sale.
DESIGN PROCESS
At Expedia Group, teams operate within an Agile framework, adhering to the principles of flexibility, collaboration, and iterative development. The work is organised in three-week sprints, during which team members apply the double diamond design process to guide their efforts. This approach allows them to effectively manage projects, adapt to changing requirements, and deliver impactful solutions within short timeframes.
Discover - Define - Develop - Deliver
In the Discovery phase, I dedicated my efforts to familiarising myself with the available data from the UX researchers at Expedia Group. Additionally, I consulted closely with the Core Recommendations Team, which had previously been working on the Shared UI designs. This collaborative effort enabled me to gain valuable insights and align my design approach with the existing initiatives within the organisation. During all phases of the process, I was having regular sync meetings with the Product Manager, Design leads, Content Designers and the Development team to discuss what would be feasible.
During the Define and Develop phases, I maintained regular sync meetings with key stakeholders, including the Product Manager, Design leads, Content Designers, and the Development team, to get their feedback on my design iterations. These sessions were crucial in evaluating feasibility and fostering a cohesive understanding of project objectives across multidisciplinary teams.
In the Delivery phase, I prepared comprehensive design deliverables and documentation to facilitate seamless handoff to the development team. This involved creating detailed design specifications, interactive prototypes, and design assets. I collaborated closely with developers to address any implementation challenges and ensure the fidelity of the final product to the design vision. Additionally, I provided support during the implementation phase, conducting design reviews and offering guidance to ensure the successful execution of the design solution.
COMPETITIVE ANALYSISE
-
Identify Need: Conducted thorough analysis of current state to identify pain points and opportunities for enhancement within the trip overview carousels.
-
Collaborative Effort: Collaborated closely with the Attach and Core Recommendations teams members to take ownership of the project's delivery, given the incomplete state of the Native version of the Shared UI component.
-
Scope Definition: Initially focused efforts on optimising the Lodging carousel within the native app, with plans for subsequent integration of cars and activities carousels later in 2024 for US point of sale.
Carousels for native app live at the start of the project
Lodging carousel carousel
Activities carousel
Car rentals carousel
My final proposal for carousels for native app
Lodging carousel carousel
As the carousels for Activities and Car rentals were scheduled for release later in 2024, I am not able to disclose the final designs I have handed off to the Development team.
OUTCOME
By migrating trip overview carousels to a shared UI component, the project yielded several notable outcomes:
-
Significantly improved functionality and user experience within the native app environment. User testing results were not out yet during my time at the company.
-
Streamlined development processes, resulting in reduced duplication of efforts across recommendation carousels.
-
Establishment of a robust foundation for future optimisations and maintenance, ensuring sustained improvements in user experience and development efficiency.
TAKEAWAYS
Leading this project marked a significant milestone in my journey at the company, providing me with invaluable hands-on experience as a UX Designer. I encountered various challenges and opportunities for growth.
​
One of the most notable takeaways from this experience was learning to collaborate with diverse stakeholders across different departments. Collaborating closely with project managers, design leads, content designers, and developers, I learned to leverage the expertise and insights of each team member, harnessing our collective strengths to overcome challenges and achieve our shared objectives.
​
Overall, this project served as a springboard for my professional development, equipping me with the skills and confidence to lead future initiatives successfully. The lessons learned from this experience will undoubtedly shape my approach to future projects, guiding me towards continued growth and success in my role as a UX Designer.