Superbio Platform Redesign
UI/UX designer & design systems
Background: Superbio, an AI model library offering tools for scientists, data scientists, and researchers, required a redesign to better meet user needs.
Why a New App Platform Simplify workflows, improve usability, and ensure alignment with Superbio’s mission: “to advance life sciences by making AI accessible.”
My Role
As the UI/UX Designer and Branding Specialist, my responsibilities included:
Conducting user research and surveys to gather insights.
Analyzing user behavior through Clarity and other tools.
Creating a new visual identity, including design system.
Sketching and conceptualizing the new platform.
Collaborating closely with engineers and the product manager.
Developing a comprehensive Design System from scratch.
Crafting icons to convey Superbio's essence in a friendly and engaging manner.
Problem:
• Low Engagement with Features: Many interface elements received less than 5% of user interactions, highlighting poor usability and overwhelming complexity.
• Outdated Visual Design: The app’s inconsistent style, excessive use of colors, and unclear icons created visual clutter without serving a functional purpose, leading to a confusing and frustrating user experience.
• Confusing Navigation: Users struggled to find their way around, with the app’s structure causing confusion and dissatisfaction.
• High Clicks on Feedback and Tutorials: Users frequently clicked on links for feedback and tutorials, indicating a need for additional guidance and support.
• Confusing Workflows: Setting parameters, uploading files, and managing workflows were overly complicated, making it challenging for users to complete tasks.
• Hidden Upgrade Button: The upgrade button was only visible after logging in, rather than being accessible at all times, causing low conversion to paid users.
Understanding the issues
Design Ideation:
1. Leveraged user research insights to guide the redesign. Key steps included:
2. Studying successful apps (Mobbin aka pinterest for product designers).
3. Defining categories and creating a design system.
4. Developing icons and colors to group related features.
5. Enhancing information architecture for seamless navigation.
6. Frequent brainstorm and feedback meetings with front end engineers, PM and CEO.
Research & Inspiration (mobbin)
Navigation
Icons & Colors
App Store
Information architecture:
• A new homepage with enhanced search bar visibility.
• Consolidated cluttered elements into intuitive categories.
• Improved visibility of Upgrade button.
• Broke down workflows into easy to understandable steps.
• Applied consistent color coding and iconography.
• Modernized UI for a cohesive and appealing look.
Figma (feedback & brainstorm)
New Design
Enhanced Search Bar Visibility & Categorization: Made the search bar more prominent for quicker access to tools and added a subject field to categorize app content, improving organization and search-ability.
Consistent Icons and Colors: Applied clear, meaningful icons and consistent color coding within categories for better organization and visual clarity.
Always Visible Upgrade Button: Ensured the upgrade button is consistently visible, along with relevant information, to make it easier for users to take action.
App Categories: By organizing icons and colors, I grouped apps into clear categories, making it easier for users to navigate search, while giving purposeful meaning to the colors and icons.
Larger, User-Friendly Cards: Increased card size and added each organization's logo to foster a sense of ownership and allow them to market their tools within our platform.
Organized Information Flow: By arranging the steps in a vertical sequence, I made it easier for users to follow and understand how to complete the workflow.
Results
Engagement Time: Increased from 5 minutes to 10+ minutes.
Quick Back Rates: Reduced to below 1%.
User Feedback: Early responses indicate improved intuitiveness and satisfaction.
Next Steps
The next steps should focus on monitoring post-launch metrics, such as user engagement and retention, to assess the success of the redesign. Conduct additional usability testing to gather in-depth feedback and identify any remaining pain points, especially around navigation and workflows.