BYUH MAPPER Design Concept
UI/UX Design
Inclusive Design
Case Study
Case study of redesigning an academic planner web app for BYU-Hawaii, using principles of inclusive design. The MAPPER's main function for students, staff, and faculty of Brigham Young University - Hawaii is to help coordinate the students’ academic course with the advisers and faculty.
BRIEF
MAPPER is an academic planning tool developed and used by the faculty and staff of BYU-H. The application is useful, yet the interface is not necessarily user-friendly. In this thesis project, the main objectives are improving user experience for diverse users and developing an intuitive and cohesive visual design system.
INCLUSIVE DESIGN
The main design consideration for this project was to make it a user-centered design by incorporating inclusive design principles.
Principles of inclusive design propose to seek points of exclusion, learn from diversity, and solve for one then extend to many, when designing products.
To understand the challenges that impede accessibility and usability from the users' perspective, I conducted research to identify mismatched human interactions with the web application.
The survey aims to find out the main goals of different users.
The questions were carefully formulated to avoid bias in the survey.
Some of the insights gained from the survey are:
1) Students' activity and expertise with the web app differs from the university staff.
2) Each type of the user uses the app to access specific information.
3) Some of the students cannot fully understand the interface's language, thus needing further assistance.
What makes BYUH unique is that 46% of its student body is made up of international students, from 70 countries.
To make MAPPER more intuitive for multiple users, the following are added to increase functionality to the academic planning process.
First, is improving language accessibility for users who speak English as their second language, by adding language options.
The main challenge for student users of MAPPER was that the web app was designed to cater faculty needs and expertise, creating a mismatched experience for other users.
To address this, I designed a log-in page that identifies the user as student or faculty. Once identified, they are redirected to an appropriate page, that shows relevant information. In this case, students are brought to Timeline, while faculty to students' profile.
VISUAL DESIGN
For the user interface design, I created a mood board, consisting of different inspirations of existing web designs and web apps, in order to develop a design system.
The appearance of the web app would be designed using modern contemporary aesthetics and interactions to improve navigation and presentation.
DESIGN SYSTEM
Another objective of the project is to organize information using proximity and Gestalt principles.
In order to design an intuitive user interface, the organization of information and how it's being presented to the viewer should be relevant and concise.
Wireframes were designed to organize information and improve the usability of the user interface.
COLOR
BYU-Hawaii's main color is dark red. I used this color as the main accent color for the visual language system, to simplify the user experience.
The overarching visual language system should be able to convey valuable information to different types of audiences or readers.
The re-imagined user interface and a contemporary visual design system, together with inclusive design principles, will help the new design of MAPPER become more intuitive, accessible, and appealing to users.
USER TESTING
The redesigned interface was then tested by selected users. I personally observed how they interacted with the product, while at the same time asking them for feedback.
ANALYSIS
As I was analyzing the responses, I realized that since the staff are using MAPPER for their work, they have different expertise in using this tool, as compared to students. Thus, giving them a different user experience.
Design is so much more than making things look appealing. That was the purpose of this thesis project - to help people understand how design helps address differences, by seeking out areas of exclusion and improving the human experience.
