Julia Dearden

Gaps in the Study Abroad Experience

At Connecticut College, more than 70% of students study abroad, yet there was no way for prospective students to browse for programs and their offerings besides endless scrolling on the college website. Along with a tedious search process, there was no way to learn about study abroad programs from prior students’ experiences - which was a major gap in the program finding experience (because after all, students will tell you much more than the program summaries will).

Talking with Students

We completed interviews with students and asked open-ended questions around their motivations for studying / not studying abroad. Our insights from the student interviews led to us to designing a map-based solution that captured two different components to the experience: one to explore program information, and another to explore past student information.
‍
To understand what information students needed from both a program perspective and a prior-student perspective, we developed a research plan and implemented a recruitment strategy for students who had previously studied abroad that allowed us to get feedback from a mixture of majors, minors, and abroad experience.

Finding 1: Students were interested in hearing about if prior students' had their credits accepted for majors / minors

Finding 2: Students wanted to visually see where programs were on the map and easily compare

Finding 3: Students wanted an overview of the country / city, as well as the program itself

Finding 4: Prior students wish that they knew about the pros and cons of home-stays vs. apartments, and which areas were safer than others

Powering our App

We put information from our user interviews with prior study abroad students into a SQL database as a way to organize our data, and to allow us to dynamically populate student information in our app.

We created another SQL database that we populated with study abroad program data for all Connecticut College-accepted programs. Information included accepted majors, accepted minors, program size, language, location, and more.

Testing with Students

To come up with cheap initial ideas, we used the Crazy 8 sketching method. After combining our design ideas with our research findings and available data, we created low-fidelity wireframes and translated them into high-fidelity mockups and prototypes in Sketch. We each developed three iterations of prototypes, conducting A/B testing with groups of 10+ students to continuously refine our app’s experience through visual and interaction design changes.

A note: if I could re-do this part of our process, I would have advocated for us to test using our low-fidelity designs as opposed to high-fidelity mockups. This process "fail" served as a great learning opportunity for my future projects! :)

A1 and B1

A3 and B3

Student-Ready Design

After conducting our third round of A/B tests, we had our final high-fidelity mockup. We developed the app using HTML, CSS, and JS, and MapBox, and dynamically populated content from our SQL databases through using PHP for the modals and for the pin locations on the map.

The impact: we presented our final app at the Walter Commons at Connecticut College, where +1,500 students were able to use the app, and we received positive feedback from both the study abroad office and students!

Same App, Different Design

While reflecting on my past design projects, I thought that this app would make a great opportunity to showcase my improved design skills. I re-vamped the design we created, specifically focusing on these areas:

Refining visual design

Improving information architecture and hierarchy

Enhancing the search functionality

I created screens to showcase when the user searches using the search bar, and when the user explores on their own through clicking pins on the map. I designed the modals in a way where if I were to update our code, it would be straightforward and scalable. Check out the new and improved design below, and view the prototype here!

Reflection

It's so important to provide multiple ways of achieving the same thing, from an ease of use perspective and for accessibility purposes. In this app, students needed the flexibility to explore program options based on criteria, based on no criteria, through a visual map method, through a search method, and get help when they needed it. This project served as both a great first-step into UX design back in 2019, as well as a fantastic way to exercise the UX skills that I've built since then.

For next steps, I'd love to test this refreshed polished design with CC students to determine areas of refinement and improvement, and see how time has impacted student needs (if at all).