AOTF Website redesign
SUMMARY
The American Occupational Therapist Foundation (AOTF) reached out requesting an end-to-end redesign of their current website to improve outreach and information dissemination to their various stakeholder communities.
Role
PM, UX Designer
Contribution
Strategy / UX / ds
Team
5 members; 2 UXRs, 2 UXDs, 1 PM
duration
24 wks / 5 sprints
Impact
faster engineering implementaiton
improvement in user retention
decrease in time to task completion
Discovery + Research
Sprint 01 + 02
The American Occupational Therapy Foundation (AOTF) serves the public interest by supporting occupational therapy research and increasing public understanding of the important relationship between everyday activities and health.
Their core initiatives include:
[ i ] Grants & Scholarships for OT students
[ ii ] Programs & Events to build research capacity
[ iii ] Publications like OTJR, their quarterly research journal
We began with stakeholder interviews and competitive analysis to define the scope of work (SOW). An initial kickoff meeting allowed us to align on objectives, clarify deliverables, and map out pain points with the existing website.
We quickly identified the end-user personas that frequented the website: Occupational Therapists (OTs), Students, AOTF Staff, External donors. Usability test-cases and interview scripts were tailored to reflect the distinct goals of each group. While we were able to recruit participants for three of the four personas, we were unable to secure a donor representative during this phase
were conducted in a remote manner that included participants from each of the use-cases.
were created for each of the specific persona/user to complete during the interview.
was utilized instead of standard affinity mapping to synthesize insights.
[ ! ] Users consistently struggled with content discoverability and unclear navigation labels.
[ ! ] Confusion about where to find critical resources led some to rely on external search engines.
[ ! ] Participants expressed a desire for a visually engaging design that reflected AOTF’s academic credibility and mission.
The challenge
Critical resources were scattered across the site, forcing users to rely on external search engines
Stakeholders struggled to find essential information about grants, research, and publications
The existing website failed to reflect AOTF's position as a leader in occupational therapy research
hypothesis
“restructuring the IA would be fundamental to improving the digital experience”
project goals
Streamline navigation to make finding resources intuitive and efficient.
Restructure content architecture and enhance discoverability patterns so users can locate relevant information with minimal cognitive effort.
Create interactive and visually compelling experiences that keep users connected to AOTF’s mission.
Establishing Foundations
Brand Identity Workshop
A collaborative workshop with AOTF staff informed the development of a visual and communication style guide. We aimed to ensure that the new website would reflect both their academic rigor and public outreach goals and therefore boost engagement.
cms to constrAin
possible creep
Rather than treating each page as a one-off, I proposed that we follow a modular template system for our wireframes. This decision was rooted in research finding [5]
This approach served two strategic goals:
[ 1 ] Anticipate and accommodate future content growth
[ 2 ] Introduce structural guardrails to maintain visual consistency in the absence of an in-house client design team.
These decisions directly informed our wireframing approach. The CMS-informed scaffolding helped us:
[ ✓ ] Create scalable templates that could adapt to evolving content needs
[ ✓ ] Accelerate wireframe iterations with clearer structural defaults
[ ✓ ] Constrain visual drift and ensure consistent styling across pages
Wireframing +
Design System
We utilized a low-fidelity voting mechanism in Figma to prioritize components based on perceived user value and feasibility (fig 1).
Once core elements were validated, we transitioned into digital wireframes in Figma, layering in progressively higher fidelity with input from the brand guidelines developed earlier (fig 2).
Restructuring the Information Architecture
mapping user mental models
KardSort was used as our tool of choice since it allowed us to maximize the number of response. The constraint, only 20 cards allowed per test and only csv exports (no in-house analysis).
Systemizing The Redesign
Design Systems and guidelines
I initiated the setup of a scalable design system to ensure consistency across components, layouts, and content modules. This system anchored visual decisions, reduced redundancy, and aligned future CMS-ready templates with the established structure.
Redesigning Complex Areas
Based on user presented insights as well UX audits on the website, we redesigned areas of core cognitive overload.
Reflection So Far…
Challenges + Pivots
[ ! ] Card-sorting platform: understanding and finalizing trade-offs when trying to find a card-sorting tool was time-taking (2 wks lost).
[ > ] Trading off insights/visualizations for number of seats and data retention periods.
microsuccesses
[ ✓ ] Multi-modal paper-first: the usage of sticky notes to simulate modals and interactions on paper layouts helped us avoid over-investing in digital fidelity too early.
Additionally, this approach also made intentions immediately visible during critiques with clients and sped up consensus.
Upcoming
