REAL WORLD PROJECT
Mindbridge
Analysis and Design
Team
What I did
Structured Interview
Competitive Analysis
Wireframe
UI Design
Prototype
What I used
Figma
Adobe Photoshop
Adobe Acrobat DC
Microsoft Word
Context
Type: Academic Project
Duration: 4 months
Course: Information Architecture
Time: Sept. 2021
TL;DR
This project, designed for Mindbridge Education, is recommendations to develop an architectural strategy for their first ever website. Using benchmarking analysis based on the audience of the website, competitor websites, their content, a content inventory and audit, personas and scenarios, interviews with the director of Mindbridge (client), we developed our recommendations in the form of a strategic Information Architecture (IA) report. Our report uses wireframes and a sitemap to demonstrate the layout and terms we recommend.
Highlights
Design recommendations:
Global navigation consisting of "Home", "Courses", "News & Events", "About Us", "Admissions", "Contact Us", and "Covid-19 Information" in accordance with current industry standards.
Local Navigation such as "Cornerstones 1" and "Cornerstones 2" which appear under the global navigation of "Courses" in accordance with Mindbridge's unique cultural terms, while also integrating standard language for navigation, that does not require the cultural context.
Use of a full-text search system tempered by filtering and advanced search terms.
Use of responsive web design to conform to industry standards of multi-format interactivity.
Accessibility to ensure the site respects universal design principles, and to allow users with visual, intellectual, and motor disabilities to access the site's information.
Mockups
Mobile
Desktop
Prototype
Introduction
Mindbridge Education is a Liberal Arts based enrichment academy offering small group classes for academically motivated students from Grade 1 to Grade 12. Founded in 2015, they have a workforce of about 10 employees and are located in Thornhill, Ontario.
The goal of this project is to design a new digital information environment (e.g., website, app, etc.) for Mindbridge Education. Seeing as there is no Mindbridge website, the IA design is open to interpretation. The project addresses the following parts (although not all will be discussed here):
Lessons learned from Competitive (Benchmark) Analysis
Sample Content Inventory and Modeling
Search System
Critical Recommendations and Design
Executive Summary
THE PROBLEM
Minbridge has no website. The brand has changed a lot in the last five years.
Mindbridge was founded in 2015 and the brand was going through many changes. The director did not feel confident in the brand for a website. Neither did they have the support of tech experts to guide them. As such, they did not focus on creating a website earlier. But as years passed, the director felt the brand is much more stable and that there will be very little changes going forward. What does this mean for us? Creating Mindbridge's first-ever website!
How might we design the information architecture for a first ever website of an enrichment school?
OVERVIEW
Interview Findings
From the interview with the director/client, we were able to garner insights into what they are thinking and understand their needs better. We prepared a set of 30 questions. The responses helped us conceptualize the architecture and further our realization of the design.
We found that the client expects a clean, minimal, and serious website, much like university websites with a menu at the top and a fat footer. It should move away from too much content and have only necessary content blurbs. Rather, they need us to represent the website in terms of visuals to represent their brand. The flow of information should make sense. They need the website to answer questions such as what their mission statement is; who they are; the kind of courses they offer; their admission process; what current parents have to say and so on. They are big on communicating with parents. They require the website to be multilingual. They are not too keen on having a search system, yet.
Looks simple right? On the surface it is, but underneath there is a lot to unpack. Below are the snapshots of parts of the interview process:
Key Takeaway
The client requires the website to have a professional look with a streamlined information flow realized through an intuitive navigation system. More pictures representing the people of the academy and concise blurbs. Information on their mission and vision statement, team, courses, admission process, parent and student testimonials, and other services they offer should be well highlighted.
OUR APPROACH
Target Users
Identifying potential users of the website is an essential step in creating a website tailored for our audience. This would also later help us in improving the architecture of the website through usability tests conducted on these personas.
Primary Persona Prospective Parent
Nikhat Huran Kismat
Age: 42
Married: Spouse is age 45 and works as a dentist.
Has 2 children, ages 10 and 14.
Home in Richmond Hill, ON; Works in midtown Toronto as a radiologist.
Completed medical school in India at a Canadian accredited medical school.
Has completed all necessary work and has been practicing as an MD in Canada for 12 years.
Is a classically trained pianist.
Receives news and medical research via computer and is tech savvy.
Is well connected and active in her social and work community.
Has a strong work ethic.
Secondary Persona Existing Student
Richmond Carter
Age: 13
Lives in Vaughan, ON and attends Delano Academy, an IB candidate school nearby.
Richmond is fluent in four languages and greatly excels in math (e.g., learned to do trigonometry by age 10 and calculus by age 12).
He hopes to attend a prestigious university.
He and his closest friends enjoy online gaming and playing fantasy games, like Dungeons & Dragons.
Growing up with technology, he is very comfortable with it. However, he does not like or participate in any social media.
Competitive Analysis
For this section, we examined the following information from various enrichment school websites. Throughout the websites, we examined the architectural elements of each website, analyzing the structure, topologies, labels, navigation, search functions, anticipated users and the general content approach of each website. Approaching the websites both analytically, and using personas and scenarios, we analyzed the features of each website. Our results were useful in informing us of design choices that should be made in creating a site for Mindbridge.
Key Insights
WIREFRAMES
Search System
As Mindbridge's classes, students, and educators grow, we must also assume that the amount of content will continue to increase.
How should Mindbridge address scalability using search system?
When creating a search system, the tradeoff between affordability and usability is a difficult balance. In our exploration of other sites, the vast majority appeared to use a full text search coupled with a relevance scheme. This type of indexing casts a broad net, recalling plenty of results while being quite imprecise. However, the effort and cost of creating and maintaining a proper index search and thesaurus seems a bit steep for an enrichment program. So, we propose a compromise of allowing Boolean searches to mitigate limitations of full text searching.
The search interface will be a simple search bar in the upper right corner of the screen. It should appear as just a magnifying glass icon, which when clicked opens the search bar. Under that bar, the number of results retrieved should be displayed (if result is 0, recommendations will be given of alternatives to the search executed). The results should appear with the title of the page that is to be accessed as a linked web address, a brief description of the page, and the relevant match found by the search highlighted. The results will be high recall, and low precision, with the option to narrow results with search zones and Booleans.
If the search item is in the topic/header of the page, then it is ranked higher than if it is within full text. From there the search retrieves results in accordance with the frequency of the terms appearing in the text. Where Booleans are applied, the search is then limited by those terms. Other filtering options are search zones. The zones can be filtered by Global Navigation terms, allowing users to search each zone provided by Global Navigation sections.
Critical Recommendations & Design
To design the website architecture, we used a top-down organizational structure. Given the limited scope of information a school website needs to impart, we think a wide and shallow breadth and depth respectively is the best option. We recommend a global navigation consisting of "Home", "Courses", "News & Events", "About Us", "Admissions", "Contact Us", and "Covid-19 Information". As Rosenfeld, in Information Architecture: For the Web and Beyond, points out labels need to be representative, differentiate clearly, and focus on user needs (p. 139).
We recommend the local navigation for each section should be a mix of school specific language and familiar terms. As Rosenfeld describes, often in navigation the context of headings provides the user the information required to understand the labels, even if on their own they might not make much sense (p. 145). To keep the context clear, we recommend the labels be formatted as "Cornerstones 1, Grades 1&2" and so on. This allows for the culture of the school to show through, and also giving users sufficient context to find what they need.
Users are likely to need to access the site's information on their phones. As a result, we recommend that the website have Responsive Web Design elements built in.
A final concern we recommend be addressed is accessibility. We recommend the website conform to Universal Design Principles and take into account accessibility needs (Connell et al., 1997). We recommend that the site be compatible with visual aid readers, so that the visually impaired are able to access the site freely. We recommend that all the photographs have an alternative text function for the same reason. We also recommend that the fonts used on the site be friendly toward those with dyslexia (alternatively, there could be a selectable dyslexic font view). We recommend the website be keyboard responsive, allowing those with motor control disabilities to be able to access the website without the need of a mouse. We recommend, per the client's considerations, that options to change language from English to Chinese and/or Russian be on the upper right side of the website on all subpages as well as the homepage.
REFERENCES
Connell, B. R., Jones, M., Mace, R., Mueller, J., Mullick, A., Ostroff, E., Sanford, J., Steinfeld, E., Story, M., Vanderheiden, G. (1997). The principles of universal design. NC State University. https://projects.ncsu.edu/ncsu/design/cud/about_ud/udprinciplestext.htm
Rosenfeld, L., Morville, P., & Arango, J. (2015). Information architecture: For the web and beyond (Fourth). O'Reilly Media.
BENCHMARKED WEBSITES
Alexander Academy (A university transfer school, selected because it has an enrichment program.) https://www.alexanderacademy.ca/
Appleby College Enrichment Program (Selected because it is an Enrichment program.) https://www.appleby.on.ca/ourcommunity/enrichment
Arch Education (Selected due to it being an excellent example of what not to do.) https://www.arch-education.com/
Brain Power (Selected because it is an enrichment program.) https://www.brainpower.ca/
Flex Academy (Selected because it is an after school enrichment program.) https://flexacademies.com/enrichment/
Focus Learning (Selected because it is an enrichment school.) https://www.focuslearning.ca/
Harlington Upper School (Though it’s just a school website without an enrichment program, the subjects offered by the school were similar and the site itself had interesting navigation and search features.) https://www.harlington.org/
Olympiads School (Selected because it is a contest focused after school program.) https://olympiads.ca/
Rochester Community Schools Enrichment Program (Selected because it is an after school enrichment program.) https://www.rochester.k12.mi.us/about-us/departments/enrichment
Single Seed Micro School (Selected because it’s after school education, with a focus on liberal arts.) https://singleseededu.org/
Spirit of Math (An after school program that teaches English through Math. Selected because it’s an after school program, and an example of showing an unusual curriculum effectively through a website.) https://spiritofmath.com/programs/spirit-of-english
The University of Chicago (Selected due to it being a favorite design model of the client.) https://www.uchicago.edu/
Other Projects
A VR app that enables people to meet and interact with a higher degree of immersion.
How might we develop the first ever website of an enrichment school?
Redesigning McGill Information Studies Student Association's (MISSA) logo