Build Our Bridge Academy

💻 Website redesign and development

🌱 Current Website Experience & Problem Statement

Problem Statement: "How can we redesign and develop a website that is easy to navigate, informative, and useful for both students and tutors, while also being scalable and maintainable for the future?"

The existing website, while functional, had several issues that affected its effectiveness for organization leaders, students, and tutors. The homepage was divided into numerous sections, making navigation and quick access to information challenging. Additionally, the user dashboard included many unnecessary features—such as sales reports, pricing, and reviews—that served no practical purpose and contributed to user confusion.

Analysis of current website

👥 User Research: Student and Tutor Surveys

To gain a deeper understanding of user needs, I surveyed current students, tutors, and leaders about their experiences with the website. This survey aimed to gather their feedback on specific features and overall usability, and the insights collected were instrumental in ensuring that the new website would incorporate enhancements that better align with users' preferences and requirements.

🔧 Survey Focus Areas:

❓ Overall satisfaction with the current website
❓ Usage patterns for time-keeping and messaging features
❓ Specific pain points with current functionalities

🌟 Survey Results & Insights:

⏱️ Time-keeping was the most used feature, while the messaging system was rarely utilized
📅 There was a lack of an automatic date range selection and issues with incorrect display
⭐ There was a need for fewer unnecessary features and a simplified interface

📊 Competitive Analysis: Review of Juni Learning

To better understand the competitive landscape and identify areas for improvement, I conducted a thorough analysis of an online tutoring organization that holds class sessions through video conferencing. Some key features I noticed were:

✍ Separate log-in for students and tutors; different dashboards for each
✍ Automatic class and date range selection for scheduling sessions
✍ A clear and concise messaging system for tutors and students

🖋️ Design Ideation and Wireframing: Streamlining Navigation

How might we simplify the website's navigation and encourage communication between students and tutors?

Based on the insights gathered from the user research, I brainstormed website designs that addressed the identified pain points, consolidating information sections, removing unnecessary features, and simplifying the user dashboard to enhance user experience.

🎯 Iteration

I used Figma to design a set of low-fidelity wireframes that outline the structure of the new website. These wireframes focus on ease of use, featuring a clean layout and intuitive structure.

Website redesign: low-fi wireframes

💫 Final Design

Next, I refined the low-fidelity wireframes into high-fidelity versions, incorporating graphics, organized content, and a clear visual hierarchy.

Website redesign: high-fi wireframes

✅ Student and Instructor Profiles: Time-keeping and Messaging Features

I designed the new dashboard to streamline the user experience by focusing on the most-used features: time-keeping and messaging. The time-keeping feature was enhanced to include a more simplified date and course selection process, while the messaging system was redesigned to be more user-friendly and accessible.

🖥️ Development & Launch

After finalizing the high-fidelity wireframes, we moved on to developing the website using React, Vite, and Django. We are currently in the process of building the website and plan to launch it in the next few months after thorough testing.

Prototypes and development progress

Back to Home