Neuronline Redesign— UX for Non Profit
--
A case study of redesigning neuronline.sfn.org — a content heavy website used by neuroscientist community. Work undertaken during summer internship at Society for Neuroscience(SfN).
The Neuronline website has roughly 5,000 articles on the Internet serving 40,000 members with 1,000 users across 90 countries online every day. The site has an active community neuroscientist.
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.
For the first time, I worked as a solo designer for the organization fairly new to the concept of user experience with small in-house technology team. I worked alongside the Director of Information Strategy of SfN.
Over the span of 3 months, I did user research, performed usability assessment, enhanced site performance and redesigned the information architecture of Neuronline website.
On 28th August, I handed off the research and deliverables with short terms and long terms UX plan to the stakeholders.
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.
Based on the interviews and few rounds of the cognitive walkthrough, I realized that website performance and inability to find the relevant content on the site is a major concern. Hence I started off with doing exploratory research.
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.
The typical user study was 45 minute long, starting with a brief interview, demo of their daily tasks on the website followed by a short survey assessing website’s usability, strengths and weakness.
Discovery
The results confirmed my assumption about performance and information architecture. I also discovered lots of usability along the way.
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.
Google standard test using TestMySite tool estimated around 32% visitor loss due to website speed alone. If not for the captive user base, Neuronline would have had a hard time retaining any site visitor.
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.
It was a response to recommended article pop-ups used to encourage users to read more articles. It was doing exactly opposite of it.
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.
When I asked participants to find a specific article, they used Google Search instead of 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.
I found that the site has issues terrible TTFB and quite a few 404 requests. The 80% of the issue was with server architecture than mere a front code.
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.
The average line length — the horizontal distance of a block of text was around 100 Character putting in a danger zone. The spacing between a block of text and line of text was identical making it difficult to read.
Readers could not see the discussion about the articles on the article page instead they have to log-in to separate discussion forum to comment on the article.
Homepage with inconsistent card layout had a poor contrast to clearly identify a number of comments and likes.
State of Information Architecture
Neuronline.sfn.org home page-desktop view
On a cursory look, the site appears to be well organized but upon investigation, I found severe problems. let’s check one by one from the top.
- The hamburger menu is not related to Neuronline. It’s a design element copied from sfn.org the parent website: www.sfn.org
- 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.
3. Primary navigation menu links did not make sense to users.
None of the user used either “Explore by Topic” or “Explore by Audience” as these categories did not bring content correctly and categories were ambiguous. Many preferred “Featured Collections” instead which was manually organized by content creator which I suspect users were using as an escape from primary menu categories. Also, not a single user noticed “member directory” link the primary menu. Same with the secondary menu, as the number of comments and likes on articles were less, it was not helpful to bring popular content on the site.
4. Most of the articles are written by staff, so a big call to action section was not necessary
5. A bulk of homepage was allocated for tweets to which Neuronline is not associated.
6. The calendar events were not related to Neuronline.
The homepage design was far from the goal of attracting the user to explore, read articles and to take part in a discussion.
Revised Goals
Having spent 3 weeks of 9 weeks of internship, I had limited time left to make an impact.
My high-level goals were to:
- Redesign Information Architecture for better content discovery and search
- Improve reading experience
- Improve page loading speed
- Fix usability bugs
Introducing Solution
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.
- Fixing 404 Requests for unused fonts, scripts, and images
- Optimizing images
- Caching static and most used content on the server
- Browser caching for returning users
- Removing pop-up recommendations from page loading flow
- Using Content Delivery Network
- Using ‘App shell’ and ‘Content Skeleton’ for graceful loading
Not all the recommendations saw the light of the day, as they were either too big or too risky given the timeline of the project.
Nevertheless, we managed to improve the page loading speed.
It will be inane to take these numbers as an absolute measure of performance but one could confidently say from the performance trend that the performance was much better from where we started.
Information Architecture Redesign
Information architecture is the recipe for cooking good user experience.
For a content heavy website like Neuronline, a strong information architecture was vital. I started off with testing the content organization and labeling system of articles, followed by site search and homepage structure.
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 Sort: The card sort was comprised of 90–100 cards, each representing an article or event published on Neuronline.
Each card had a title, a short description of an article, and an index number for analysis purpose.
I conducted card sorting activity with 3 groups consisting of 3 participants each. Each group worked through cards and organized cards into groups that make sense to them. As a moderator, I interacted group at the beginning — for introduction purpose and towards the end — for discussing grouped cards respective labels.
At the end of the study, I collected cards in the order of their grouping for further analysis.
Data Analysis: To analyze card sorting data, I combined two methods: 1.Category analysis excel spreadsheet-Boxes and Arrows and 2. Hierarchical clustering analysis with R studio- UX Booth
Category analysis using Excel spreadsheet:
The Excel sheet category analysis requires you to input raw card sort data like categories and card placement for each category for all card sorting session. After normalizing category labels i.e. grouping and combining matching names, you can do basic analysis like:
- How often a card appears in any given category
- Where cards appear by percentage
- The number of unique cards in a category
After analyzing data, I found that 2 out of 11 categories had 100% match among all group while rest of the categories had varying match percentage. I could not see a clear picture of categories.
Hierarchical clustering analysis: For hierarchical cluster analysis, I created the data file containing all categories and corresponding card occurrence represented by 1 or 0 in row-column matrix from all the sessions. Following code takes the data file and with the help of hierarchical clustering algorithm find clusters of card grouped together across all sessions.
The result is dendrogram based on categories (number of clusters) provided by you.
Excel sheet analysis required me to judge data get a resultant category, but with help of cluster analysis, I could easily see the cluster of cards grouped together.
Redesigned IA
Navigation
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.
Search
The search system is an essential part of information architecture and one of the key drive force of swift user experience.
During user interviews, I’d seen users doing search twice as the site was bringing search results all SfN site instead of the site of origin which in this case was Neuronline. The result was delayed and inaccurate search result. This behavior forced users to abandon Neuronline search in favor of external Google search.
For many events, roughly 80% of the effects come from 20% of the causes — Pareto Principle
With a simple change in the code to check origin-site for the query, I was able to increase search performance drastically.
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.
However, I managed to get few things done.
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.
The main challenge was not just to redesign the best version of Neuronline website. It was not either to sell UX to stakeholders. It was to plan, manage and execute the change I was planning to bring given the time and tech resource at my disposal.
Congratulations for making this far! I hope that you enjoyed reading the case study as much as I enjoyed putting it together.
Let’s be friends. Connect me on LinkedIn and Twitter. Check out my portfolio at www.sandeepjagtap.com for more case studies.
I am looking for a full-time product designer role. If you are looking to hire one, I would love connect with you.
