I design digital spaces for human stories.
Creating immersive, accessible web experiences crafted to be read, felt, and remembered.
Selected Work
The Appeal Redesign
Project type: Unsolicited redesign / portfolio case study.
Role: UX researcher, information architect, interaction designer.
Tools: Browser audit, site mapping, wireframing
Read Case Study →The Appeal: Information Architecture Redesign
UI & Interaction Case StudyOverview
The Appeal (theappeal.org) is a nonprofit investigative news outlet covering policing, courts, prisons, and criminal justice policy in the United States. Its reporting is rigorous and important, and this project focuses on how the site's current structure can create friction for readers. I document recurring UX and information-architecture issues, identify which user needs are most affected, and propose a reorganized information architecture supported by wireframes for three core pages.
Why this Project?
I selected The Appeal because investigative journalism relies heavily on information discovery. When readers are trying to understand complex topics, the structure of the experience matters as much as the content itself.
Because this was an independent portfolio project, I relied on heuristic evaluation and content analysis rather than user testing or analytics data.
Pain Points
A hands-on audit of theappeal.org identified structural UX issues that share a common theme: the site's information design doesn't consistently match how readers navigate, orient, and decide what to read.
Navigation is fragmented across two menus and doesn't persist beyond the homepage, which makes it harder for users to return to where they were. Search is presented in multiple places (in the hamburger menu and again at the bottom of pages), creating inconsistency in how users expect to find it. On article pages, topic context appears only at the end, delaying helpful orientation. On the homepage, a full-width newsletter signup appears before any story content, asking for attention before users can quickly access value.
Users and Tasks
Rather than redesigning for aesthetics, the work is anchored in three user tasks:
- Task 1 — Evaluate: "As a first-time visitor, I want to quickly understand what The Appeal covers so I can decide whether it's worth my time."
- Task 2 — Browse: "As a returning reader, I want to browse the latest stories across all topics so I can catch up on recent coverage."
- Task 3 — Search: "As a researcher, I want to search for coverage of a specific topic or case so I can find relevant articles quickly."
Each element of the information-architecture proposal is tied to at least one of these tasks.
Information Architecture Structures
Current Structure
The Appeal's existing site structure, mapped from a hands-on audit. Marked nodes indicate problem areas and unclear hierarchy.
Current Structure Text Description
Navigation: The homepage has two separate navigation systems, a header nav and a hamburger nav, with different topic sets between them. The header nav disappears on sub-pages. Search is accessible via the header but hidden in the hamburger menu. Homepage content (top to bottom): A hero story (not always the latest), random stories with no clear logic, and a newsletter wall that appears before any articles. Article page: Recent articles are listed below the fold. There is no way to navigate home, users must use the browser back button. The topic/section label appears at the bottom of the page rather than the top. Footer: Contains a duplicate search bar that users are unlikely to expect there.
Proposed Structure
A redesigned structure built around the user tasks, offering persistent navigation, clear topic context, and an unobstructed path through the content.
Proposed Structure Text Description
Homepage now contains a persistent global navigation flowing to homepage, topic pages, and search function.
The homepage leads with mission statement, then content, then the newsletter signup ends the page. Topic pages get a header and browsable article list. Article pages show their topic at the top, not the bottom, and surface related stories below the content.
Wireframes
Home Page Wireframe Text Description
A mid-fidelity wireframe of the redesigned Appeal homepage. A persistent global navigation bar spans the top of the page, containing the site logo on the left, four topic links in the center, and a search field on the right. Below the nav a mission statement block introduces the publication. A hero story follows with a featured image placeholder, topic label, headline, deck copy, and byline. A "Latest Stories" section header leads into a row of topic filter buttons, two story cards in a grid, and a short list of additional articles each with a thumbnail placeholder, topic label, headline, and metadata. A newsletter signup form appears at the bottom of the page. Annotations in blue explain the rationale for each section.
Topic Page Wireframe Text Description
A mid-fidelity wireframe of a redesigned topic landing page for the Policing section. The persistent global nav appears at the top with the Policing link marked as active. A breadcrumb trail below reads Home / Policing. A topic header block displays the section name and a brief description of its coverage. Below, a filter bar offers sub-topic buttons — All, Use of Force, Accountability, Reform — and a sort dropdown. A scrollable list of articles follows, each row showing a thumbnail placeholder, sub-topic label, headline, deck copy, author, date, and read time. A Load More button follows the list. Related topic cards for Courts, Policy, and Prisons appear at the bottom, followed by a newsletter signup form. Annotations in blue explain each section's purpose.
Article Page Wireframe Text Description
A mid-fidelity wireframe of a redesigned article page. The persistent global nav appears at the top with Policing marked as active. A three-level breadcrumb reads Home / Policing / Article Title. The article header opens with a topic back-link reading "← Policing," followed by the headline and deck copy. A byline row shows an author avatar placeholder, author name, date, read time, and share buttons for Email and Copy Link. A large image placeholder with caption follows, then a body text area represented by horizontal bars with a pull quote block. An author bio section below the body includes an avatar, name, title, brief description, and a link to more stories by that author. Two related story cards follow, each with a topic label, headline, and metadata. A newsletter signup form closes the page. Annotations in blue explain each section's purpose.
Visual Design Prototype
*Fictional sample articles created for design demonstration. Not real news. No affiliation with any real organization.
Home Page Prototype Text Description
A high-fidelity visual design of the redesigned Appeal homepage using a slate blue and off-white color palette with Georgia serif headlines and sans-serif body text. The global nav displays the publication name in serif type on the left, four topic links in dark slate, and a rounded search pill on the right. A full-width slate blue mission bar below the nav introduces the publication in white text. The hero section features a documentary-style photograph of law enforcement officers alongside a topic label, serif headline, deck copy, and byline. A Latest Stories section follows with topic filter pills and two story cards, each containing a photograph, topic label, serif headline, and byline. Three additional stories appear in a list layout with thumbnail photographs. A slate blue tinted newsletter signup block closes the page.
Topic Page Prototype Text Description
A high-fidelity visual design of the Policing topic page. The global nav shows Policing as the active link with a slate blue underline indicator. A breadcrumb trail reads Home / Policing. A full-width slate blue header block displays the topic name in large serif type and a short description in white text. Below, a filter bar with rounded pill buttons allows filtering by sub-topic, with a sort dropdown on the right. Four article rows follow, each with a documentary-style photograph, sub-topic label in slate blue uppercase type, serif headline, deck copy, author, date, and read time. A Load More button appears below the list. Three related topic cards for Courts, Policy, and Prisons appear in a three-column grid. A slate blue tinted newsletter signup block closes the page.
Article Page Prototype Text Description
A high-fidelity visual design of an article page. The global nav shows Policing as the active link. A breadcrumb reads Home / Policing / Article Title. The article header opens with a slate blue uppercase back-link reading "← Policing," a large serif headline, and an italicized deck. A byline row shows a slate blue author avatar with initials, author name, date, read time, and share buttons. A full-width documentary photograph of law enforcement officers spans the content area with a caption below. The article body is set in readable 15px type with generous line height. A slate blue left-bordered pull quote block interrupts the body text. An author bio card follows with a slate avatar, name, title, description, and a link to more stories. Two related story cards appear in a two-column grid, each with a photograph header, sub-topic label, headline, and metadata. A slate blue tinted newsletter signup block closes the page.
Design Outcomes
One persistent navigation system.
The two-menu problem was resolved by consolidating into a single global nav; logo on the left as a home link, topic navigation in the center, search visible in the upper right where users expect it. This nav appears on every page, in the same position, with the active topic highlighted. Users always know where they are and always have a way out.
A mission statement before anything else.
The homepage now opens with a two-sentence description of what The Appeal covers, placed above the hero story. First-time visitors can orient themselves without clicking anywhere. This replaces the newsletter signup, which moves to the bottom of the page.
Topic context at the top of every article.
The topic label was moved from the bottom of the article page to immediately above the headline, doubling as a back link to the topic page. A breadcrumb trail provides a second path home. Readers are never disoriented about where they are in the site.
Structured topic pages.
Each topic page now opens with a brief description of what that topic covers, followed by a filterable, dated article list. Sub-topic filters let researchers narrow without resorting to search. Related topics at the bottom replace the dead end that currently exists when a user exhausts a section.
Newsletter signup.
The newsletter ask appears once per page, at the very bottom, in a consistent location.
Reflections
Redesigning The Appeal was a genuinely enjoyable challenge. The process sharpened my eye for information architecture and reinforced how much structure shapes a reader's experience in a publication before they've read a single word. The part I found most satisfying was the visual design phase, specifically working through color theory to land on a palette that communicates credibility and calm. Getting that emotional register right felt just as important as getting the navigation right.
The Backstory
Hi! I'm Lori and I build accessible, story-driven interactive experiences for the web. Eleven years in, I still care most about the same thing: making sure the people a story is meant to reach can actually get to it.
My work spans corporate product design and higher ed, but the pieces I'm proudest of live in interactive documentaries, scroll-driven data visualization, and accessibility work that treats inclusion as a human question, not a compliance one.
Looking for teams where narrative and craft matter equally: public media, journalism, nonprofits, mission-driven organizations.
Minneapolis-based. Always building something.
Accessibility Statement
Conformance status
The Web Content Accessibility Guidelines (WCAG) defines requirements for designers and developers to improve accessibility for people with disabilities. It defines three levels of conformance: Level A, Level AA, and Level AAA. This site is fully conformant with WCAG 2.2 level AA. Fully conformant means that the content fully conforms to the accessibility standard without any exceptions.
Feedback
I welcome your feedback on the accessibility of this site. Please let me know if you encounter accessibility barriers:
- E-mail: lolsonportfolio@icloud.com
Mockup preview
Viewing a larger version of the selected mockup.