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






























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:

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


External Potential Stakeholder

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

mindbridge logo with letter M

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? 👎🏾

What did not go well? 👍🏾

Next steps 🪜

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).

Laptop View

Mobile View

Other Projects

Redesigning McGill Information Studies Student Association's logo

How might we develop the information architecture for a first-ever website of an enrichment school? 

A VR app that enables people to meet and interact with a higher degree of immersion.