2024 | PiQ Suite - A Finance Resources Centralizing Platform
Project Overview
PiQ Suite (United Kingdom) is a finance-focused aggregation platform designed to centralize information from over 100 sources, including news feeds, market data, social media, and apps, to provide traders and investors with real-time insights. The platform aims to bridge the gap between retail traders and professional investors by delivering fast, comprehensive, and customizable trading resources.
I joined the PiQ Suite project as the Lead Product Designer (Remote) after the initial version had gone live. The first iteration suffered from basic UI/UX flaws: a cluttered dashboard, text-heavy layouts, inconsistent design elements, and an overall lack of user-friendliness. My role was to improve both the UI and UX of the platform, introduce new features, and create a scalable design system to enhance the product's usability and appeal.
My Contribution
Key Responsibilities:
- Redesigned existing features to improve usability and aesthetics.
- Created new features based on user needs and stakeholder feedback.
- Built a robust design system, including color palettes, typography, iconography, and components.
- Collaborated with developers to ensure seamless implementation.
- Worked closely with stakeholders in the UK and Nepal to understand user pain points and product goals.
- Defined PiQ Suite's brand color and visual identity.
Challenges and Solutions
1. App Selector (Widget Selector)
Challenge: The previous design of the App Selector was cluttered, confusing, and lacked basic UI principles. Users found it difficult to locate and manage different feeds.
‼️ Before UI UX Revamp
Solutions:
- Introduced a search bar to help users quickly find specific feeds.
- Added filtering options to categorize feeds based on type.
- Implemented tabs and a multi-select system to make navigation intuitive.
- Improved the UI for both light and dark modes, ensuring consistency across different screens.
- Integrated buttons from the design system for a more polished look.
✅ After UI UX Revamp
2. Registration Flow
Challenge: The registration process was confusing and lacked essential features, causing friction for new users.
‼️ Before UI UX Revamp
Solutions:
- Designed a new registration flow from scratch, aligning it with the parent website’s branding*. Incorporated elements from their Parent website.
- Introduced steppers to guide users through the multi-step process.
- Added Google registration and proposed X (Twitter) registration due to the platform’s strong following on X.
- Incorporated email verification/authentication and forgot password options to improve security and user experience.
- Included OTP verification to streamline the login process.
Ref. Fig: Parent Website* (Different from the PIQ Suite Dashboard/Suite)
Fig: User Flow made using Figjam
✅ After UI UX Revamp
3. Custom Feed
Challenge: Users needed the ability to create and manage their own custom feeds.
Solutions:
- Integrated the Custom Feed feature into the App Selector.
- Enabled users to rename feeds, change colors, and apply conditional filters.
- Provided options to add resources to custom feeds for a more personalized experience.
4. Multiple Workspaces
Challenge: Stakeholders wanted to introduce a feature allowing users to create multiple customizable workspaces.
Solutions:
- Designed the Multiple Workspace feature, enabling users to create new suites (dashboards) based on their needs.
- Allowed users to add existing feeds or create custom feeds within each workspace.
- Made the workspaces fully customizable with drag-and-drop functionality.
5. Suite (Main Dashboard)
Challenge: The main dashboard was cluttered, lacked font hierarchy, and had scattered icons, making it visually overwhelming.
‼️ Before UI UX Revamp
Solutions:
- Improved the UI/UX of the Suite by enhancing spacing, font sizes, and styles.
- Introduced a resizable column feature to switch between single-column and double-column views.
- Streamlined the layout to reduce eye strain and improve readability.
✅ After UI UX Revamp
6. Feed Sharing Feature
Challenge: Users needed a way to share their feeds and workspaces with others.
Solutions:
- Designed the Feed Sharing feature as a pop-up modal with a sleek UI.
- Allowed users to share custom workspaces, feeds, and media with other users.
- Ensured the feature adhered to PiQ’s branding guidelines.
7. Pricing Page
Challenge: PiQ Suite initially lacked a dedicated pricing page, and the existing pricing table was confusing and failed to grab attention.
‼️ Before UI UX Revamp
Solutions:
- Designed a new pricing page that aligns with PiQ's branding.
- Created a clean, modern layout to highlight different pricing tiers clearly.
- Used visual hierarchy and design principles to make the pricing structure easy to understand.
- Enhanced the page’s usability and aesthetic appeal, making it more engaging for users.
✅ After UI UX Revamp
8. Additional Features
- Account Settings: Simplified the UI and added more intuitive navigation.
- User Profile: Redesigned the profile flow for better user management.
- Bulk Licensing: Worked on the UI for managing bulk licenses.
- Article Viewer: Revamped the article viewer to improve readability and navigation.
- Mobile Version: Ensured the platform was responsive and optimized for mobile devices.
Design System Creation
One of my key contributions was building a comprehensive design system to ensure consistency across the platform. This included:
- Color Palette: Defined brand colors for light and dark modes.
- Typography: Selected fonts that balanced readability and style.
- Layouts: Standardized spacing and grid systems.
- Iconography: Created a cohesive icon set.
- Components: Developed reusable components such as buttons, tabs, and modals.
Impact and Results
- Enhanced User Experience: The redesigned UI/UX significantly improved user engagement and satisfaction.
- Improved Navigation: Users could now easily find and manage feeds, resulting in a more intuitive experience.
- Brand Consistency: The new design system ensured a cohesive look and feel across the platform.
- New Features: Introduced features like custom feeds, multiple workspaces, and feed sharing to meet user needs.
Conclusion
Working on PiQ Suite was a transformative experience that allowed me to improve a live product by solving real user pain points. By revamping the platform’s UI/UX, introducing new features, and building a solid design system, I contributed to making PiQ Suite a more efficient, user-friendly, and visually appealing tool for traders and investors.
Reviews
3 reviews
Nitika, this is some seriously impressive work. You’ve taken a complex platform like PiQ Suite and made it feel approachable, professional, and user-friendly. The improvements are thoughtful and impactful, showing how well you understand both user needs and design principles. This project is an excellent showcase of your skills and dedication.
1. Search and Sign-Up Screens (Mobile)
What’s Good:
- Search results are easy to scan, with highlighted keywords.
- The sign-up pop-up matches the branding perfectly.
What Needs Work:
- Search Feedback: Show total result counts or display a "No results found" message.
- Keyword Contrast: The highlight colour in dark mode needs better contrast.
- CTA Button: Make the "Sign Up" button pop with a bold outline or animation.
2. Account Settings and Subscription Table
What’s Good:
- Well-structured subscription details table.
- Logical grouping of settings improves usability.
What Needs Work:
- Collapsible Sections: Organize settings into collapsible menus for a cleaner look.
- Highlight Current Plan: Add a marker (like a badge or border) to the active subscription plan.
- Tooltips: Explain premium features (e.g., “Keyword Highlights”) with simple tooltips.
3. Pricing Plans
What’s Good:
- Pricing tiers are clear and visually separated.
- Checkmarks and crossed items make feature availability obvious.
What Needs Work:
- Mobile Design: Ensure the pricing table stacks vertically on small screens to avoid horizontal scrolling.
- Highlight Recommended Plan: Add a “Best Value” tag to the most popular tier.
- Feature Clarity: Add links or tooltips to explain features like “Telegram (Beta).”
4. Color Palette
What’s Good:
- Great variety of light and dark modes.
- Clear hover and focus states.
What Needs Work:
- Accessibility: Test all colour combinations for proper contrast and readability.
- Guidelines: Define specific use cases for bright colours like orange to maintain balance.
5. Selection Controls
What’s Good:
- Consistent design for checkboxes, radio buttons, and switches.
- A clear distinction between selected and unselected states.
What Needs Work:
- Hover Effects: Add hover feedback for more interactivity.
- Validation States: Include warning/error visuals for incomplete or invalid selections.
6. Text Fields
What’s Good:
- Error states are clear and easy to spot.
- Consistent spacing and typography improve usability.
What Needs Work:
- Focus Indicators: Use bolder focus outlines or shadows for active fields.
- Inline Validation: Show instant error messages as users type.
- Auto-Fill Styling: Ensure auto-filled values look natural within the design.
Nitika, you’ve done an amazing job here. The improvements you’ve made have completely transformed the platform into something both functional and visually engaging. Your attention to detail and ability to create a scalable design system is impressive. Keep up this level of work – you’re absolutely killing it!
Great job, Nikita on your complex redesign process, looks neat!
All your efforts seem justified, but its a shame you didn't provide the before and after comparisons so that any appraisal would have understood where you started.
You might also like
Ithnain Management System
Jeel app website wireframes
ALT.Studio Color System
2 PAY
Design Workshop Plan
ShopUs Microcopy
Popular Courses
UX Design Foundations
Introduction to Customer Journey Mapping
Government Design Foundations
