NEDA
National Eating Disorders Association
Role: Volunteer UX/UI Web Designer
Software: Figma & Adobe Photoshop
April 2025 – Present
Website Redesign
I volunteered to redesign parts of the National Eating Disorders Association (NEDA) website—an organization personally meaningful to me. NEDA offers critical tools and resources for individuals affected by eating disorders and their loved ones.
Working with Mission Initiatives Manager Mollie Schlapp-Gilgoff, we identified the homepage and Resource Center as top priorities for improvement.
The core problem:
"The website contains an overwhelming number of resources and categories, making navigation difficult and organization unclear."
Through a series of virtual meetings, design critiques, and iterative feedback, I created interactive desktop and mobile mockups for both pages, improving clarity, usability, and overall visual organization.
Desktop Homepage Redesign Mockup
Mobile Homepage Redesign Mockup
01
Redesign Ideation
During initial discussions with Mollie, I reviewed brainstorming notes from NEDA leadership to understand their vision. From this, I created a moodboard and style guide aligned with their goals, which informed my proposal for the initial homepage layout.
NEDA Team's Website Inspiration & Ideas
Mood Board
Style Guidelines
Initial Homepage Layout
Based on the overarching problem and the documents shared with me, I annotated the existing NEDA homepage, identifying the key focus areas to redesign.
Original NEDA Homepage with Annotations
Lo-Fi Layout
Hi-Fi Layout
Initial Resource Center Layout
In addition to the homepage, I redesigned the NEDA Resource Center, which suffered from overwhelming article lists and poor content organization. To improve navigation, I proposed a search feature with popular keyword suggestions and toggle options for “I want to learn about…” and “I am…” categories, allowing users to filter resources more intuitively.
Original NEDA Resource Center with Annotations
Lo-Fi Layout
Hi-Fi Layout
Updated Navigation Components
The top navigation and footer were two critical components requiring redesigns, as seen in the original website annotations. Below, I included a closer look at both.
Top Navigation Menu
Instead of a typical drop down menu, the NEDA team wanted to use a full-width list menu that opens on hover.
Footer
Compared to the original design, this updated footer is more condensed. The subscription signup is no longer separate, which preserves real estate. It also contains the menu items found in the top bar, permitting users navigate the site in another way. Finally, the contact information is displayed in shorter chunks, which is easier for users to read.
03
Mobile Redesign (Homepage)
Hamburger Menu – Main Navigation
The expandable hamburger menu contains the four main desktop items with the submenu items nested in accordions. Instead of a horizontal layout, the items are stacked vertically. A hamburger menu is a familiar design pattern, as repeated exposure has allowed users to learn it indicates navigation.
Footer
Compared to the desktop design, the mobile footer is more vertically condensed to accommodate the iPhone 16 Pro screen dimensions.
Vertically Stacked Action Cards
I experimented with a few iterations to display the action cards on the mobile layout:
-
Horizontal scrolling row
-
Vertically stacked cards
Based on the desktop navigation menus, I created more mobile versions with the same information. I used an expandable hamburger menu to access the top navigation items and implemented a condensed, vertical footer. These design choices were informed by current UX design trends and best practices.
The challenge designing for mobile platform:
-
Limited real estate – Determine what elements can be omitted on mobile
-
Adapt long-form horizontal elements – Reorganize information to fit in a smaller, compact layout
-
Implement accessible & intuitive interactions – UI elements should be logical, familiar, and uncomplicated. Elements requiring gestures like swiping, tapping, long pressing, etc., should be easily understood by and functional to users.
Mobile UX Research
Using knowledge gained from my graduate school courses, specifically Mobile Design in HCI, combined with additional research, I determined an effective way to translate the desktop website into a mobile-compatible UI.
Design decisions based on the following:
- Nielsen Norman Group Articles
The State of Mobile User Experience
- UX Cam
What's Next?
I plan to discuss light usability testing with the client, as we continue developing the mobile website. Because NEDA is a nonprofit organization, there are constraints with staff members' availability, so organizing and executing user engagement methods will be an upcoming challenge.
04
Published Site Revisions
Now that the homepage has been published, I recorded inconsistencies and suggestions for the developer to implement. Compared to my prototype, there are a few accessibility and functionality issues on the live site.
Suggested Changes
I have sent my revision suggestions to the client, who will share my thoughts with the developer. The most urgent issues occur within the top navigation bar, as some items are obscured when the menu is expanded. There are also several elements that are currently not clickable and some outstanding accessibility issues with color contrast that need attention. Finally, there are less critical design issues, like awkwardly aligned text, sizing, and spacing that would provide a more visually balanced experience.
