SlaveFree Today:
A full website redesign using Mobile-first methods

iPhone X-SlaveFree Today Mockup.png
 

Objective:

A full site redesign using mobile-first methodology for desktop and mobile. Increasing users by way of making the scholarly website more accessible to common people, while retaining its scholarly tone. A rebranding effort to share improvements with stakeholders.

Stakeholder:

Jodi Henderson, creator of the website SlaveFree Today for the NGO of the same name. Acting as a global collection of statistics and scholarly articles on the topic of Human Trafficking in an effort to end the practice of Modern Day Slavery.


 

Constraints:

  • 2 weeks to complete redesign

  • Re-branding using colors that spoke to the global aspects of the site


    My role:

    • UX Research

    • Persona Building

    • Interviews

    • Lo/Hi-Fi Wireframes

    • Lo/Hi-Fi Mockups

 
Screen+Shot+2019-02-07+at+10.29.28+PM.jpg

We began the design process by each interviewing two or more of the former users of the website. I interviewed Lori Celaya and Davina Durgana both. They each wrote scholarly articles that contributed to the core information found on the site.

They felt that the site was easy to navigate, but that it could use a more transparent process of communicating when articles would be published and the steps involved in publishing an article on the site. The site needed to rebrand to become more accessible, but without losing the scholarly tone and they agreed that the introduction of iconography would be a good way of going about that.

 
I’m a door kicking policeman by night and a mild mannered college professor by day- Jason Wilkerson

Those interviewed had various relationships with fighting against modern slavery. Jason Wilkerson, a detective working in the human trafficking division, had a lot to say about the ways in which the site could be improved:

  • More accessible language used in the articles themselves

  • Easier means of finding the articles from the front page

  • A directory of people working in the fight against human trafficking

I handled the creation of the user personas for the site redesign:

I utilized the 4 main user groups for the site found in the interview with site creator, Jodi Henderson. The 4 user groups are Students, Front Line Workers, Government Agents, and Regular Citizens. Jason Wilkerson found himself suggesting the site to colleagues who find themselves suddenly working cases that develop into human trafficking situations, so the site needs to be accessible to people newly discovering these issues.

The student would need the site to be easily accessible via mobile, and have readily available to download articles. The government official would need the site to contain a directory of those working within the field. Each of the primary users brings a different need to the table, which is addressed in these personas.

 

Heuristic Analysis: what the site looked like before and why we had to change it.
The site was difficult to navigate as it originated. There were huge blocks of text and it was unclear which steps would take you to the scholarly article portion of the site, which is the highest priority of users coming to the site.

You would have to go into a completed unrelated area of the site in order to sign in and then go to a separate area from that in order to read the articles, which you can only download if you download every article in that section. Which could mean downloading 11 articles in order to get the information needed from 1. Using Heuristic Analysis we found the problem areas within the site in order to address and alter them for the redesign.

 

Description of Insights gained from C&C Analysis

From our various C&C Analysis we found that SlaveFreeToday differed from other scholarly journal sites in these main ways:

  • Search filtration wasn’t utilizing the scholarly articles, but instead unrelated media on the site. Differing from other sites.

  • Downloadability: Other sites allowed you the ability to download as an HTML or Pdf

  • Share Function: Other sites allow for sharing the articles

 

Information Architecture: We as a group spent 2 hours discussing in detail each of the various functions of the site in order to finalize a specific structure for the redesign.

We whiteboarded the ideas out and went through each considering the needs of the 4 User Personas and came to an agreement on a more functional site structure.

One that prioritized the scholarly articles and also included the directory.

 

Explanation of the Jounry Map in bullet form

  • Jalisa North opens SlaveFree Today

  • She can’t find the Journal of Modern Slavery

  • She attempts to use the sitewide search function to find an article on ‘Sex Trafficking in East Asia’

  • The search results aren’t giving her the article

  • She finds the Journal, but has to download all 15 articles in order to get the 1 she needs for her assignment

  • She leaves the site and goes on Google Scholar instead

Screen Shot 2019-02-07 at 10.28.16 PM.png
 

The wireframing process was full of learning. We’d all had very little experience using the program Figma, but came together to create 120+ functional wireframes of the mobile and desktop versions of the SlaveFree Today website.

Mobile functionalities like the hamburger found at the upper left and the prompts to sign in and donate were changed with the Hi-Fi wireframes.

These are the some of the lo-fi wireframes here.

 

Usability Testing and changes made:

  • Changed the hamburger menu button placement and search bar

  • Changed the Search function and added filters

  • Changed the NGOs to Organization and added filters in that search

  • Added an option to change calendar view to list view

  • Made the Call to Action button for sign up clearer and more prominent

  • Added icons to make the page more visually appealing

 

when deciding the mood board and brand guidelines we utilized what was discussed with the stakeholder during interviews:

“Not to use college colors or colors that would indicate a specific country allegiance”

Keeping these ideas in mind we went with a global color scheme, the colors of the planet, and we focused on typography that would be easy to read on a mobile device. Roboto Bold, Open Sans Light.

Screen Shot 2019-02-08 at 2.08.56 PM.png
 
 
Screen Shot 2019-02-08 at 2.13.32 PM.png