Grey Matters Journal
Improving Navigation Efficiency for 400+ Neuroscience Papers
Time
Dec 2024 - May 2025
(21 weeks)
Tools
Figma, Figjam
My Role
Product Designer
(Worked with 2 designers, 2 engineers, 1 PM )
CONTEXT
OVERVIEW - GREY MATTERS
Grey Matters is a neuroscience outreach organization founded by students @ University of Washington on the core belief that science education should be accessible to everyone, regardless of educational background.
Publishing a high-quality and free neuroscience journal every quarter
Foster the neuroscience community by conducting events across schools
THE CHALLENGE
Our goal for the project was to renovate the website so that it is fully functional with multiple purposes, from improving navigation of the application process, searching and reading neuroscience articles, and shopping experience across all types of users
Be intuitive to use for everyone, especially target demographics: general public, students, prospective members, and club leadership
Incorporate branding and effective user flow
Improve the accessibility of the site and its contents
MY ROLE
I led the design of the article searching and reading experience between Dec 2025 and May 2025 and collaborated with two other designers and one design lead on home screen, applications, and shop features.
In addition, I worked alongside engineers, leadership, writers, design & art team.
→ The app was shipped in Q4 of 2025 (currently in the implementation process).
KICK OFF
HYPOTHESIS
GREY MATTERS' READING PLATFORM WASN'T REACHING ITS FULL POTENTIAL
This caused readers to struggle to filter, navigate, and pinpoint the exact articles they needed. This gap in clarity complicated the reading experience and limited the platform’s accessibility.
Organized section
Vague arrangement
A neatly structured bookshelf with clear labels helps all readers. Those who know the exact book can grab it quickly. But for readers with only a vague idea, labels and sections provide the guidance they need. Without structure, they risk feeling lost, unsure where to start.
PROBLEM IDENTIFIED - CURRENT EXPERIENCE
TOO NARROW, TOO SHALLOW
As we ran a UX audit, we identified some pain points that make it harder for users to find what they need, including
Grey Matters' reading section
⚠️
The site relies heavily on the search bar, and users can only search articles by title.
⚠️
There are no filtering options available, which makes it difficult for readers to narrow down their search.
⚠️
The current browsing pattern is locked into a horizontal carousel, which creates unnecessary friction and discourages deeper exploration.
These limitations create fatigue, reduce accessibility, and make it harder for both new and experienced readers to find what they are looking for.
DEEPER INSIGHTS - SURVEY RESULTS
WHAT DID WE UNCOVER?
We first conducted a quick survey among 18 users consisting of students & leadership team. Time constraints limited the depth of the survey, but the key takeaway supports our hypothesis: There’s an opportunity to make the article-searching experience better aligned with user expectations, especially through guidance and categorization.
INSIGHT #1
Most users want to read articles every time they visit grey matters’ website
INSIGHT #2
Readers feel fatigue and overwhelmed when browsing articles
We need to reduce user fatigue by reorganizing and rearranging articles. This makes advanced searching and categorization features crucial.
REFINED PROBLEM STATEMENT
The pieces we gathered from UX audit and survey helped us to identify the main problem we need to solve
How might we improve navigation of the article-searching experience so that it also enhances the reading experience among users from all backgrounds?
USER JOURNEY MAP
DECLUTTER THE EXPERIENCE TO SUPPORT CONFIDENT DISCOVERY
To start, we created two personas and mapped their journeys to understand the end-to-end user experience. This allowed us to identify pain points and opportunities, ensuring that our final design enhances the experience and drives engagement.
USER FLOW
EXPLORING BEYOND THE EXPECTED FLOW
Next, we created an end-to-end user flow, mapping the journey from searching for an article to completing the read. This helped us uncover alternative user paths to enhance the experience and think more comprehensively, ensuring every step feels intuitive.
DESIGN GOALS
FROM CONCEPT TO CLARITY
We finally gained a clear understanding of users’ needs and opportunities, and decided to direct our focus toward the goals of ideation and prototyping, including
Improve navigation (searching & reading experience) so it reduces user fatigue and boosts engagement
Improve accessibility so all users/readers have equally intuitive navigation and enjoyable reading experience
Improve consistency of visual branding system to reduce boredom among users = read for fun!
KEY FEATURES
By synthesizing user insights, secondary research, the distinct needs of our two main user groups, and our chosen design direction, we identified the following key features as critical to the product:
Organized and structured filters for an easier, more straightforward article-searching process
Neat and well-organized article layouts with just the necessary information, avoiding reader overwhelm
Accessible, inclusive, and seamless experiences across the article-reading platform
MY APPROACH
VERSION 1
VISUALIZING THE ARTICLE HOMEPAGE
HOW DID WE GET THERE?
ITERATION #1: HOW TO PREVENT USER FATIGUE?
A MODULAR GRID LAYOUT REDUCES COGNITIVE LOAD
During weekly meeting with my design lead, we first considered a row-style grid, since it’s familiar to users. However, references from online libraries and job portals showed it felt too formal, text-heavy, and scroll-intensive , potentially overwhelming readers who only need key details to spark interest
Idea 1
Idea 2
I chose to go with Idea 2
Reasons:
The bento & modular grid style avoids excessive information and scrolling
It effectively showcases article posters, enhancing visual appeal.
ITERATION #2: OPTIMIZING SIDEBAR FILTER
SEPARATING GENERAL AND ADVANCED SEARCH STREAMLINES NAVIGATION
Next, we switched gears into focusing on the filter box, which was a key element to improve navigation and article searching. Our challenge was balancing the needs of expert readers (with deep scientific backgrounds) with those of general readers who prefer straightforward options.
ROAMING TO DIFFERENT PERSPECTIVES
To guide our decisions, I framed different usage scenarios:
By imagining multiple scenarios, I was able to identify and categorize filter components, prioritizing them from highest to lowest based on readers’ needs and experience levels.
SEPARATING GENERAL AND ADVANCED SEARCH STREAMLINES NAVIGATION
Next, we switched gears into focusing on the filter box, which was a key element to improve navigation and article searching. Our challenge was balancing the needs of expert readers (with deep scientific backgrounds) with those of general readers who prefer straightforward options.
SOLUTION
BALANCING SIMPLICITY & PRECISION
By visualizing different scenarios, we realized the components must strike a balance, which supporting novice users with simple, non-overwhelming filters while also providing advanced users with the depth they need for article searching.
General Search
For broad, quick navigation without requiring detailed input
Advanced Search
For users who need more precise results (e.g., filtering by publication date range, specific tags, or research focus).
DESIGN DECISION
This iteration clarified the separation of general vs. advanced needs, keeping the general search simple and approachable while still providing advanced readers with enough depth to find exactly what they need.
VERSION 2
OPTIMIZING SEAMLESS READING EXPERIENCE
HOW DID WE GET THERE?
ITERATION #1: HOW MIGHT WE ENSURE AN INCLUSIVE READING EXPERIENCE?
EMBRACING ACCESSIBILITY & INCLUSIVITY IN ONE PACKAGE
During user testing, both students and leadership members suggested the option to read articles in multiple languages. This sparked a broader conversation about how inclusivity and accessibility could complement each other rather than stand alone.
We approached this by treating accessibility and inclusivity as one package, where one enhances the other. Inclusivity means readers from diverse backgrounds can engage with the content, while accessibility ensures the experience remains comfortable and barrier-free.
KEY FEATURES EXPLORED
To give readers control over their reading experience, we introduced a toggle feature that allows users to switch both language and font seamlessly. This ensures personalization without overwhelming the interface.
Font swatch choices → enabling multiple reading styles at once, including:
Standard – neutral and widely familiar
Professional – inspired by digital news and magazines for a more formal feel
Dyslexic-Friendly – inspired by Kindle and Wattpad, designed with clearer spacing and letter distinctions.
LITTLE CHALLENGE
STEP INTO THEIR SHOES
One of our main challenges was selecting a font that reduced confusion between commonly misread letters (e.g., b/d, p/q, m/w, u/n).
Readers with dyslexia often struggle with letter pairs that look too similar
FINAL DECISION
SAME ARTICLE, MULTIPLE EXPERIENCES
Through font exploration and comparison, we selected a typeface that balanced readability with a relaxed feel, providing adequate spacing and clear letter distinctions.
Our final selection included three fonts, chosen to balance readability, accessibility, and variety, giving users more flexible reading experiences
Neutral and familiar, suitable for general readability.
More formal tone, inspired by digital news and magazines
Balanced spacing, clean letterforms, lightweight and modern design.
ITERATION #2: HOW MIGHT WE MOTIVATE READERS TO KEEP EXPLORING?
RECOMMENDATIONS DON'T NEED TOO MUCH INFO!
In the midst of the prototyping phase, we ran a quick survey to gather early impressions. 13/18 of our participants mentioned they were most interested in exploring articles from the same issue after finishing one.
This insight shaped how we approached article recommendations at the end of the reading section. Instead of overwhelming readers with too much detail, we focused on clarity and motivation to keep reading.
THE CHALLENGE
THREE SIMPLE CAROUSELS INSTEAD OF ONE OVERLOADED ROW
Our first iteration displayed recommendations in a single row with extra details. However, this felt heavy and distracted from the reading flow.
Iteration 1 - Overloaded row
We first tried a single carousel row that included a lot of text details alongside the posters. This made recommendations feel dense and distracting, breaking the reading flow.
Iteration 2 - Three Rows of Minimal Posters
Next, we stripped the design down into three separate carousels using only poster placeholders. Each row focused on a different type of recommendation:
From the Same Issue – carousel of all articles belonging to the same publication issue
From the Store – suggestion to purchase the physical issue for offline reading.
This approach improved clarity but felt too minimal and detached. The posters alone didn’t carry enough information to guide the reader.
Iteration 3 - Embedding info inside posters
We then collaborated with the art team to reimagine the posters
The challenge was:
FINAL DESIGN
By trimming excess detail, reorganizing recommendations into three clear categories, and working with the art team to create compact posters, we motivated readers to continue exploring while maintaining a clean, lightweight design.
WHAT I'D DO DIFFERENTLY…
Here are things I learned and what I would do if I have more time…
GET MORE IN TOUCH WITH THE USERS
During the project, most of our testing involved the leadership team and internal stakeholders, since their deliverables were crucial. While this gave us useful feedback, I wish I had more time to test directly with readers to gain deeper insights into how they would use the reading feature. We once considered recruiting readers through social media, but time and stakeholder priorities shifted our focus.
FINDING MIDDLE GROUND
This project pushed me to think both critically and creatively as a designer. I grew to enjoy the iteration process, especially prototyping microinteractions. At the same time, I learned that even small details (like a language toggle) can be complex for developers to implement. This taught me to compromise, understand constraints, and accept that the final product may not always be 100% perfect.
BONUS
Biweekly design critique sesh w/ my design team & developers!!
Brainstorming our plan for post-winter break