Manoa Study Abroad Central
Overview
Manoa Study Abroad Central is a web-based application that helps UH Manoa students discover more information about different study abroad programs at our university, developed with a few classmates from ICS 314, a software engineering course at UH Manoa. Since the three different study abroad programs offer various types of experiences and partner with numerous schools and regions, Manoa Study Abroad Central helps students figure out which program is best for them. Our platform includes several features such as adding a post about one’s study abroad experience, reading reviews from previous or current study abroad students, information about the three different study abroad programs, and numerous universities partnered with UH. This was my first, full-scale UX/UI and Software Engineering project.
Goal: Build a centralized platform for UH students to explore study abroad programs.
My Role: Designed program selection page, MIX information page, key UI page designs, and implemented front-end components using React and Bootstrap.
Initial Setup
By default when visiting the website, users are greeted by the app’s name, slogan, mission statement, and study abroad programs.
Program Selection Page Feature Development
Users can search for study abroad programs or countries using a dynamic dropdown system. The second dropdown updates based on the user’s first selection, and the search button directs users to the relevant information page.
- First dropdown selects either “Program” or “Country/Region”
- Second dropdown dynamically updates based on selection
- Search button routes user to the corresponding information page
Initial dropdown selection (Program vs Country/Region)
Program selection dynamically populates available study abroad programs
Country/Region selection updates dropdown with available destinations
MIX Page
The Manoa International Exchange (MIX) informational page gives a brief overview of the program followed by a link to the MIX homepage and a list of application requirements at the bottom of the page.
UI Refinement and Final Design
For the final week, I redesigned the app’s UI look. Although I mainly focused on the look of the Landing and Home pages, every other page on the website followed the same layout and design/color scheme. By researching examples of different travel websites, I used a CSS stylesheet and travel-themed components to create the website’s visual look.
Updated Landing Page
New Home Page
Learning Impact
Although I sort of knew how to use BootStrap React beforehand, this project has exponentially helped me learn more about the different features of BootStrap React, giving me hands-on experience. Though I struggled through it, I learned how to create complex web pages. This project has also shown me what it takes to create a well-functioning application and what goes on behind the scenes of websites I use daily.
Throughout the project, I mostly worked on front-end development and web design, which I enjoyed. As I was sort of interested in web design and front-end development beforehand, this project has furthered my interest in these two areas. In the near future, I hope to do something similar in my future career or internships.
Additionally, I enjoyed working on this website since I’m interested in studying abroad. When researching the different programs and countries I could visit, I wish I had a resource like this where the miscellaneous study abroad information was packed into one place. It would’ve also been nice if I could read about different students’ study abroad experiences instead of asking around and learning by word of mouth.