Global Crossroads Study Abroad Blog Redesign

Global Crossroads is a blog that aggregates posts from the travel blogs of University of Minnesota students who are studying abroad. The website is managed by the Learning Abroad Center at the University of Minnesota. As a part of my graphic design internship, I was the project manager of the student blog redesign and migration.

Below is a quick overview of the site before and after the redesign and migration. The gallery at the end of this post has more images of the final website and process work.

Before

It had been a few years since the blog had been originally created and it was overdue for an update. We decided to update the style, but we also wanted to migrate the blog from a WordPress hosted blog to a self-hosted blog. This would allow us to do more customization with the code and plugins, ultimately allowing us more control and unique functionalities. Below is how the blog looked before the redesign. It was very narrow (only 700px wide!) and the organization and navigation of the site was a little confusing. You can view the old Global Crossroads at: http://umabroad.wordpress.com/

After

For the new design, we wanted to open up the page a little more with white space and clear indicators of organization. We put in a locked, horizontal navigation with links to an about section as well as the 4 regions and their given programs.

Below the navigation, we put a large space for a featured post and picture. This space is updated weekly and allows the Learning Abroad Center to feature particularly interesting blogs or bloggers.

After the featured post section we added the blogroll. We wanted readers to be able to quickly distinguish which posts were from which countries, so we used the Learning Abroad Center’s region color-coding system to color-code all of the posts. Orange tabs are Africa & The Middle East, blue tabs are the Americas, green tabs are Asia & Oceania, and tan tags are Europe.

Next to the blogroll, we added a sidebar with search, social media icons, a list of students currently studying abroad, and a google map indicating where posts are coming from. For the google map, we tag each post with a geolocation so that when a page is loaded, any posts displayed on that page will show up on the map, which is pretty cool when you start getting into specific categories or searches.

The new Global Crossroads can seen at: http://umabroad.com/

 

Gallery

Below is a gallery with more images of the final website and the website before the redesign as well as process images from throughout the project as we created wireframes, mock-ups, and final mock-ups.