CSUEB Study Abroad Program UX/UI
The final product, with optional banner for when applications are open and a brochure below summarizing the program.
The Problem
One of my professors, who was newly hired, wanted to create the university's first study abroad program, which would be run by the Communication Department. But he didn't have an easy way to manage the number of students who were interested and had questions. So I built a simple solution that he could edit in Wix to solve his needs.
The original website with small changes. Menu changed, background changed and experimented with a new logo. In the end students, when asked, preferred the text next to the logo and not below the image.
Strategy and Goals
The strategy was developed with the client. He wanted to create a website that was lighthearted and interactive, something that would appeal to college students. The goal was to provide students with an easy place to find more information about the program, and encourage quick sign ups. Additionally the professor needed easy management of student applications.
Research
I asked myself, the professor, and classmates what they would want to see on a study abroad website. Together we looked at the study abroad program at his former school, and saw a bland web page with tables, no photos and a wall of text. The features we developed came from speaking to other students within the department interested in the program. One of these features was a map of England, easy access to information on how much it cost, what classes you had to sign up for to go to London, where they would visit, and how to apply and what papers they needed to fill out.
Still very early stage mockup, experimenting with a map widget to demonstrate the breadth of the trip. Students loved the map's expressiveness but found it too small. They were generally still dissatisfied with the website layout, and didn't find it engaging.
Late stage, students prefer the larger map taking up the entirety of the initial launch page, and scrolling down to find the brochure. Ended up shrinking it a small amount because some students didn't know the brochure was beneath it and immediately navigated to a different page. I was still experimenting with menu font color and background.
Design
A previous student had developed a quick website for the professor but he didn't like the way it looked. So I iterated upon the existing color scheme, added more visuals from a previous trip the professor had done at his former university, and curated video testimonials from former students who had gone on the trip. And I set up an email forwarding service to send all digital applications to the professor's secondary inbox.
After I finished the design I had the student staff at the school newspaper look at it to see what they thought. I had them test on different platforms and the design proved to be responsive and worked on different devices. We also tested the website to two other large 100 student classes and the reaction was overwhelmingly positive.
Results
Spots on the study abroad trip filled up within a couple days of it opening. I helped the professor develop a banner to go on the front page to signal when applications are opened so students know when to apply. Since then I handed off the project to the professor to manage on his own.
