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