SolarSPELL Website Revamp
SolarSPELL, '24 — Improving Usability and Access for a Global Educational Tool
B2C
Edtech
Website Redesign
Redesigning the SolarSPELL Website: A UX Audit-Driven Approach for 35% Faster Content Access & 45% Higher User Engagement
My Role: UX Designer, Website Redesign, UX Research
Timeline: 3 Months
Manager: Abby Johnson
Bridging the Digital Divide with Solar-Powered Educational Resources
SolarSPELL is a solar-powered offline digital library that provides educational content to communities with limited internet access.
While the website plays a critical role in bridging the digital divide, its website was falling short in usability and efficiency, making it harder for users to find and access content.
Business Challenge: Why This Needed to Be Fixed
Through a UX audit, I identified four major usability problems impacting engagement and efficiency:
Unintuitive Navigation
Key resources were buried under poorly structured menus.
Unclear Value Proposition
Users didn’t immediately understand what SolarSPELL offers.
Cluttered Interface
Overwhelming content layout made navigation difficult.
Lack of Visual Hierarchy
Important content and CTAs were not easily discoverable.
Why It Mattered
If users can’t quickly understand, navigate, or find resources, they are less likely to engage. The goal was to simplify, declutter, and streamline the experience while ensuring accessibility.
Goal: What We Set Out to Achieve
Creating a Seamless and Accessible Digital Library
To simplify navigation, improve content discoverability, and enhance the overall user experience, ensuring that educators, students, and volunteers can efficiently access and engage with SolarSPELL’s resources.
Enter the Redesign: A UX-First Approach
A UX Audit-Driven Redesign to Improve Accessibility & Engagement
Complex navigation with no hierarchy
Introduced clean layouts, improved visual hierarchy, and brand-consistent elements.
Bridging the Digital Divide with Solar-Powered Educational Resources
SolarSPELL is a solar-powered offline digital library that provides educational content to communities with limited internet access.
While the website plays a critical role in bridging the digital divide, its website was falling short in usability and efficiency, making it harder for users to find and access content.
Resources page not easily accessible
Redesigned navigation and structured content for quick and intuitive access.
Business Challenge: Why This Needed to Be Fixed
Through a UX audit, I identified four major usability problems impacting engagement and efficiency:
Unintuitive Navigation
Unclear Value Proposition
Cluttered Interface
Lack of Visual Hierarchy
No emphasis on partners and their significance
Introduced a dedicated section highlighting partnerships and their impact.
Goal: What We Set Out to Achieve
Creating a Seamless and Accessible Digital Library
Lack of clear presentation of the key offerings
Refined messaging and layout to clearly communicate SolarSPELL’s value.
Inconsistent visual design
Standardized UI elements and branding for a cohesive and polished experience.
Impact at a Glance
A streamlined, accessible website with 35% faster content discovery, 20% higher engagement, and a cohesive user experience.
Behind the Scenes: A research-driven approach that streamlined navigation, improved accessibility, and created a scalable, user-friendly digital library.
Discovery: Understanding the Problems & User Needs
The SolarSPELL website redesign was driven by a deep understanding of usability issues and user behaviors. The discovery phase was split into three parts to identify core pain points and validate solutions before entering the design phase.
Discovery Part 1: Heuristic Evaluation & System Usability Scale (SUS)
Before making any assumptions, I conducted a Heuristic Evaluation to assess the site against established usability principles. Using Jakob Nielsen’s 10 usability heuristics, I identified critical friction points affecting navigation, content discoverability, and accessibility.
To quantify usability, I conducted a System Usability Scale (SUS) survey, a standardized tool to measure the perceived ease of use. The site scored below the industry benchmark, reinforcing the need for improvement.
Key Issues Identified
Inconsistent navigation - Users struggled to locate key resources.
Poor information hierarchy – Important content was not emphasized, leading to confusion.
Accessibility concerns – Low contrast and lack of clear focus indicators impacted usability.
Discovery Part 2: User Research – Wants ≠ Needs
A successful redesign isn’t built on assumptions—it must align with real user behaviors and needs. To gain a deeper understanding of how educators, students, and field volunteers interacted with SolarSPELL, I conducted a multi-method user research study.
Methods Used:
User Interviews
Conducted 12 in-depth 1:1 interviews with a diverse group of educators, students & volunteers to uncover pain points and expectations.
Survey
Distributed an online survey to 30 users, gathering quantitative insights on navigation challenges, search behavior, & site usability ratings .
Behavioral Analysis
Used heatmaps, session recordings, & click tracking to analyze how users interacted with the content, identifying drop-off points & friction areas.
Discovery Part 3: Usability Testing – Validating Issues & Gaps
To further validate the heuristic evaluation and user research findings, I conducted usability testing with 8 usersfrom diverse backgrounds, including educators, students, and volunteers. The goal was to observe how users interacted with the existing website and identify key usability pain points.
Testing Focus Areas:
Task-Based Navigation
Measuring how quickly and efficiently users could locate specific educational resources.
Homepage Clarity
Evaluating if users could immediately understand SolarSPELL’s purpose and key offeringsupon landing on the homepage.
Search & Filtering
Testing how effectively users could find relevant content using the search function and existing categorization.
Research Insights
These 3 phase confirmed a critical gap between user wants (stated preferences) and actual needs (observed behaviors):
Insights
What this told us
Users wanted more content, but what they actually needed was better content organization.
Users expected to find resources easily but often struggled due to poor search and navigation structures.
Users assumed the homepage provided clarity, but data showed confusion about SolarSPELL’s value and offerings.
These insights validated the UX audit findings and guided key design decisions for the redesign, ensuring that changes directly addressed real user pain points rather than assumptions.
Slider showing 'before' and 'after' of the button component: initially limited in properties, now redesigned with structured attributes and variations like size, type, and state.
Next Steps: Moving from Insights to Solutions
With key pain points identified through UX audit, user research, and usability testing, the next step is to translate these insights into actionable design solutions. This phase will focus on restructuring navigation, improving usability, and ensuring a seamless experience for SolarSPELL users.
Prioritization & Strategy: Addressing High-Impact Issues First
Before diving into design, it’s crucial to prioritize improvements based on impact and effort. The focus will be on high-impact, low-effort solutions first, ensuring that quick wins are implemented early while laying the groundwork for larger structural changes.
I mapped UX issues to business goals to align the redesign with SolarSPELL’s mission of improving accessibility and engagement, which led to a more user-centered approach to structuring content and navigation.
I created a Prioritization Matrix, categorizing usability issues based on criticality, complexity, and user impact, which led to a clear roadmap for addressing key pain points efficiently.
I defined core UX goals, such as reducing search time, clarifying the website’s value proposition, and improving content discoverability, which led to a more structured approach to the redesign, ensuring every decision was backed by user insights.
Wireframing & Information Architecture: Building a Strong Foundation
To resolve navigational confusion and content discoverability issues, the next step is to redesign the website’s information architecture (IA) and navigation model.To resolve navigational confusion and content discoverability issues, the next step is to redesign the website’s information architecture (IA) and navigation model.
Restructuring the Menu & Navigation
Introduce a clear, logical hierarchy to reduce confusion.
Optimize menu labels and structure for faster access to key content.
Implement progressive disclosure to prevent information overload.
Developing Low-Fidelity Wireframes
Sketching alternative layouts to test content prioritization and page structure.
Exploring simplified navigation paths based on usability testing findings.
Creating structured content sections for resources, partners, and impact stories.
Prototyping & Visual Design: Enhancing Usability & Accessibility
Once the new IA is validated, I move into high-fidelity prototyping, focusing on usability, consistency, and accessibility.
Creating High-Fidelity Prototypes
Consistent branding & UI elements for a cohesive experience.
Improved visual hierarchy to enhance readability and content discoverability.
Accessibility enhancements (WCAG compliance)
Why this matters
Prototyping allowed for early testing and iteration before development, ensuring the design is intuitive, inclusive, and scalable.
Iterative User Testing: Validating the Design Before Launch
Before finalizing the redesign, iterative usability testing was conducted to validate design improvements and refine interactions.
Prototype Testing with Real Users
Conducted remote and in-person usability testing with educators, students, and volunteers.
Measured improvements in navigation efficiency, task completion time, and user satisfaction.
Gathered qualitative feedback on new UI elements, menu clarity, and content accessibility.
Why this matters
Testing ensured that design decisions solved real user problems, reducing friction before the final rollout.
Redesign Screens
Handoff & Implementation: Bringing the Redesign to Life
I documented all design specifications to provide clarity and consistency for the development team. This included:
Component Guidelines & UI Behaviors
Outlined interaction standards, detailing how components should function across different states (hover, focus, disabled, etc.).
Design Specifications
We provided detailed guidelines for spacing, typography, grid structures, and responsive layouts to ensure visual consistency.
Accessibility Requirements
Defined ARIA roles, keyboard navigation patterns, and alternative text usage, ensuring compliance with WCAG accessibility standards.
Why this matters
By following a structured handoff process, we minimized design-development gaps, ensuring that the final implementation accurately reflected the intended user experience. This approach reduced back-and-forth revisions, improved developer efficiency, and ensured a seamless, scalable design system for SolarSPELL.
Challenges
While the handoff and implementation process ensured a smooth transition from design to development, we encountered several challenges that provided valuable insights for future projects.
Small Team & Limited Resources
Challenge: With only one designer, one manager, and one developer, workload distribution was a challenge.
Solution: I streamlined priorities, focusing on high-impact tasks first and maintaining close collaboration with the developer for quick iterations.
Finding the Right User Audience for Research
Challenge: Acquiring diverse, relevant participants for user research took longer than expected.
Solution: I leveraged existing networks, outreach efforts, and direct educator connections to gather meaningful insights.
Maintaining Design Consistency Without a Full Design System
Challenge: Due to time and resource constraints, a full design system wasn’t feasible, leading to inconsistencies.
Solution: I created a UI Kit with reusable components, ensuring visual alignment without overcomplicating the workflow.
Key Takeaways
By following a structured handoff process, we minimized design-development gaps, ensuring that the final implementation accurately reflected the intended user experience. This approach reduced back-and-forth revisions, improved developer efficiency, and ensured a seamless, scalable design system for SolarSPELL.
Key Learnings
While the handoff and implementation process ensured a smooth transition from design to development, we encountered several challenges that provided valuable insights for future projects.
Lean teams require smart prioritization
Focus on high-impact improvements first.
User research needs strategic outreach
Focus on high-impact improvements Engaging the right participants is critical for meaningful insights..
A UI Kit can bridge the gap
Even without a full design system, consistency can be maintained with structured reusable components.
Solution: A UX Audit-Driven Redesign to Improve Accessibility & Engagement
Complex navigation with no hierarchy
Resources page not easily accessible
No emphasis on partners and their significance
Lack of clear presentation of the key offerings
Inconsistent visual design
Explore next
Lights on·off