Bootstrap Academy username

Morpheus

Description

Summary

The subscription page at https://bootstrap.academy/subscription requires a redesign to include a feature comparison table. This table will compare the features available in the Free and Premium tiers of the academy's offerings to enhance clarity and user decision-making.

Tasks

• Design a UI layout for the subscription page that incorporates a tabular comparison between Free and Premium subscription tiers.
• Ensure the table lists all features of the academy and details what is included in each tier.
• Include two subscription tiers in the comparison: Free and Premium.

Requirements for the UI Layout

• Tabular Design: A clean, responsive table layout that aligns with the current website aesthetics. The table should be mobile-friendly and easily navigable. Do compare each feature (lines) and place the tiers (Free, Premium) as the columns.
• Feature List: Identify all the features provided by the academy, including but not limited to:
  • Price (Free vs. 1,000 MorphCoins for Premium)
  • Challenges (Limited to 3 submissions daily for Free, unlimited for Premium)
  • Quizzes (Limited to 6 submissions daily for Free, unlimited for Premium)
  • Any other features currently offered by the academy.
• Visual Hierarchy: Clear visual differentiation between Free and Premium features, possibly through the use of color coding or icons.
• Interactivity: Consider interactive elements like tooltips for providing more information about each feature without cluttering the table.
• Accessibility: Ensure the design is accessible, with proper contrast ratios and support for screen readers.

Design Deliverables

• A mock-up or wireframe of the proposed table layout.
• Annotations or a brief explanation of the design choices, especially regarding interactivity and accessibility features.

After design review

• Implementation

##Notes
The bounty can be split in design and implementation, if you wish.