Global Crossroads Study Abroad Blog Redesign

Glob­al Cross­roads is a blog that aggre­gates posts from the trav­el blogs of Uni­ver­si­ty of Min­neso­ta stu­dents who are study­ing abroad. The web­site is man­aged by the Learn­ing Abroad Cen­ter at the Uni­ver­si­ty of Min­neso­ta. As a part of my graph­ic design intern­ship, I was the project man­ag­er of the stu­dent blog redesign and migra­tion.

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

Before

It had been a few years since the blog had been orig­i­nal­ly cre­at­ed and it was over­due for an update. We decid­ed to update the style, but we also want­ed to migrate the blog from a Word­Press host­ed blog to a self-host­ed blog. This would allow us to do more cus­tomiza­tion with the code and plu­g­ins, ulti­mate­ly allow­ing us more con­trol and unique func­tion­al­i­ties. Below is how the blog looked before the redesign. It was very nar­row (only 700px wide!) and the orga­ni­za­tion and nav­i­ga­tion of the site was a lit­tle con­fus­ing. You can view the old Glob­al Cross­roads at: http://​umabroad​.word​press​.com/

After

For the new design, we want­ed to open up the page a lit­tle more with white space and clear indi­ca­tors of orga­ni­za­tion. We put in a locked, hor­i­zon­tal nav­i­ga­tion with links to an about sec­tion as well as the 4 regions and their giv­en pro­grams.

Below the nav­i­ga­tion, we put a large space for a fea­tured post and pic­ture. This space is updat­ed week­ly and allows the Learn­ing Abroad Cen­ter to fea­ture par­tic­u­lar­ly inter­est­ing blogs or blog­gers.

After the fea­tured post sec­tion we added the blogroll. We want­ed read­ers to be able to quick­ly dis­tin­guish which posts were from which coun­tries, so we used the Learn­ing Abroad Center’s region col­or-cod­ing sys­tem to col­or-code all of the posts. Orange tabs are Africa & The Mid­dle East, blue tabs are the Amer­i­c­as, green tabs are Asia & Ocea­nia, and tan tags are Europe.

Next to the blogroll, we added a side­bar with search, social media icons, a list of stu­dents cur­rent­ly study­ing abroad, and a google map indi­cat­ing where posts are com­ing from. For the google map, we tag each post with a geolo­ca­tion so that when a page is loaded, any posts dis­played on that page will show up on the map, which is pret­ty cool when you start get­ting into spe­cif­ic cat­e­gories or search­es.

The new Glob­al Cross­roads can seen at: http://​umabroad​.com/

Gallery

Below is a gallery with more images of the final web­site and the web­site before the redesign as well as process images from through­out the project as we cre­at­ed wire­frames, mock-ups, and final mock-ups.