Redesigning a trading community website for better engagement
TraderX.com was designed as a community hub for traders to connect, elevate, and showcase their trading knowledge.
The business goal of the website was to indirectly promote Pepperstone's products and services to potential clients in regions where traditional marketing of CFDs was not permitted.
This strategy was to be achieved by offering expert analysis and trading-focused video content with the primary driver of engagement being a gamified 'market prediction' feature that allowed users to earn a point-based reputation ranking based on their market knowledge.
Client
Pepperstone
DELIVERABLES
ux/ui Design
Branding
timeline
Dec 2023 - May 2024
Role
UX/UI designer + Collaborating with Kune Consulting (Now Atomise)
The challenge
High friction predictions, poor content discoverability and clunky UI
Through engagement with stakeholders and qualitative feedback from users, I identified three key areas that could be iterated upon as a starting point to uplift user engagement.
'Users were failing to engage with the market predictions due to friction and a lack of availability on the site.'
Prediction Friction
Users found it difficult to make a prediction, there were too many steps and a prediction could only be made from limited pages on the website (home page, markets page and instrument pages).
poor discoverability
A lack of discoverability and recommended related content meant a lost opportunity for users to engage further with the website or make predictions.
clunky UI
A clunky responsive UI offered a less than ideal experience on both desktop and mobile devices, resulting in user frustration.
The Solution
A design overhaul with a focus on key user pain points
In order to address the problems, I undertook a complete redesign of the website with a focus placed on delivering improvements to the three key problem areas identified.
Smoother Predictions
Address user pain points in the prediction flow and improve the overall experience of making a prediction.
Encourage further prediction opportunities and website exploration by implementing cross-content discoverability, making every content piece a potential springboard for further prediction engagement.
Better responsiveness & UI Uplift
Improve UI and responsive design of the website so that user experience was smooth and intuitive across all devices, not just desktop.
🔮 Smoother predictions, anywhere, anytime
To encourage higher engagement and reduce friction, the prediction flow was redesigned and simplified, with additional features introduced to help make the experience a quicker and more intuitive interaction for users.
site-wide availability
The mechanic for making a prediction was freed from being an embedded form and made accessible via a universal prediction symbol anchored in the navigation. This enabled users to immediately act on prediction opportunities anywhere on the site.
Contextual recommendations
A tagging system was introduced to make recommended instruments available for a user based on page context.
Direct Selection
Prediction buttons embedded within components allowed users to make a direct instrument selection, speeding up the flow.
instrument Search
Instrument selection was further improved by adding a simple search with filtering options that followed familiar UX search patterns.
👀 Driving discoverability
I introduced related and trending content components, encouraging users to dive deeper and engage further with the website. This opened up the opportunity for every piece of video content, news or market analysis to act as another point from which a user could continue their journey on the website and make further predictions.
Related Content components
Components were designed to showcase related video content, news and market analysis throughout all pages on the website and drive further engagement.
Tokenised Design System
Within Figma I created a tokenised design system. This ensured visual consistency and also built a robust foundation in which the design could scale seamlessly with future iteration and development.
Prediction Card Refinement
To reduce cognitive load, users' prediction cards were simplified with a clearer visual hierarchy and semantic colours to show the outcome state more clearly. Optional comments were also added, allowing users to provide further context to their predictions.
⏸️ Outcome & Reflections
Due to a strategic change in business priorities, the TraderX website was retired just weeks before any updates I worked on could be shipped.
Whilst this outcome was disappointing, I enjoyed the collaboration with stakeholders and engaging with users to understand their pain points and create solutions that would improve their overall experience with the website.
Had I had the opportunity to continue with this project I would have loved to focus further on the following areas:
further Testing and iteration
I would have liked to have had more time to engage with users further on the updates made to the predictions feature to further iterate and improve upon the feature.
Understanding the impact of gamification on predictions
This gamification aspect to predictions really intrigued me. I would have liked to have dived deeper into the impacts this has on user behaviour to understand if user rivalry, challenges and rewards could of increase engagement further.
Social community development
As trading is often a lonely and solo affair, I would have liked to look into ways in which the trading community aspect could have been further developed to encourage user to user interaction and in turn further drive engagement on the site.
Explore microinteractions
To further elevate the user experience, I would have liked to explore the use of subtle micro interactions to make prediction actions more memorable and add more personality to the website experience.