The Human Project Logo

The Human Project

Goal

Redesign the web experience for The Human Project to reflect the goals of the ambitious research study

Role

UX and Interaction Designer

Employer
The Human Project
Date Completed
October 2017
Website Link
Categories
  • UX Design
  • Website Design
  • Information Architecture
  • Website Security

Brand Colors and Fonts

#57068c

#FFFFFF

#000000

Montserrat

Identifying Problems

The first part of redesigning The Human Project website was to define the problems that plagued the then-current website*. Here is a consolidated list of those problems that would define our scope of work.

*Note: Previous website screenshots and data available upon request.

01.

Lacks proper structure and hierarchy,

  • Poor information architecture
  • Inconsistent visual styles and elements
  • Weak brand guideline adherence

02.

Lacks simplicity in terms of how a user understands the basic premise of the project,

  • The website is too textual in nature and drives away the feeling of warmth and human touch; factors that make the brand amiable and approachable, by being highly technical and scientific.

03.

Does not cater effectively to various kinds of audiences,

  • People from a general background, data scientists, researchers from various fields, etc. make a broad group of an audience whose needs are being neglected severely.
  • The above statement was validated by our surveys that asked people about what The Human Project was, and people often were not able to clarify the purpose of the project.

04.

Non-scalable and insecure backend,

  • Upgrading the software platform kept breaking the website.
  • There were multiple hack attempts including XSS and SQL injections along with constant probing by unofficial bots.
  • Adding new features and content was extremely hard and time-consuming.

These, among other minor problems, required the website to be redesigned from scratch as the project was gearing up for a full launch.

Background Research and Brainstorming

We started off with identifying the problems and from there on, we conducted a background research to see what are the core primary topics we need to cover. In a gist, following are the ones we identified,

  • The Human Project mission and purpose.
  • Core values as laid out by the Director of The Human Project.
  • Values in participants’ ethics and privacy.
  • Roadmap towards reaching The Human Project’s goals.
  • Setting up a stage for the Sentinel Group.*
  • Sharing articles that define a premise for the study’s success.
*Note: The Sentinel Group is a part of the study that was not approved by the NYU IRB, and therefore no details about this section of the website can be revealed as stated in the NDA.

Mapping the end-points

We laid out all the website end-points that had to be covered, the details of which are shown below in the coggle diagram,

Brainstorming

With a good amount of background research gathered, we started our brainstorming sessions about what the brand means and how it brings value to people’s lives, and then eventually drilling down page by page to cover all aspects of UX design, viz., visual hierarchy, information architecture, timed animations, etc.

Building Prototypes

From ideating and brainstorming ideas to create the website, we were able to strip down to the essence of each web page and started sketching out what the new website could take the shape of. Following are a low fidelity and high fidelity wireframes we came up with. The entire process had multiple iterations that were made from gathering feedback from various stakeholders of the project. Due to the nature of the project and timeframe allotted, external user research and feedback gathering processes were not feasible.

Lo-Fi Prototypes

The following prototypes were designed in Adobe XD. A simple prototype is available here.

Hi-Fi Prototypes

The following prototypes were designed in Sketch and prototyped in InVision. The prototype is available here. Due to Adobe XD being in Beta at the time, I had to switch from using Adobe XD to Sketch for a more refined experience and detailed design options.

User Flow for the website

Having gone through multiple iterations, our design reached a point where all the stakeholders had provided their feedback and all edits were implemented with the following user flow as the final one. However, this user flow may yet change depending on the further addition of features in the future.

Results

We were successfully able to redesign The Human Project website that addressed all the primary problems we had identified at the start of this process. The new website is highly scalable, does not break on upgrading software platform, enhanced with end-to-end web security protocols, has easily digestible nuggets of information that clearly convey the mission and purpose of The Human Project, separates the Research explanation from the more general functioning of the project, among various other tweaks and upgrades that put The Human Project on strong feet on the web.

The website received a huge amount of warm, heartful feedback from all stakeholders and our efforts were lauded in front of the entire staff. This project is a product of a two-man team who contributed solely towards the design and development aspects, while simultaneously managing multiple moving parts inside the project.