Designing credibility and clarity for a nonprofit encyclopedia serving 250 million children without basic literacy
Role
UX Consultant, Client Liaison
Timeline
4 months
Tools
Figma, UserTesting, Squarespace
TL;DR - FOR THE BUSY RECRUITER
The Problem
A mission-driven product struggling with digital credibility
Everstory—a Wikipedia-inspired audio-visual encyclopedia for pre-literate learners ages 3-6—had a revolutionary product but a website that confused users, lacked visual credibility, and failed to attract the volunteers and investors needed to scale. With 250 million children globally lacking basic literacy skills,
Our Solution
Research-driven redesign that balances dual audiences
We delivered a complete website redesign that serves both adult decision-makers (parents, teachers, librarians, investors) and reflects the kid-friendly essence of the product. Creating a warm, welcoming interface—all built on Squarespace for easy client maintenance.
Impact & Contribution
Client liaison driving research, design, and delivery across 6 consulting milestones
Served as SOCHI client liaison, coordinating directly with the founder and managing timelines. Led design of key conversion pages and contributed to competitive analysis, IA, wireframing, prototyping, and no-code development—delivering a clearer, more usable, and scalable website.
Why build an encyclopedia you can’t read?
The Client
Everstory is an early-stage nonprofit EdTech startup developing a digital encyclopedia that uses only audio and visual content—no text required. Founded by Garret Potter, a dual-degree graduate student at the University of Michigan's School of Information and School of Education.
Everstory aims to democratize early education through accessible, engaging content in subjects like geography, history, and science. Their product is a web application designed for personal computer and tablets with goals of use in home and in institutional settings.
The website plays a critical role in:
Explaining the product to parents and educators
Building trust with schools and libraries
Attracting volunteers, contributors, and potential funders
Support Garret and Everstory's Mission: View Demo | Add Content
The Global Opportunity:
250 million children worldwide lack basic literacy skills
Pre-literate learners (ages 3-6) have virtually no options for independent digital learning
Audio-visual learning can bridge the gap before children can read or write
Initially offered in 2 languages (English and Spanish) with plans to expand
The Challenge
As a student-led startup with frequent contributor turnover (graduate students typically work 1-2 years), Everstory needed a website that could:
Serve as the primary information source for the product and brand
Attract volunteers, financial investors and content contributors
Appeal to parents, teachers, and librarians (the decision-makers)
Reflect the fun, kid-friendly essence of the actual product
Be maintainable by non-technical team members
Project Management
As UX consultants through SOCHI (Student Organization for Computer-Human Interaction), a student-led tech consultancy at the University of Michigan, our team followed a structured consulting process with clear deliverable milestones. As the client liaison, I managed all communication with Garret Potter, coordinated meetings, and ensured project timelines aligned with both client needs and our consulting deliverables.
How did we understand our dual audience challenge?
How did we define our scope?
Stakeholder Research
Through semi-structured interviews with founder Garret Potter, we identified three core business goals:
1
Volunteer Growth: Attract content contributors and developers
2
Fundraising: Secure financial backing from investors
3
Product Education: Clearly communicate what Everstory is and who it serves
What did we learn from competitors in the EdTech space?
Milestone 1: Competitive Analysis
We conducted a competitive analysis with 12 EdTech competitors (direct and analogous) across key criteria:
Key Findings:
Successful EdTech sites use strategic CTAs to drive volunteer and fundraising growth
Clear product information presentation is essential for educational platforms
Visual legitimacy builds trust with institutional partners and investors
How did potential users interact with the current website?
Milestone 2: Heuristic Evaluation / Usability Testing
The team conducted two waves of usability testing paired with Nielsen Norman Group's heuristic evaluation:
Wave 1: General Public (UserTesting.com)
Broader perceptions of the website
Identified major usability barriers
Wave 2: Targeted Users (Parents, Teachers, Librarians)
In-depth feedback from decision-makers
Validated pain points with actual users
Key Pain Points Identified:
How did we create an intuitive and engaging website?
How did we rethink the experience?
Milestone 3: Interaction Map & User Flows
Each team member created their own proposed information architecture, visualized as detailed sitemaps and user flow diagrams in Figma. We evaluated 5 different sitemap proposals, comparing them against user pain points and business goals before selecting the optimal structure.
Final Information Architecture:
Reduced navigation from complex multi-level structure to 5 primary pages:
Homepage - Clear value proposition and calls-to-action
The Product - Detailed explanation of the encyclopedia and its features
About - Mission, vision, and team information
Get Involved - Pathways for volunteers, contributors, and investors
Contact - Simple, accessible communication channels
This structure prioritized user tasks (understanding the product, getting involved) over organizational hierarchy.
What did we design first?
Milestone 4: Wireframing
We translated flows into low-fidelity wireframes, focusing on:
Core layout and page structure
Content hierarchy and placement
Navigation patterns and user flow
Interactive feature locations
Wireframes allowed for fast iteration and early client feedback before moving into visual design.
How did we visualize the final product?
Milestone 5: Prototyping
Building on wireframes and incorporating Everstory's brand guidelines, we developed high-fidelity prototypes:
Refined visual design with appropriate color schemes and typography
Enhanced UX writing for clarity and engagement
Designed responsive layouts for desktop, tablet, and mobile
Created consistent component library for scalability
My Focus: I led the design of the Product & Contact Pages
The Product Page:
Designed to clearly showcase Everstory's encyclopedia with visual demonstrations, target audience information, and benefits for learners and educators.
Contact Page:
Created an accessible, user-friendly contact experience to streamline communication for the Everstory team.
How did we communicate effectively and create visual appeal?
Client Feedback & Iteration
Through regular client check-ins, we presented prototypes to Garret for feedback and iterated based on his direction:
Initial feedback: Design was clear but lacked warmth
Iteration: Enhanced visual elements to convey a more welcoming, kid-friendly atmosphere while maintaining professionalism
Result: Balanced legitimacy with approachability
We refined textual content to be more engaging and accessible, while enhancing visual elements to create an attractive and intuitive interface that reflected Everstory's dual audience needs.
How did we bring our product to life?
How was the final product delivered?
Milestone 6: No-code Development
The client already had the existing website on Squarespace, so we used his account to build a new site in parallel. This allowed us to develop the custom design without disrupting the live site, then switch over once complete.
Squarespace was intentionally chosen to:
Support long-term maintainability
Everstory's team already had familiarity with the platform
Allows administrators to update content without coding knowledge
Fit Everstory’s operational constraints
Development Challenges:
Working within Squarespace's platform limitations while building a custom design required creative problem-solving. We prioritized the most impactful design elements and found workarounds to achieve our vision within the platform's capabilities.
Check out the live website here!
What did I take away from this project?
This consultancy reinforced the importance of:
Designing within real-world constraints
Managing client relationships alongside design execution