Predi.org: App & Landing Page Redesign for a Blockchain-Powered Prediction Platform
VueLabs
Introduction
Predi, a next-generation blockchain-powered prediction market app, partnered with VueLabs to enhance its app functionality and redesign its landing page. The project aimed to optimize user experience, streamline app interactions, and create a cohesive design system.VueLabs delivered a comprehensive redesign, focusing on app features like market creation, navigation, and interactive flows, while also migrating and optimizing the landing page. This case study explores how we approached the challenge, implemented innovative solutions, and achieved measurable outcomes for Predi.
The Process
Creating a seamless workflow that balances creativity, precision, and efficiency while integrating AI tools to reduce manual coding effort.
Updated Design Process
The Collaborative Beginning
The partnership began with discovery workshops to define user pain points and platform goals.
Key objectives included:
Enhancing app functionality to simplify market creation and wallet integration.
Creating a unified design system for seamless user experience across devices.
Optimizing the landing page for conversions while aligning it with the app’s design.
Using FigJam, we mapped workflows, sketched initial ideas, and prioritized features to align with Predi’s vision of empowering users to create, trade, and own prediction markets effortlessly.
REDISIGN - STAGE 1
Planning and System Setup
Our first step was organizing the scope of work into actionable tasks. This phase focused on foundational improvements, guided by hypotheses, visual exploration, and specific adjustments:
1: Hypotheses and Action Planning
From our brainstorming sessions, we developed hypotheses that guided our initial design approach:
A focus on “partner operations” (rather than direct user operations) would yield higher engagement.
Highlighting key features like NFT Licenses and global participation would resonate with target audiences.
Simplifying navigation to features like “Create Prediction” and “Join Market” would improve user engagement.
These hypotheses laid the groundwork for actionable design strategies that prioritized usability and partner alignment.
2: Visual Exploration and Moodboarding
Using Figma, we collected references to define the visual style and structure of the project.
Style Definition and Iteration
In Figma, we created foundational variables (colors, typography, spacing) and iterated on core design elements.
REDISIGN - STAGE 2
App Functionality Enhancements
Predi’s app functionality required significant updates to improve user interaction and navigation:
Prediction Product Design Updates
• Redesigned the product interface with a focus on usability and consistency.
• Integrated report buttons, hover states on checkboxes, and notification reminders.
Navigation Optimization
• Fixed navbar layout inconsistencies.
• Added contextual menus and interactive flows to improve usability.
Leaderboard
• Designed a comprehensive leaderboard system to engage competitive users.
Mobile and Tablet Views
• Adapted all designs for mobile and tablet devices, ensuring seamless accessibility.
Wallet Integration Flow
• Designed the "Bet on Market – Connect Wallet" flow to simplify blockchain interactions.
License Management Screens
• Built user-friendly interfaces for managing NFT licenses and market ownership.
REDISIGN - STAGE 3
Landing Page Optimization
Parallel to app updates, we overhauled the landing page to align with Predi’s branding and user expectations:
• Structure and Layout: Developed reusable templates for consistent page sections.
• Conversion-Focused Design: Updated fonts, buttons, and styles to improve clarity and engagement.
• HTML + CSS Conversion: Converted the landing page to HTML + CSS with plugin integration for easy updates.
Innovative Design-to-Code Workflow
Export to Tailwind Code
With an AI plugin inside Figma, we exported designs directly into Tailwind-compatible code, reducing the need for manual front-end development.
Integration with dev environment
We incorporated the generated code into an dev build using Claude and a code editor, ensuring compatibility and smooth integration.
The Test
To validate this workflow, we tested it with an actual example. Steps 1 and 2 were completed smoothly, and the AI export tool in step 3 performed as expected after several iterations. Integration in step 4 required additional testing to ensure everything worked seamlessly in the development environment. (edited)
This workflow was tested and validated through a live example:
Smooth Execution: Steps 1 and 2 were completed efficiently.
Iterative Refinement: The AI export tool required adjustments but achieved high-quality results.
Seamless Integration: Integration into the dev build was successful after additional testing.
The process reduced design-to-code time by 30%, while enhancing collaboration between design and development teams.
Results
The redesign and workflow innovations delivered measurable improvements:
User Engagement
Navigation updates led to a 22% increase in prediction activity.
Mobile Accessibility
Optimization efforts boosted mobile usage by 35%.
Sign-Up Conversion
Landing page updates increased conversions by 18%.
Workflow Efficiency
AI-powered tools reduced development time by 30%.
Conclusion
VueLabs’ collaboration with Predi showcases our expertise in blending innovative workflows with cutting-edge design. By enhancing app functionality, refining landing pages, and integrating an AI-driven delivery model, we delivered a seamless experience for users and a faster go-to-market solution for Predi.VueLabs remains committed to delivering high-quality, user-focused designs for SaaS, AI, and Web3 companies—empowering them to achieve their vision without the need for full-time hires.