Hobbyclass

Design an engaging and intuitive platform for children’s hobby classes. The website aims to attract parents and children by showcasing various hobby classes, top mentors, and the benefits of learning with Hobbyclass.

ROLE

UI/UX Designer

Project Lead

DURATION

Sept. 2023

1 month

TEAM

Maitry Talaviya

Sole

Figma for UI/UX Design

Wireframing: Created low-fidelity wireframes to outline the structure and flow of the website. This helped in planning the user journey and information architecture.
High-Fidelity Prototypes: After the wireframes were approved, high-fidelity mockups were developed with full-color schemes, typography, and detailed elements.
Component-Based Design:
- Components: Reusable UI elements such as buttons, input fields, icons, and cards were created. This approach made the design more consistent and easier to manage.
- Design System: A consistent design system was implemented, which includes a color palette, typography scale, and grid system to maintain uniformity across the website.

UI Components Created

Hero Section: A visually appealing area that includes bold headlines, a call-to-action button, and featured images of kids exploring different hobbies. The background may include vibrant colors and graphics to captivate the audience.
Course Cards: Designed as interactive cards that display brief descriptions of each hobby course. Each card includes an image, course title, brief description, and a "Learn More" button to drive users to detailed course pages.
Top Mentors Section: Compact, reusable mentor cards that include mentor images, bios, and links to their profiles or courses they teach. This section helps build trust by highlighting the experience and qualifications of instructors.
Login Button: Positioned in the top-right corner of the navigation bar for easy access. The button is consistent across the site and uses visual cues (color and contrast) to make it easily noticeable.
FAQ Section: Created collapsible FAQ components with clear questions and answers. The accordion-style format helps in providing a cleaner UI and reducing the overwhelming amount of text on the page.
Footer: The footer includes links to social media platforms (Facebook, Instagram, Twitter), contact information, and legal details like terms of service and privacy policy. The social media icons were designed as clickable elements that follow a consistent design pattern.

Typography and Color Theory

Typography: A hierarchy was established with headings, subheadings, and body text to make the content easy to digest. Sans-serif fonts were selected to ensure readability, especially for mobile users. Headings were bolder and larger to grab attention, while the body text remained clean and simple.
Color Palette: A bright and engaging color palette was chosen to appeal to both children and parents. The primary colors, like blues and yellows, evoke a sense of creativity and joy, while secondary colors like white and grey were used for balance and clarity.
Accessibility Considerations: Ensured that contrast ratios met the standards for web accessibility, especially for the visually impaired. Text was always tested for readability against different backgrounds.