Back
Hola!

TipRanks Design System

The technical stuff

  • Company: TipRanks
  • Time frame: Six months
  • Tools: Adobe XD, Figma
  • Role: Design Team Lead
Here's the Website

Quick and Sweet

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

TipRanks iPad Application

Redesign iOS app for iPad compatibility; optimize for tablet screens, leveraging iPad features for enhanced usability.
Click here

TipRanks Mobile Application

Comprehensive investment insights, user-friendly design, bridging investors with data-driven decisions. Tailored for both iOS and Android platforms.
Click here