JStack Course Landing Page
Eduardo Amaral
Web Designer
UI Designer
Framer Designer
Figma
Framer
Overview
Client: JStack
Duration: 2 months
Tools Used: Figma (design), Framer (implementation)
Objectives
Update the website with a more modern look.
Align the design with the visual identity of the JStack course.
Reflect the company's new phase through the website.
Challenges
The previous website did not reflect the course's modernity and evolution.
Need to stand out in a competitive market of technology courses.
Align the visual identity with the target audience's expectations.
Old version
Process
Initial Analysis: Evaluation of the current website and identification of improvement areas.
Market Research: Studying competitors and current trends.
Ideation and Conceptualization:
Design in Figma:
Implementation in Framer:
Reviews and Adjustments:
Implemented Solutions
Modern Visuals: Adopted a clean and contemporary design.
Aligned Visual Identity: Used colors, typography, and graphic elements that reflect the JStack brand.
Enhanced User Experience: Intuitive navigation and highlighting key course information.
Interactive Elements: Subtle animations to engage visitors.
Results and Impact
Positive Feedback: Received praise from users and stakeholders.
Brand Strengthening: The site now adequately reflects the company's new phase.
View the Live Site
New Version
Client Testimonial
"The new design of our landing page perfectly captured the essence of JStack and helped us communicate our evolution as a company. The feedback from our students has been incredible!"
— Mateus Silva, Founder, JStack
Learnings and Reflections
Value of Market Research: Understanding what competitors are doing helped identify opportunities for innovation.
Importance of Collaboration: Continuous involvement with the client was crucial to the project's success.
Adapting to Trends: Incorporating relevant trends made the site more appealing to the target audience.
Next Steps
Continuous Monitoring: Track website performance metrics.
Future Updates: Plan improvements based on user feedback.
Feature Expansion: Consider implementing new sections or interactive features.
