TipRanks Design System
The technical stuff
- Company: TipRanks
- Time frame: Six months
- Tools: Adobe XD, Figma
- Role: Design Team Lead
TL;DR
TEST
Description
The goal was to make a unified design system for a financial portal that offers portfolio management, screeners, and other tools. We wanted to ensure consistency, improve user experience, and streamline the design-to-development process.
Recently, I decided to switch to Figma, so we created a shift in a month that includes a design sprint and ongoing tasks.
The Challenge
- Nconsistency: The portal, being vast and multifaceted, had various design inconsistencies leading to a disjointed user experience.
- Complex Features: Financial portals inherently have intricate features like screeners, charts, and graphs, which require a delicate balance between functionality and aesthetics.
- Adaptable Design: Ensuring the design system would be flexible enough to accommodate future features or changes without a complete overhaul.
- Aligning my Team: Make sure my team only uses components from the design system, and not create more no-needed components.
A research study
- Analysis of Design Systems: We looked at a lot of other big websites and services to see how to do it.
- Collaboration: Understand technical constraints by working with developers. It’s important to understand their “language”.
- Design Workshops: Organize sessions with the design team to brainstorm, prototype, and iterate on potential design elements. To make sure we build our design system like the front-end team, I trained my team about “Atom Design”
- Figma’s workshop: After I decided to switch, we did a few short sessions on Figma, how to use styles, how to use verifiables and how to use the auto-layout.
The Results
- A unified user experience: The new design system made the portal more consistent, so it’s easier to use.
- Efficiency in Design-to-Development: With a clear design system in place, the transition from design mockups to development is smoother and faster.
- Easily updateable: The modular design system allows for easy additions and updates, so the portal stays current with evolving industry trends and user needs. Design-to-development became cheaper, which allowed me to improve UI and UX more.
- Stakeholder Satisfaction: The design system brought clarity and efficiency to the organization, marking the project as a success.
Check out more of my work
Arena: B2B2C System for Public Participation
Arena is a public participation platform for government ministries and local authorities, enabling them to collect insights from residents through open-ended questions, surveys, and multiple-choice questions. The system emphasizes transparency, customization, and ease of use for both clients and end-users.
Redesigning TipRanks’ Stock Screener
TipRanks’ Stock Screener is a feature-rich tool designed to help investors filter and analyze stocks based on various criteria, from predefined filters to fully customizable tables and saved searches. However, despite its robust capabilities, the previous design lacked a seamless, investor-first user experience. Our redesign focused on optimizing usability, improving data presentation, and enhancing engagement, ultimately making it easier for investors to extract valuable insights and take action.
Enhancing TipRanks Mobile & iPad Experience
We redesigned the TipRanks mobile and iPad apps to improve user retention, engagement, and revenue. By optimizing the UI for investors on the go and enhancing the iPad experience, we created a seamless, intuitive, and platform-specific design that boosted overall performance.As soon as I joined TipRanks’ application squad, I noticed major inconsistencies in the app’s design. There was no design system, and both iOS and Android shared the same UI, creating a confusing experience. Additionally, while many iPad users installed the app, actual usage was low. This presented a unique opportunity: by improving both the mobile and iPad experiences, we could increase retention, engagement, and conversions.