.png)
.png)
Matchhaus
Team captains: manage your team on and off the field.
I was brought on board as a UX/UI designer for Matchhaus, a web-based service designed to help sports teams schedule matches, connect with teammates, access live squad leaderboards, personal statistics, and carry out team voting. Although the site had already been launched, I was asked to join the team to help improve the onboarding process and the overall user experience.
_edited.png)
.png)
What are the highlights?
After conducting an extensive analysis of the site, I presented my findings, which led to an invitation to redesign the site when it is moved from its current JavaScript framework, Phoenix, to Next.Js. My goal was to create a seamless and intuitive experience for users, ensuring they can easily access the features and functionality they need to stay connected and engaged with their teams.
What was my brief?
Upon joining the Matchhaus team, my first action was to familiarise myself with the website, map its layout, and carry out continuity checks on the user journey. Working closely with the CEO, Ollie Randall, we analysed the live data to identify pain points and prioritise the areas that required immediate attention based on budget, time, and problem size.
I then embarked on a design journey that involved mapping out the issues I discovered, proposing solutions, and outlining the benefits of implementing those solutions. The Matchhaus website can be accessed at https://matchhaus.io/.
The design journey I embarked on is outlined below.
Problem statement
How can we make the onboarding process smoother and increase onboarding rates?
Research Summary
What UX problems were there?
The Matchhaus website had undergone several iterations before I joined the team, resulting in inconsistencies with the navigation that had gone unnoticed.
During my analysis, I identified an issue with the onboarding process. When users moved from the CREATE MATCH page to the PICK SQUAD page and confirmed their squad selection, they were redirected back to the home page instead of the CREATE MATCH page where there were other tasks to complete. This inconsistency could cause confusion and frustration for users.
To solve this issue, I proposed using the “Confirm Squad” button to take users back to the CREATE MATCH page. Following Jakob's Law, I created a natural cascade back up the flow to the CREATE MATCH page, where users could complete the remaining steps on that page.
A diagram showing the current user flow through the site and my proposed solution.
Summary
What are the takeaways & what's next the step?
In summary, the Matchhaus project focused on improving the UX/UI of a web-based service for sports teams. Prioritising UX/UI improvements based on user pain points and available resources, the project proposed solutions to problems such as inconsistent navigation and poor spacing hierarchy. Consistent branding, spacing, and contrast were identified as key factors in improving user experience and increasing conversions. The next step is to redesign the site using insights gained from user testing and interviews. The current site will not receive further changes as it is being moved to Next.Js. Ollie Randall, CEO of Matchhaus, is available to provide further information or references upon request.
What UI problems were found?
What do the UI fixes look like?
My Role: UX Researcher - UX Designer - UI Designer
Tools Used: Pen & Paper - Figma
Time On Project: 4 weeks
.png)
1
Lack of a company logo: The absence of a company logo on the website reduced company branding and went against Jakob's Law, which suggests users expect to see a company logo.
2
Inconsistent spacing hierarchy: The inconsistent spacing on the website caused longer processing times, which could result in users dropping off. (Hover over the image to see the spacing.)
3
Poor visual hierarchy: The primary call-to-action (CTA) on the website did not stand out against the other uses of purple, which reduced the conversion rate.
4
Low contrast: The website had low contrast, which reduced accessibility and resulted in fewer potential users and reduced onboarding.
5
The presence of a single primary call to action button placed below the fold increases the risk of player distraction and delays their ability to locate and click the button.
.png)
1
Adding a clear company logo: This would create a stronger brand identity, follow Jakob's Law, and create a more familiar page for users. By reducing cognitive load, users could complete tasks more easily, such as finding availability for matches, onboarding, and selecting a team.
2
Standardising the spacing hierarchy: This would allow for clear grouping, speeding up decision-making for users, and making it easier for users to understand and navigate the website.
3
Optimizing the primary call-to-action (CTA) button: I recommended making the CTA button yellow, the only other place that yellow was used is the company logo. This creates a better color balance and most importantly, increases the possibility of conversion. By making the button stand out more, users can more easily identify and click on it to complete the desired action.
4
Improving contrast: This would make the site more accessible, increasing the potential number of users and helping to comply with accessibility laws. By enhancing contrast, users with visual impairments or those viewing the website on lower-quality screens could better navigate and interact with the site.
5
By strategically relocating the primary call to action (CTA) above the fold and maintaining a duplicate CTA at the bottom of the essential game information, the likelihood of player distraction before completing the desired action is reduced, resulting in increased completion rates.