LIVE WEBSITE
01 — Navigation & Footer
Brand identity: bringing Grey Matters to life
The redesigned nav resolves the original Navigation Overload problem directly, competing menu items collapsed into five clear categories, with dropdowns that group related pages instead of listing them flat. "Donate" stays visually separated as its own pill, so it never competes with primary navigation for attention.
The footer organizes by audience, not by page type: Readers, Applicants, and Supporters each get their own column, so visitors can find what's relevant to them without scanning the entire site map. A clear call to join the mailing list sits separately from social links, keeping the one action that matters most from getting lost among icons.
REFLECTION
NEXT STEPS
With the main structure validated, the final step was implementing the visual brand identity distinct enough to feel like its own
FINAL DESIGN
LOGO
COMPONENTS
COLOR PALETTE
Working on Grey Matters outside of a class structure, taught me how to drive a redesign end-to-end without an external syllabus dictating the process. As one of my first big design project from start to finish, I leaned on technical skills I hadn't fully practiced before, building with auto-layout and grid systems made my designs noticeably more consistent and structured, and prototyping interactions forced me to think realistically about how someone would actually click through the navigation, not just how it looked in a static frame.
The bigger shift was in how I approached the problem itself. Instead of jumping straight into screens, I let research and stakeholder feedback shape every decision, from navigation hierarchy down to which page answered the initial questions first. That discipline, sitting with the problem before automatically jumping to a solution, is the part of this project I'm most proud of, and the part I plan to carry into every project after this one.
The desktop redesign established the visual identity and information hierarchy, but translating that experience to a smaller screen brings its own challenges that we are still exploring, particularly around how the navigation collapses, how imagery scales without losing impact, and how "Get Involved" stays the clear priority even with far less space to work with. The next phase is dedicated mobile usability testing to confirm those decisions hold up the way the desktop research already has.
This is the page that answers the question that users originally couldn't find an answer to in ten seconds: what Grey Matters actually is, who runs it, and why it matters. Mission, team, and credibility signals are surfaced immediately, so visitors don't have to dig through the site to decide whether this organization is worth their time.
What I learned
Improving mobile design experience
03 — About Us
The original homepage led with an event leaving users without the context for what Grey Matters is. The redesign reverses this order where purpose comes first. "Get Involved" is the most visually prominent action and event promotion moves below the fold, where it supports the page rather than competing with it for the first impression.
02 — Homepage
"It doesn't feel like a 'college club' website — it gives a strong representation of the establishment and sophistication of our organization"
What feedback confirms and what it asked for
Based on a participant's feedback on the navigation ease
"It looks very clean and more organized than the original. Might be good to add some of our color or website-specific art."
TAKEAWAYS
"It seems much more easily navigable compared to the current one. Splitting content into tabs makes it more user friendly."
Improved sitemap
Mapping a prospective member's user flow
This navigation sitemap allowed me to flesh out the organization and structure of the site both for the navbar and footer, but also for laying out what would go into my home and about us page. Each page is mapped with defined content sections so every visitor can orient quickly and reach the 'Join' path without friction.
This flow maps the critical path a prospective member takes from first landing on the site to submitting an application. Every step reflects a deliberate structural decision, where the goal was to reduce drop-off by making each step feel like a natural next action rather than a search to find the right piece of content.
IDEATION
We focused on clarity, hierarchy, and action
The original site buried the most important content under competing navigation and a generic layout. Three areas drove every decision:
→ Simplified Navigation - Elevate Donate and Apply as primary actions.
→ Content-First Homepage - Lead with articles and community energy before asking anything of the user.
→ Defined Page Hierarchy - Every page has one job and a clear next step.
Wireframes to Iteration
PROTOTYPING
02 ABOUT: Reorganized into three clear zones
->
03 NAV & FOOTER: Consolidated information down from 10 items, exemplifying the stand-alone CTA
->
01 HOME: Reducing oversized search with welcome message and article carousel
->
Insight on our mid-fidelities
Target Participants
We targeted Grey Matters applicants and leadership to conduct usability testing and gain insight on our developing designs. Applicants understood the different facets of work that went into Grey Matters which allowed for us to ask questions outside of the application process.
Strongly disagree
The strongest signals were also the clearest for my navigation design: Organized and Professional drew the highest "strongly agree" counts, and Informative scored high agreement overall, confirming that the redesign's core navigation simplification and visual identity work were landing as intended.
USER FEEDBACK
Disagree
Neutral
Agree
Strongly Agree
User persona
To answer my question, I built a persona grounded in our stakeholder interviews and analytics findings — representing the student who's curious about Grey Matters but has never engaged with undergraduate research before, and needs the site to make its case fast before she moves on to the next option.
What does a prospective member need to see in the first 10 seconds?
To validate these problems and inform the redesign strategy, we conducted stakeholder interviews, analyzed other university Grey Matters websites, and reviewed Grey Matters' 2024 analytics data. Our research revealed:
Every decision flow starts at the core of navigation revealing only what is essential. From our research, I started by asking a specific question to help guide the flow for how I was going to encounter the redesign process:
INSIGHTS
DESIGN DIRECTION
Navigation Overload
10 competing menu items with no clear hierarchy created decision paralysis. "GET INVOLVED", the primary action for prospective members, was buried among lower-priority links like "UPDATES" and "READ!". Social media icons cluttered the navigation, and 5 dropdown menus competed for attention.
Problem breakdown:
Visual Dullness
Bland and uninviting design failed to engage prospective members. The gray background, generic tagline, and oversized search bar made the site feel institutional rather than welcoming. No imagery or visual elements communicated Grey Matters' energy.
Unclear Information Hierarchy & User Flow
03
01
02
No clear pathway to membership. Event promotion dominated the homepage while critical "What is Grey Matters?" and "Why join?" messaging was missing. Prospective members couldn't quickly understand the organization's value or how to get involved.
GREY MATTERS NEUROSCIENCE JOURNAL
ROLE
UX Designer - Nav.
System & About Page
Dec 2024 - Jun 2025
Eden McPeak
UX Research
Brand Identity
Dev Collaboration
Usability Testing
Prototyping
Antares Yuan
Cindy Isabell
Beta Chen
DURATION
TEAM
RESPONSIBILITIES
Grey Matters: Website Redesign
THE CHALLENGE
Understanding what wasn't working
Before, the original website overwhelmed users with choices and lacked visual appeal, preventing members to want to apply or engage in the articles.
Analyzed Other Grey Matters Chapters:
Insight: An opportunity to lead with a cleaner, more intuitive approach
4-6 primary nav
Event visibility
Clear "Join"CTAs
Unclear nav structure
Incomplete sites
Inconsistent branding
COMPETITIVE ANALYSIS
STAKEHOLDER INTERVIEWS
"What do prospective members need?"
Insight: Attracting members = Top Priority
Organizational goals
Branding guidelines
Content priorities
Top Most Visited Pages (Google Analytics Grey Matters Page, 2024)
Insight: Users are unclear where things are placed on the website
Homepage
Events
About Page
Articles
Application Page
ANALYTICS REVIEW
<- BACK
