Neuronline Redesign— UX for Non Profit

Sandeep Jagtap
Oct 31, 2017 · Unlisted
http://neuronline.sfn.org (Actual vs Redesigned)

A bit of background

In summer’17, I worked as a UX designer for the Society for Neuroscience (SfN) — a non-profit organization of scientists and physicians devoted to understanding the brain and nervous system.

Kickoff

At the outset of the internship, I did not have specific goals except a very broad mission — to improve the user experience of Neuronline website. Hence, I decided to talk to stakeholders responsible for success and failure of Neuronline to understand their priorities. I also interviewed content creators and community specialists involved in writing articles and talking to site members respectively.

Exploratory Research

I created one-page research plan to identify the strengths and weaknesses of the Neuronline website and to identify user’s motivation, expectation, and context of use. The plan was to talk to at-least 10 neuroscientists and observe them using the Neuronline website. Instead, I got five in-house neuroscients, as members were hard to reach in the timeline of my internship project. It was more than enough for kick-off.

Discovery

Quotes from user interview

Alarming page loading speed

Without exception, every participant complained about the home page loading speed of the website. The average page load speed of Neuronline homepage was around 16 seconds.

Neuronline Speed Test using https://testmysite.thinkwithgoogle.com/

Poor reading experience

“Annoying! It feels like a virus pop-up. Do not bother me while I am reading” said young neuroscientist during a session.

Pop-ups on Neuronline Site

Inability to find Content

Perhaps the most severe issue of the site was the inability to find content on the website. Even the content creator themselves were facing difficulties to find a specific article on the site.

Google search over inbuilt site search

Exceptional quality of content

I found an overwhelmingly positive response for the quality of the content on the website. The depth and breadth of topics covered by Neuronline were absolute gems for Neuroscientist. However, it remained unexplored. “There is tons of great content available, but no one knows about it,” said Digital Strategy Manager.

Deeper Insights

As I investigate these issues further, I found more an more supporting evidence and reasons to user’s frustration and behavior.

Web Performance

A snappy user experience beats a glamorous one -Jakob Nielsen

The page loading speed of 16 seconds was beyond acceptable. I used Chrome Dev tools and PageSpeedInsights tools to diagnose it further.

Inspecting https://neuronline.sfn.org/ using Chrome Dev Tools

Reading Experience

The articles on site were intellectual and user attention demanding. But there was no effort made to facilitate the reading experience. Instead, users were distracted by annoying article recommendation pop-ups. Not just pop-ups the typography on the page was not reader-friendly.

Neuronline Typography; Image Credit: Google Design
Comments Section below article.
Homepage Article Card Layout

State of Information Architecture

Neuronline.sfn.org home page-desktop view

  1. Search is not just related to Neuronline. It searches across all the SfN owned site by default. A user had to uncheck all options, check Neuronline and perform the search again. And the results were still not accurate either.
Neuronline Search
Primary Menu

Revised Goals

Having spent 3 weeks of 9 weeks of internship, I had limited time left to make an impact.

  1. Improve reading experience
  2. Improve page loading speed
  3. Fix usability bugs

Introducing Solution

Home Page Web and Mobile View
(1) Home Page with Access to Events and Featured Articles (2) Mobile Hamburger Menu Interaction

Content Skeleton & Simplified Footer

Article Reading Experience

How I got there

Short term and long term plan and parallel working.

Performance UX

Improving page loading speed of Neuronline page was a tedious and lengthy process. I worked with tech team to investigate front-end code, server-side code and server configurations — authentication, database and content management system. Based on this investigation, implemented series of fixes.

  1. Optimizing images
  2. Caching static and most used content on the server
  3. Browser caching for returning users
  4. Removing pop-up recommendations from page loading flow
  5. Using Content Delivery Network
  6. Using ‘App shell’ and ‘Content Skeleton’ for graceful loading
https://gtmetrix.com speed test report simulated under stress conditions ( July 11, 2017 vs Feb 9, 2018 )

Information Architecture Redesign

Content Organization and Labeling System

Tree Test: As a part of the exploratory research, I had already conducted informal tree-testing, asking the participant to find a specific article on site. Most of the participant failed to locate article using primary navigation. I could not see any benefit of conduction additional Tree test. Instead, I conducted Card Sort to see how the users would group and categorize various content types on their own.

Card Sorting Exercise
1. Card Occurrence Count 2. Card Placement % 3.Normalizing Categories
  • Where cards appear by percentage
  • The number of unique cards in a category
Cluster Analysis Code ( Modified) Reference: UX Booth
1. Dendrogram Cluster Analysis 2.Dendrogram Simplified
Primary Menu Before and After
Secondary Menu Before and After

Home Page Structure

Based on user feedback and an overarching goal to promote discovery of diverse type content on site. I reorganized and removed certain sections on the homepage. Recent articles from all categories and collection were highlighted in a scrolling view. All unnecessary links and interactive element like the twitter feed, hamburger menu, old branding were removed.

Restructuring Home Page

Search

The search system is an essential part of information architecture and one of the key drive force of swift user experience.

Search Before and After

Closing notes

On 28th August 2017 — my last day at SfN, I presented the my work to Director of Information Strategy of SfN and SfN team. I left with plan for short term fixes and long term redesign plan for Neuronline.

Design war story

Like user research war stories of Steve Portigal, my design work at SfN is a design war story filled with a lot of lessons. Despite my best effort, I managed to accomplish a little of what I had planned. A good portion of the redesigned experience remained just a concept without execution.

Success bucket

  • Improved Web Performance
  • Improved Search Experience
  • Removed annoying pop-ups from home page
  • Created a short term and long term UX strategy for SfN
  • Demonstrate the value of UX to SfN execute. The team is working hard to bring UX culture at SfN.

Unlisted

    Sandeep Jagtap

    Written by

    Product Designer at Facebook | http://sandeepjagtap.com

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade