Helping students to learn UI-UX design
I had a dream to teach design to students since I started to learn design on my own. Learning to design websites & mobile apps as well as learning to think as a designer gave me a lot of opportunities and advantages over the competition.
Prior to starting this experiment, I had worked as the Program Manager at an EdTech Startup called Speckbit. I had the experience of teaching Python to students and also organize various events and workshops.
Based on that, I did 2 free online workshops & used it as marketing to build trust to join the cohort. The workshop was successful with 80+ people attending the workshop.
Landing Page Content Flow
Purpose:
• To build trust and credibility
• To showcase what will be taught
• To get people to join the cohort
Audience:
• Students who are interested to learn UI-UX Design
• Working professionals who are looking for a career change to UI-UX design
Success looks like:
• Help people who join the cohort learn UI-UX Design and design websites and web apps on their own
Content Structure:
- Home Page (Landing Page)
• Intro about the Cohort
• Why learn Design
• Perks & Benefits
• Cohort Syllabus
• Curriculum
• What can be done by learning design
• Tools used
• Instructor Bio
• Testimonials
• Pricing
• FAQs
Research
The task for researching was to find out how others in the teaching or academy space are doing a similar kind of job and also to understand how they position themselves. Once, found out a bunch of such websites, took screenshots of all the landing pages to help me in the design process.
Based on the research, changed the order of the structure to make sure a user understands everything they get by joining the cohort. Also worked on the copy to make sure the user has clarity about what is being taught in the cohort.
The Style Guide
The main aspect regarding the website/landing page was to think about how to position the cohort and also how to build trust and credibility. Once, having thought about positioning, and also having a sample content along with the content structure ready, went onto creating the style guide.
Since the main aspect was to showcase credibility, chose Avenir Next and SF Pro as fonts since both fonts are widely used and also builds trust. Also, had to work on Logo, but since I'm not a pro graphic designer, just created a type logo.
Wireframing & Converting Wireframes to Final Design
Based on the research and content flow, brainstormed the information architecture & wireframes on pen & paper first and then converted that to high-fidelity wireframes on Figma.
Since wireframes were already high-fidelity, adding original content to design the final website was easier. But, the hard part was to search for images that complement the website theme and content.
Website Development using Webflow
Recreated the style-guide first for faster website development and converted all the requirements from design to development. Also worked on responsiveness to make sure it's properly accessible in all screen sizes.
Added various transitions and animations to make the experience better.
Other Graphics used for the Cohort
I also had to design other materials along with the landing page. Have a look at these graphics:
Social Media Posters for the cohort
YouTube Thumbnails
Presentations (PPTs) used for teaching
Presentations (PPTs) used for teaching
Project: Webflow website clone
Check out the website to see the full design of the landing page 👇
Link to Website