REAL WORLD PROJECT

Mindbridge
Website Development

Team

What I did

Wireframe

Information Architecture

Usability Study

Web Development

What I used

Figma

HTML

CSS

JavaScript

Context

Type: Academic Project

Duration: 4 months

Course: Web System Design and Management

Time: Jan. 2022

TL;DR

In part 2 of Mindbridge Education project, I will take the information architecture (IA) to its final stage and develop a professional website using HTML5, CSS3, and JavaScript. I worked end-to-end from problem discovery, to running usability tests, to iterative design, to final implementation. My crowing achievement was including a language translation feature in the website.

Highlights

Support for two different screen resolutions (i.e., smartphone and laptop). Thus conforming to the industry standard practice of Responsive Web Design.
Use of Google Translate to allow users to view the website in multiple languages.
Use of validated HTML5 and CSS3 code and standard coding practices.
Provision of Search function to help users find information quickly.
Attention to Web Content Accessibility Guidelines (WCAG) 2.1.

Introduction

As there is currently no website for Mindbridge Education, I had to derive the mission statement from their official LinkedIn page. The mission statement is an important vector in shaping and designing website's layout and experience.

Mission Statement

At Mindbridge, we are committed to our students’ lifelong success and draw clear connections between their intellectual pursuits and their ability to adapt to and deal with complexity, diversity and change.

The goal of this project is to design the first ever website for Mindbridge Education. The website will support the information needs of current and prospective students and teachers, and parents by providing easy navigation throughout the site. Focus will be on maximizing the information users can find, and minimizing the amount of time they are required to spend finding it. Building on the previous part, this project will take into consideration:

User scenarios
User goals and potential solutions
A usability study
Wireframe redesign
Website development

Project Justification

This project fits into Mindbridge's overall mission statement by providing their website with supporting resources that enrich a student's (current and prospective) overall experience with academia, whether that is looking up for different course offerings, admission criteria and process, or enrolling for different services. This would also enable parents to elicit information on the fee structure and stay abreast of news and events. Additionally, potential teachers could benefit from the information provided on the website which would help them apply for jobs by contacting the enrichment school.

THE PROBLEM

How might we develop the first ever website of an enrichment school that fulfills the needs of client and users?

A LOOK AT

Mindbridge Users & their Information Needs

Internal Potential Stakeholder

Current students: The students studying at Mindbridge (age group 6-17) would need information regarding calendar, student clubs, news & events, student resources, portal for Google Classroom, and COVID-19 policies and safety measures.
Current teachers: The teachers presently teaching at Mindbridge would visit the website to seek information on school's calendar, news & events, and portal for Google Classroom.
Current staff: Includes all the existing staff working at the school. They would require information about calendar, and news & events.

External Potential Stakeholder

Parents: The parents of current and prospective students who would visit the website to see calendar, course descriptions, parent resources (e.g., registration forms), news & events, blog & podcast, and COVID-19 policies and safety measures.
Prospective teachers: Teachers or instructors with varying skills and from diverse backgrounds aiming to find a job at Mindbridge. They could inquire about recruiting information and job postings.
Referred and cold prospects: They are potential customers who are unfamiliar with Mindbridge. They would want to see Mindbridge's unique selling proposition (e.g., what makes Mindbridge different?), testimonials from parents and students, video about the school, course descriptions, about Mindbridge's teachers, registration form, and information on virtual tour and/or interview.

MY APPROACH

User Goals and Solutions

Continuing with the personas we defined in Part 1 of the project, I will now outline user goals based on their respective scenarios (not provided here), and potential solutions to them in terms what the website can offer. This step will provide the bones for an architecture needed to make a successful Mindbridge website.

Primary Persona

Prospective Parent

Nikhat Huran Kismat

Secondary Persona
Existing Student

Richmond Carter

Mindbridge Education

Extra goal from the organization that does not overlap with users'

Usability Study

For this section, I conducted a simple usability study with a prospective parent on the wireframes created in Part 1 of the project. The goal of this task is to gain feedback on the wireframes to allow for any corrections, before any coding takes place.

The usability study took 30 minutes to complete. A testing script was prepared which introduced me to the user, and detailed the purpose and process of the study to them. A semi-structured interview followed the test where we discussed what went well and what quite did not.

Let's take a look at the compiled transcripts of the testing feedback!

Evaluation and Next Steps

The user finds the wireframes to be quite intuitive, and the information is easily findable. The design has a minimalistic and modern appeal to it. After the usability study, it was clear to me that there are some user expectations from the website, for example, finding a particular piece of information under a specific section. I believe this is because every user comes with their own mental model.

What did not go well? 👎🏾

Missing user expectations; information gap.
No search & translation functionality.
No drop down menu in Global Navigation.

What did not go well? 👍🏾

Almost all the tasks were completed successfully!

Next steps 🪜

Incorporate a function to choose different language options to increase the accessibility of the website.
Add search functionality.
Place information on Summer Enrichment Program in the Courses page.
Add Summer Enrichment Program information in the Homepage carousel.
Also add an Enroll Now or Apply Now button on the Homepage carousel.
Add Student Resources and Our Services to global navigation.
Due to the scope of this project and time considerations, designing a drop-down menu in the global navigation bar was difficult. Thus, I chose to omit it. But, I understand that it is an indispensable part of any large organization's website.

Apart from the these, there are other several changes in the wireframes that will be highlighted below!

FIGMA TIME

Wireframe Redesign

With the results from usability study, I was able to identify the areas of wireframes that need improvement or changes.

FINAL WEBSITE

Web Development

Using HTML5, CSS3, and JavaScript, I developed Mindbridge's first ever website. It reflects the changes that emerged from the usability study. Below are the screen grabs of the designed website. Pertaining to the scope of the project, it only contains a homepage and two additional pages. The code can be made available on request (email me).