Study Gate Website

Project Overview

Role: UX Designer & Product Manager & Web Developer

Tools Used: Webflow, Figma, Miro, Microsoft Excel for Analytics

Duration: 3 months

Study Gate Group is an educational consultancy company that connects students with universities worldwide. The challenge was to design and develop a professional, modern, and user-friendly website that effectively showcases the company while addressing key pain points found in competitor websites.

Phase 1

UX Research & Market Analysis

My Goal for this phase was to understand industry trends, direct and indirect competitors, and user expectations to create a highly functional and competitive website.

For this I have:

• Conducted intensive UX research and market analysis to gather crucial insights.

• Analyzed competitor websites to identify common pain points from both UI and technical perspectives.

• Researched user needs through interviews as I've met them with the company's visits to schools, students' fairs, and conferences and also, through surveys with students leads from the company's ads and school visits.

• Focused on usability, accessibility, and clarity in presenting Study Gate Group’s services through the website.

Phase 2

Wireframing and early usability testing

After completing the market research, I directly moved to analysis and brainstorming just to sketch early ideas for the website and find different ideas for each main page of the website for brainstorming.

After completing the sketches, I started:

• Creating low-fidelity wireframes outlining content hierarchy and structure.

• Developing the complete mid-fidelity prototype for user testing

• And finally, implementing Iterations based on initial feedback from students.

Phase 3

Building the Design System

I have started the UI design process after completing the market research and the wireframing part moving to building the design system before starting the mockups and high-fidelity prototyping just to ensure consistency and save time while going further in the design.

Key Concepts I used for the important sections' illustrations

• Hero Section: Focused on presenting the idea that studying abroad is easy and hassle-free with Study Gate. The design and messaging emphasize simplicity and a smooth process for students.

• Why Choose Study Gate Section: Highlighted student testimonials with feedback shown as comments above each testimonial to enhance credibility and trust, making it easier for prospective students to decide.

• Counseling Booking Section: Embedded a customized Calendly integration for fast and easy booking, allowing students to schedule counseling sessions effortlessly.

• Study Destination Pages: Designed each page with authentic elements, including country landmarks and flags, to create a more professional and immersive experience tailored to each destination.

Phase 4

High-Fidelity design & Prototyping & Usability Testing

I started building the mockups and linking pages together for the high-fidelity prototype. Then, Started Validating and testing the final design before development.

At the end of this phase, I have:

• Created an interactive high-fidelity prototype in Figma.

• Conducted usability testing with 7 students to assess clarity, navigation, and overall user experience.

• Gathered feedback and implemented necessary adjustments to optimize usability and user flow.

Taking 10 - 20 minutes from students who visit our office and booth for testing the usability of our website high-fidelity prototype

Phase 5

Development & Implementation

As I was hired as a web designer for the company, I have also was responsible to transform the final high-fidelity prototype Transform into a fully functional website. So, for this I have used Webflow.

I divided my work into 4 main things to do for getting a full-functional website that also runs well in all aspects in the technical perspective:

• Developed the website to be responsive, and SEO-optimized.

• Ensured cross-browser compatibility and mobile responsiveness.

• Integrated interactive features like Calendly for enhanced engagement.

• Optimized loading speed, accessibility, and structured content for easy and friendly user experience.

Final Outcome & Impact

• A professional, user-friendly website that effectively represents Study Gate Group and has the main features working without any problems.

• Improved navigation structure and clarity, addressing competitor pain points.

• Solving the company's problem with organizing the leads coming from the website into integrating all of the applications together in one place for easy follow-up.

• Positive feedback from students and stakeholders on the website’s usability and design.

+300%

+200%

Students scheduled meetings

Conversion rate

Key Learnings & Takeaways

• Comprehensive research is crucial for designing solutions that not only look good but also solve real problems.

• User testing significantly improves usability and balances between users and stakeholders' needs for a better impactful user experience.

• Custom visuals and branding enhance the overall professionalism and credibility of the website.

• Iterative design and development lead to more refined and effective digital products especially when considering automating the manual processes in any company.

Conclusion

The Study Gate Group website was successfully designed and developed to provide an engaging, structured, and user-centric experience. By focusing on usability, branding, and clear information architecture, the project effectively met its goals, creating a powerful online presence for the company.

Reach out to me!

Expect to hear from me 2 days after submitting the contact form or sending me an email. Excited to work with you :)

Email

mahmoudessamsalm@gmail.com