Background

Words Without Borders is a popular literature website that takes all sorts of foreign literature and content and translates them for English speaking readers. 

I was hired on as a UX designer to not only drastically update the user experience and visuals of the site, but to also merge the "casual" reading site (https://www.wordswithoutborders.org/) and the "Learn" site (https://wwb-campus.org/). 

These were literally two different sites that were geared for different users that needed to be combined into one. 

Wireframes

A Sr. UX researcher and I first set out to understand a casual Words Without Border's reader. After creating a site map of the current site, we identified where our users spent the most time on the site (Homepage, Article Page, Search Page).  These would be the focus of our early wireframes.

A brand new homepage:

Through competitive analysis, and existing user feedback we created a brand new homepage layout with several exciting features that help a reader... 

1.) Quickly dive into content 

2.) Get pleasantly ushered from one piece of content to the next, with minimal decision  making.

Click below to see full Desktop Homepage

Our team had successfully created a brand new homepage experience that has proven to accomplish our original goals (thru user testing).  While our stakeholders had a lot of essential content that needed to be included on the homepage, we were able to take a massive amount of content and distill it into a relatively simple layout.  The main takeaways from the homepage, are the large, graphic features. This allows a user to dive right into the content without delay, but also summarizes, and categorizes the content within the feature's thumbnail. 

Speaking of categorizing... This proved to be the MAIN challenge for our UX team. There are so many hundreds of different ways to tag and categorize each piece of literature.  We needed a way to visually tag each piece.  On the homepage the content is tagged with "Learn Content," "Multilingual" or "Multimedia." "Learn" content being the the content that was formerly only included on the Wordswithoutborders.org site.

Article Pages

Once a reader has selected an article to read, they are brought to a brand new page with a comprehensive "landing" portion included to give them the essential information about the literature they are about to read.  The main takeaways from this Article pages are...

1.) Synopsis, Author and Author blurb.

2.) Further tagging that is now clickable...  Country, Theme, & Genre

3.) A "learn" resources toggle that activates a drawer with the additional content formerly only included on the .org site. This is only displayed if the article is a "Learn" article.

Search Functionality

Obviously it is important for any site with a lot of content to have a very robust search function. We were able to really pinpoint exactly what a user would need if they were to take the time to refine their search.  

A new custom Nav

Our next task was establishing a new navigation that is able to contain the enormous amount of literature.  The "READ" tab went thru several iterations with our clients. On the previous site, there were several redundancies and no clear hierarchy. Here we have created a clear hierarchy that adheres to our (Country, Theme, Genre) tagging system. 

End Product

Over the course of 5 months we re-created the entire Words without Borders website.  The previous website as well as the "Learn" website has now been merged into one seamless user flow.  Our wireframes have been handed off to a UI design studio to finish the job.  While I was able to showcase the most important screens, I also designed several tertiary pages for the site, as well as responsive mobile. Please see below for the entire Desktop and Mobile wireframes.

Thank you, and Godspeed.