Social Trade is a company seeking to bring market knowledge to everyday investors. As a product design intern, I helped research, design, and prototype a new feature.
My role:
- User Interface Intern
- User research, UI prototyping, User flow
Results:
- Prototype for new feature
- Increased Social Trade customer base
Social Trade is a social platform for market information: think Twitter but for stocks. This summer, they have initiated an effort to further engage its target demographic: college students.
Below is an excerpt from Social Trade's website, introducing how the investment compeititon works.
The Social Trade management team believed that hosting a college investing challenge would draw new customers to their application while serving as a great way to connect different young individuals interested in investing and trading.
As a part of this initiative, they hired a team of summer interns, myself included, to carry out this project, while also teaching us about what working for the company entailed. My specific role was Product Design intern, which solely entailed the design and prototyping aspect of the project. We were given user research, including what was to expected of the final prototype, along with customer wants and needs tht were collected prior in the user research (UX) phase.
The project began towards the end of May, and the feature was set to launch in November. That gave the team and I approximately 3 months to conceptualize, research, design, and prepare to launch the feature onto their IOS app.
To conduct research, we wanted to figure out what components an investment challenge needed.
After studying different investment competitions, including past competitions hosted by Investopedia, Stock Simulator, and MarketWatch, our research phase concluded with a the fact that we needed to design four main screens:
1. A trading page for buying/selling
2. A competition leaderboard page
3. A team progress page
4. Personal profile page
After studying different investment competitions, including past competitions hosted by Investopedia, Stock Simulator, and MarketWatch, our research phase concluded with a the fact that we needed to design four main screens:
Trading page
This prototype screen is the trading interface of the University Trading Competition app, where users can engage with real-time market data and execute trades. Given that the Social Trade management team assumed the investors partaking in the competition would likely have previous experience, we wanted to give them a trading page that looked similar to applications they may have used in the past, such as Robinhood and WeBull. The interface is designed to simulate an authentic trading experience for university students learning about financial markets.
Real-Time Data Visualization
The centerpiece of this interface is the real-time market data visualization, providing users with immediate visual feedback on market trends. This feature includes an interactive graph that displays the NASDAQ Composite's historical performance, which is essential for making informed trading decisions. The graph offers multiple time frames — 1D, 5D, 1M, 6M, 1Y — allowing users to analyze short-term and long-term trends.
Market Data Accessibility
Presenting the NASDAQ Composite's key statistics — including current price, high, low, and previous close — at the top of the interface ensures that users have easy access to crucial information. The inclusion of 'ASK' and 'BID' data provides a professional-level detail, reflecting the depth of market information that can influence trading strategies.
Actionable Elements
The 'SHORT' and 'LONG' buttons are boldly colored and positioned prominently, inviting users to take immediate action based on their market analysis. The color choice here — red for short, green for long — follows the conventional color coding in trading, where red indicates a potential downturn and green an uptick.
Navigation Consistency
A consistent navigation bar is maintained at the bottom of the screen, echoing the design language established in the leaderboard screen, thus providing a cohesive user experience across the app. The highlighted 'Trade' icon indicates the currently active section, aiding user orientation within the app.
Open Positions Overview
Below the trading actions, there's a section dedicated to 'Open Positions,' designed to give users a quick summary of their active trades. This allows for easy monitoring and potential re-evaluation of their trading strategies.
Accessibility and Engagement
The 'View stock' link suggests additional information is available, providing an avenue for users to dive deeper into specific stocks, enhancing the educational value and engagement level of the app.
Open Positions Management
The 'Open Positions' section gives users an at-a-glance overview of their current holdings, with essential details like position type (Long/Short), quantity, and current value, along with performance indicators (e.g., "+$114"). This immediate summary allows users to quickly assess their portfolio's performance without navigating away from the main trading screen.
Market News Integration
Below the 'Open Positions,' there's a 'Related News' section providing users with current financial news, essential for making informed trading decisions. This feature acknowledges the importance of staying informed on market conditions and news events that can affect asset prices. The news items include timestamps, giving users insight into the recency and potential relevance of the news.
Multimedia News Content
The inclusion of thumbnails and video content lengths indicates multimedia news stories, catering to different user preferences for content consumption. This approach helps engage users who prefer visual or auditory learning over traditional text-based content.
The Trading Interface Screen is meticulously designed to provide a user-friendly yet comprehensive trading experience for students. It balances the need for detailed market data with a clean UI that facilitates quick user actions. The design choices, from the color-coded actionable elements to the organized presentation of market data, work cohesively to educate and engage users in the simulated trading environment.
Finished Trading Page
Team Leaderboard
This prototype screen presents the 'Leaderboard' feature of a University Trading Competition application. It is designed to offer users a competitive and engaging platform to track their performance against their peers in a simulated trading environment.
Color Coding and Ranking Visualisation
The use of distinct colors for the top three positions on the leaderboard (gold for first, silver for second, and bronze for third) draws from traditional award color schemes, making it instantly recognizable which positions are leading. The color-coding also serves as a visual motivator for users to strive for the top positions.
Portfolio Values and Returns
Displaying both portfolio values and percentage returns provides a comprehensive overview of performance, catering to users who might prioritize absolute numbers or relative growth.
Information Hierarchy
The bold and larger font for the college names and portfolio values emphasizes the importance of these elements, ensuring they are the focal point at first glance. Secondary information, such as the percentage return, is presented in a smaller font, maintaining a clean and hierarchical structure to the information displayed.
Top Traders Spotlight
A separate section dedicated to 'Top Traders' highlights individual achievements, encouraging personal recognition alongside the collective performance of their respective colleges. The inclusion of profile pictures adds a personal touch and fosters a community feel among the participants.
Navigation and Accessibility
A clear and accessible navigation bar at the bottom allows users to easily switch between different features of the app, such as trading, team management, and profile settings. The active tab is highlighted, providing users with a clear indication of their current view.
User Engagement
The 'View All' option under 'Top Traders' invites deeper user engagement, allowing users to explore and analyze the performance of other participants in detail. The design promotes repeated engagement by making the leaderboard a central and dynamic feature that users are encouraged to check regularly.
Consistency in Design
The design elements are consistent with modern mobile UI trends, using flat design, minimalistic icons, and a clear, readable font. This consistency extends to the overall application, creating a cohesive user experience.
The Leaderboard screen of the University Trading Competition app combines visual appeal with functionality. It is carefully crafted to enhance user motivation, provide clear information, and foster a competitive yet communal environment among users. The design decisions—from color coding to information architecture—are rooted in creating an intuitive and engaging user experience that keeps participants informed and invested in their progress.
Finished Leaderboard Page
Team Leaderboard Screen
The 'My Team' dashboard screen is a crucial component of the University Trading Competition app, designed to provide users with a comprehensive overview of their team's performance and assets. As a professional UI/UX designer, I have crafted this screen to serve not just as an information panel but also as a strategic tool that enhances the user's decision-making process in the competition.
Team Identity and Performance Snapshot
The introduction of the team's logo and name at the top of the screen fosters a sense of identity and belonging. This is paired with a summary of the team's total assets, offering an immediate snapshot of financial performance. The portfolio analysis chart below offers a visual representation of the team's asset growth over time, which is critical for users to gauge the effectiveness of their investment strategies at a glance.
Detailed Financial Metrics
Key financial metrics such as total returns, today's returns, and total drawdown are prominently displayed. These figures provide users with a deeper understanding of their team's financial health and the volatility of their investment choices.
Top Traders Ranking
A leaderboard for 'Top Traders' within the team incentivizes competition and performance. It displays the number of trades, returns, and the academic standing of each trader, balancing quantitative performance data with qualitative information.
Asset Management Tools
The 'Top Assets' section offers a quick reference to the team's highest-value investments, along with color-coded performance indicators. This not only adds a visual appeal but also serves as a quick heuristic for the team's investment spread and individual asset performance.
Sector Allocation Visualization
The 'Top Sectors' pie chart provides a strategic view of the team's asset diversification. This visual tool helps users to quickly comprehend the spread of their investments across different sectors and to make informed decisions about rebalancing their portfolio if necessary.
UI Consistency and Navigation
The UI maintains a clean and consistent look with the rest of the app, using similar tab layouts and a navigation bar, ensuring that users have a seamless experience as they navigate between different sections.
Interactive Elements
The 'See more' links under 'Top Traders', 'Top Assets', and 'Top Sectors' encourage further interaction, allowing users to dive into detailed data and analytics — crucial for users who wish to analyze their team's performance on a deeper level.
The 'My Team' dashboard is meticulously designed to empower users with critical information and analysis tools. It balances aesthetic appeal with functionality, offering a user experience that is both engaging and practical. Each design element serves a specific purpose, catering to the needs of competitive teams in a simulated trading environment, and promoting an educational yet competitive atmosphere.