Symbolik Social: The only social platform for financial analysts
Symbolik is an institutional-grade financial analytics tool and knowledge platform that ventured into an uncharted territory of social networks. The following is a tale of courage, perseverance, and unmatched trust.
How it started
Symbolik is a financial analytics tool created by the team lead by Tom DeMark, a legendary creator of the DeMark Indicators widely used by traders and investors across the world for over 30 years. Symbolik is a sole proprietor of DeMark indicators along with multiple scientific professional analysis tools and instruments. As an autonomous charting platform, Symbolik has a dedicated following among money managers, traders, and investors. Symbolik Social was designed to cater all of them and provide a safe network to exchange knowledge, ideas, and experiences.
Mission
Our mission was to build a social platform that wouldn’t waste any space. A platform where users are heard and their needs respected. We studied the way people interact with the tool and each other. We are standing on the shoulders of giants before us but we are also not afraid to bring new ideas into life. Courtesy of the Symbolik team, we have a chance to see how our ideas affect the industry and how much value they bring to people.
Design team goals
- Create a standalone product while keeping consistent with the brand.
- Refine social platform functionality to specifically be of use to the target audience.
- Distribute value across several core features: post creation & text formatting, groups, social interaction mechanisms, and so on.
- Embed scalability for further platform enhancements like multimedia integration.
- Promote the Symbolik brand to the target audience and convert them into evangelists.
Technologies
We leveraged a modern and scalable tech stack to ensure high performance, security, and flexibility. The frontend was developed using Next.js, React, and TypeScript, with Tailwind CSS and Radix UI providing a responsive and accessible design system. On the backend, we utilized C# and ASP.NET Core 6 to build a robust API architecture, leveraging Entity Framework Core with MySQL for efficient data storage and retrieval.
To enable real-time interactions, we integrated WebSockets and RabbitMQ for instant updates across discussions, watchlists, and financial analytics. Security was reinforced using Auth0 (IdentityServer) for authentication, while logging and monitoring were managed with Serilog and Grafana Loki. Background tasks were handled using Hangfire, and AWS S3 was implemented for secure storage. For testing, we adopted xUnit with AutoFixture, using an InMemory database to validate queries efficiently. This cohesive technology stack allowed us to create a seamless, high-performance platform optimized for financial professionals.
The process
The team at Symbolik has done a great job mapping out the main features and presenting the overall potential of the platform. Our goal at the start was to break it down, restructure information architecture, and design the UX afresh.
Branding
The Symbolik brand represents the company’s evolution from a digital tool that is catching up with the industry to a modern cutting-edge brand capable of maintaining a whole suite of products.
Symbolik Chart
A key feature of Symbolik Social is its robust charting system. We designed an intuitive and dynamic interface that allows users to:
- Customize charts with various indicators
- Compare multiple assets in real time
- Collaborate and share insights with other users directly from the charts
Prior to the redesign
As an established brand, Symbolik took a lot of its initial inspiration for Social from the existing company tools, however, the client quickly realized they were dealing with a different type of website that involved multiple intertwined user-to-user mechanics with the brand mediating the whole thing. Once of prior works, Proko art education platform caught the attention of T.J. DeMark and he was gracious enough to give us a shot at Symbolik Social.
Platform UI/UX design
As a first-time Symbolik user, the first thing that strikes you is the logical structure of its features and fine-tuned information architecture. The solidity of design and meticulous distribution of information is the staple of the industry and Symbolik has mastered it. Our job was to refine the experience, foster the strong sides, reinforce the weak spots.
Information architecture & UX wireframes
The goals of the early UX design were defined as such:
- Design the educational experience
- Design the communities experience
- Design the browsing experience
- Design the creator experience
- Design the wide-reaching future features
The social feed
One of the main traits of the upcoming social feed design was the user’s ability to scan through the posts’ most visible and significant parts, the heading and the image and get a sense of what the post is about. Unlike most social feeds where the posts are using emojis to bait readers, we wanted to level it out and provide “stock” options to choose from.
Symbolik social profile
One of the goals was to level out the playing field for influencers, educators, and enthusiasts. Make so everyone gets a voice whether you are after an advice, have an idea to share, or a product to promote.
Joining & exploring Symbolik Groups
The concept of groups is quite an old one but in case with Symbolik Social, it derives from various closed chats and group messages on other platforms. Sometimes a brand has a chat or a group that it has no real relation to or control over. Claiming a Symbolik Social group is the right thing to do branding-wise but without the third-party mediation that may come from a competing brand with an interest.
Messaging privately within the platform
One of the principles of a social network is the ability of users to interact directly and privately. Even though there are standalone messaging apps, it was decided that Symbolik would offer its own messaging feature just for te sake of user comfort, time-saving, and same fair and logical UX.
Posting & formatting content
User posts is the blood of a social platform. Our idea was to make writing on Symbolik Social a delightful experience full of aha moments without overcomplicating it. One of such features was an interactive text formatting menu that follows you as you are typing a paragraph. Another is the grid layout of the attached images because when telling a story you rely on visual aid need control over its display.
Exploring Symbolik Social
This is a core feature of the platform for a number of reasons. There is no specific content that anchors everything, it’s rather a combination of stock $SYMBOLS, #hashtags, @tags, technical study, and indicator code names. Specifically for this, we designed a visual distinction of those entities in text and within the website content. Then, there are users and groups that need to have distinction. And within the users there are verified users, team members, and potentially users with specific accolades.
Adding items to Watchlist
A Watchlist is a popular mechanic in the world of stock trading analytics. It allows you to focus on specific items and dig into them while keeping an eye out for other important items. The Symbolik Social Watchlist functionality is the tribute to the industry standards and an attempt to give users the handiness of the tools they are used to but at a different angle.
Mobile Layout
The mobile layout brought a set of challenges that derive from the main product – the charting tool. The complexity of it makes it not a mobile-first product by any stretch of the imagination. However, the content is not dictating the way it is consumed, so we put effort into adapting the platform to an app-like experience. For example, we introduced a tab bar that you’d rarely see in a mobile browser.
Brand ecosystem integration
Across multiple products, the Symbolik brand stands out the right way. That cost us and the client many hours since designing and developing two let alone three independent products under the same technical umbrella requires a gargantuan effort. Especially considering the pace at which new ideas are brought it.
A helpful asset in that is the proprietary UI Kit approach that we create for every project. It is flexible enough to cater to multiple differently-positined products while providing enough detail to construct even the most boutique feature within each individual product.
Development
The development of Symbolik Social started once the UX wireframe was confirmed because the complexity of the navigation and the sheer number of features we have designed for it.
Process
Symbolik Social was developed with a robust and modular architecture. The frontend was built using Next.js, React, and TypeScript to ensure a dynamic and responsive user experience. Tailwind CSS and Radix UI provided a consistent and modern design system. On the backend, we leveraged C# and ASP.NET Core 6 for high-performance API services, utilizing Entity Framework Core and MySQL for efficient data management.
To support real-time features, WebSockets and RabbitMQ handled instant updates for discussions, watchlists, and financial data streams. Authentication and security were reinforced using Auth0 (IdentityServer), while logging and monitoring were managed with Serilog, Grafana (Loki), and HealthChecks.
Integrations
We integrated multiple third-party tools and services to enhance Symbolik Social’s capabilities. MagicBell was used for real-time notifications, ensuring users stay informed on discussions and market updates. Advanced charting solutions allowed for in-depth financial analysis, with API-driven data fetching keeping watchlists, posts, and messaging updated in real time.
For scalability and efficiency, we implemented Hangfire for background job processing, Scrutor for dependency injection management, and Swagger for API documentation. Automated testing was a key focus, with xUnit and AutoFixture ensuring reliability, and an in-memory database used to validate database queries effectively. AWS S3 was utilized for secure data storage, enhancing platform reliability and performance.. Our approach combined modern frontend and backend technologies to ensure an efficient and intuitive user experience, delivering a powerful environment for market professionals to collaborate and share insights.
Outcome
Symbolik Social is a monumental work that a company made for its users. In the world where platforms blend, all having the same features and their own gpt, building something that looks, feels, and plays differently takes courage and more importantly, reverence for its audience. For us, as an agency, this was a great example of wholesomeness from a brand in an industry where you usually don’t expect it.
Customer Testimonial
Shakuro does a phenomenal job at asking the right questions, and by understanding our needs, they define what needs to be created.T.J. DeMarkPresident, Symbolik
The Symbolik Social platform
The idea of a website that would allow Symbolik users to upgrade from WhatsApp groups to a dedicated industry-specific social platform was born during the pandemic as a response to the booming online interaction.