Web app · ASU
DIAL (Developing an Inclusion Assessment Library) is a responsive web app that helps researchers and educators find the instruments social scientists use to study and practice inclusion. In October 2025 I designed its screens for the Alpha release, from the home page and search states to the instrument detail views.
TIMELINE
Oct 2025
TOOLS
Figma
Before DIAL, instruments lived everywhere.
Faculty had no central, structured place to find validated instruments. Researchers pieced tools together from scattered sources and informal recommendations, then spent extra time checking whether each one was credible.
I designed the discovery experience and handed the screens to the developers in Figma.
What researchers needed.
A central repository of inclusion-focused instruments
Keyword search
Structured filters based on research criteria
Clear metadata for judging credibility quickly
The system also had to feel intuitive to first-time users and give experienced researchers advanced filtering. It needed to scale as instruments were added, follow ASU brand and accessibility standards, and fit a focused Alpha scope.
My role.
I worked across:
User flows from the requirements spec
Information architecture and how metadata shows on screen
Search and filtering UX
Wireframes and high-fidelity UI
Responsive design
Accessibility, to WCAG 2.1 AA
Collaboration with developers through implementation
Two ways into the library.
Stakeholder discussions and early exploration surfaced two behaviors. The Searcher knows what they want and starts with keywords. The Explorer prefers to browse by construct, methodology, validation status or year. The experience had to serve both without overwhelming either.
A layered landing page
A prominent search bar at the top
Category cards for point-and-click browsing
A collapsible Advanced Search panel
People could start simple and narrow their search step by step.
Structuring the metadata.
The spec defined two kinds of metadata on every entry, and I designed how each one shows up on screen.
Searchable metadata
Keywords
Category values, which double as filters and tags
Descriptive metadata
Author(s)
Year
Description or purpose
Validation notes
Usage context
Because category values double as filters and tags, the filters follow the way researchers judge an instrument.
Instruments or resources?
The repository held two related content types: instruments, which are measurement tools, and resources, the supporting materials around them. At first both appeared in one results flow.
In walkthroughs and early feedback, some users weren’t sure of the difference between the two. Mixed lists took longer to scan, and filtering felt heavier than it needed to. The fix had to come from the mental model.
1. Unified repository view
Mixed results sat in a card layout beside a left filter panel. It worked, though the page was dense to read.
2. Card system exploration
I explored several card patterns:
With and without images
Tag-based metadata chips
Different label hierarchies
Compact and expanded layouts
Scanning and consistency improved, but the two content types still blurred together.
3. Clear separation
The final direction split Resources and Instruments with a right-aligned tab switch. People focus on one content type at a time, and their filters persist when they switch.
Repository and detail pages.
The repository page has:
Persistent filters on the left
A search bar with visible filter chips
Structured result cards
10 results per page, with pagination
Clear View buttons
Each card shows just enough metadata for a quick comparison, so the page reads as academic without overwhelming anyone.
Opening an instrument shows:
Full metadata
Validation information
Author and year
Download or view options
A PDF preview
Related resources or instruments
Researchers look for credibility cues first, so hierarchy drove this view.
Accessible and responsive.
WCAG 2.1 AA contrast
Keyboard-navigable filters
Clear semantic structure
Screen-reader compatibility
On mobile, filters stack vertically, tabs stay reachable, and cards keep their hierarchy at every breakpoint.
Alpha scope.
As an Alpha, the release left some features out on purpose:
Admin dashboard
Saved searches
Export and download tools
Usage tracking
Semantic search
The focus stayed on the foundation: reliable search over well-structured metadata.
The Alpha, now live, covers:
Keyword and advanced search
Structured filtering
Separate instrument and resource views
A responsive, accessible UI
Technical documentation and a shared repository
Project takeaways.
Next case study
WAT Landing Page, a responsive page for teachers and students
Read the case study →
Anchal Nagdev