SolarSPELL Website Revamp
SolarSPELL Website Revamp
SolarSPELL, '24 — Improving Usability and Access for a Global Educational Tool
SolarSPELL, '24 — Improving Usability and Access for a Global Educational Tool
"What design improvements can make the SolarSpell website more engaging and intuitive for diverse global users, while maximizing its educational impact?"
"What design improvements can make the SolarSpell website more engaging and intuitive for diverse global users, while maximizing its educational impact?"
My Role
Web Designer & UX Researcher
Tools
Figma, WordPress
Skills
Web Design, Product Strategy, User Research
Case Study
Product Design
Designing for education
About
About
SolarSPELL (Solar Powered Educational Learning Library) is an initiative providing solar-powered, offline digital libraries to resource-limited regions.
SolarSPELL (Solar Powered Educational Learning Library) is an initiative providing solar-powered, offline digital libraries to resource-limited regions.
Its mission is to empower communities through localized, curated content, enabling learning even in areas without internet connectivity. The platform features solar technology, hands-on training, and diverse educational resources.
Project context
Project context
The project I worked on involved redesigning SolarSPELL’s website to create a more intuitive and engaging platform.
The project I worked on involved redesigning SolarSPELL’s website to create a more intuitive and engaging platform.
The website lacked a cohesive way to present this core offering; SolarSPELL’s key value propositions.
The website lacked a cohesive way to present this core offering; SolarSPELL’s key value propositions.
Additionally, the site was visually cluttered and overwhelmed users with long blocks of text, making it difficult for them to engage with the content.
Navigation was also a major pain point; users struggled with deep dropdown menus and inconsistent page layouts, leading to confusion and a poor overall user experience.
This was a crucial task, as the website serves as a key resource hub for educators, partners, and global users to access vital information and updates about the organization’s work.
Additionally, the site was visually cluttered and overwhelmed users with long blocks of text, making it difficult for them to engage with the content.
Navigation was also a major pain point; users struggled with deep dropdown menus and inconsistent page layouts, leading to confusion and a poor overall user experience.
This was a crucial task, as the website serves as a key resource hub for educators, partners, and global users to access vital information and updates about the organization’s work.
What did I do?
The SolarSPELL website redesign focused on solving five major issues uncovered during the research phase: outdated design, complicated navigation, unclear presentation of key offerings, limited emphasis on partnerships, and poor mobile experience. My goal was to create a more engaging, user-friendly, and responsive site that better communicates SolarSPELL’s mission and impact.
Complex navigation with no hierarchy
Complex navigation with no hierarchy
Solution
Resources page not easily accessible
Resources page not easily accessible
No emphasis on partners and their significance
No emphasis on partners and their significance
Lack of clear presentation of the key offerings
Lack of clear presentation of the key offerings
Inconsistent visual design
Inconsistent visual design
Why redesign?
User frustration with navigation
The website’s complex dropdown menus and cluttered structure made it difficult for users to find essential content like resources and impact reports.
Poor mobile experience
Users in remote regions, often relying on mobile devices, faced slow loading times and poorly optimized content.
Lack of clarity: SolarSPELL’s unique offerings i.e localized libraries, solar-powered technology, and community training; were buried under long blocks of text, leaving users confused about what the organization does.
How I solved it
Discovery part 1
Heuristic Evaluation
Conducted an evaluation to identify key pain points, confirming issues with navigation complexity, content overload, and mobile optimization.
SUS Survey (System usability scale)
Conducted an evaluation to identify key pain points, confirming issues with navigation complexity, content overload, and mobile optimization.
Discovery part 2
The second part of the discovery phase involved conducting user research (user survey and user interviews) to dive deeper into understanding the needs, expectations, and pain points of SolarSPELL's diverse user groups.
User Research: wants ≠ needs
Key insights were gathered through user surveys, guiding the project's direction
What challenges do users face the most?
navigation complexity was identified as the biggest challenge by 75% of users.
navigation complexity
content overload saying it was hard to scan and quickly understand the information.
content overload
no clarity of information making it difficult to understand what the organization does at a glance.
no clarity of information
Do users feel that there’s a need for improved navigation?
Do users feel that there’s a need for improved
navigation?
Do users feel that there’s a need for improved navigation?
72%
72%
of users rated navigation as a significant challenge (rating 4 or 5)
of users rated navigation as a significant challenge (rating 4/5)
Slow loading times and unresponsive buttons were common complaints.
Slow loading times and unresponsive buttons were common complaints.
Complexity of Visa Procedures
52%
52% of the users
Of Users
expressed dissatisfaction with
the mobile experience.
expressed dissatisfaction
with the mobile experience.
To understand the current system, we I conducted user interviews
To understand the current system, we I
conducted user interviews
“”
These interviews aimed to identify key usability challenges and user needs on the website.
Gain a deeper understanding of user needs
and pain points to inform a user-centered
redesign of the website.
Purpose
Objectives
Student
“I mostly use my phone to access websites because the desktop isn’t always an option. SolarSPELL’s website didn’t load properly and was hard to read the content.”
Educator
“I needed to find training materials quickly, but I kept getting lost in the dropdown menus. It took too many clicks to get to what I was looking for.”
Partner
“We support SolarSPELL, but it’s hard to see the full impact our partnership has. We want website to highlight success stories and outcomes more clearly.”
Partner
“There’s just so much text. I couldn’t quickly find what SolarSPELL does or what resources are available without scrolling through long paragraphs.”
Student
“I mostly use my phone to access
websites because the desktop isn’t
always an option. SolarSPELL’s
website didn’t load properly and
was hard to read the content.”
Educator
“I needed to find training materials quickly, but I kept getting lost
in the dropdown menus. It took too many clicks to get to what I was looking for.”
Partner
“We support SolarSPELL, but it’s hard to see the full impact our partnership has. We want website to highlight success stories and outcomes more clearly.”
Partner
“There’s just so much text. I couldn’t quickly find what SolarSPELL does or what resources are available without scrolling through long paragraphs.”
Discovery Part 3
Usability testing
To further understand how users interacted with the SolarSPELL website and to validate the issues identified in the heuristic evaluation and user interviews, I conducted usability testing with 8 users.
5 Major issues
4 Minor issues
4 Suggestions made
Requirements
What do the users need?
Clarity on key offerings
Focus on presenting core value propositions in a clear way
Simplified navigation
Intuitive navigation structure without excessive clicks
Improved hierarchy & visual design
Visual aids to break up content and make it easier to scan
Highlighting partnerships & impact
Sections to highlight partnerships, collaborations, success stories and awards
Ideation
Restructuring the User Experience: Iterating and Refining Based on User Feedback
Page prioritization and information architecture (IA)
Developed a new IA, reducing the depth of dropdowns and streamlining navigation based on user feedback. The focus was on getting users to key content with fewer clicks.
Iterative design process
We went through multiple iterations of the website structure and layout, refining the design based on ongoing user feedback.
Key aspects of the iterative process
Feedback loops
After each iteration, I gathered input from the team to ensure the design met the user expectations and resolved previous pain points.
Prototyping navigation systems
Created wireframes and prototypes for different navigation systems, testing user flow to ensure essential pages were easily accessible without excessive menu layers.
Visual and content hierarchy
Experimented with content layouts to help users quickly identify key offerings (e.g., solar-powered technology, train-the-trainer models, impact reports).
Solutions
Enhancing the Website Design: Iterative Improvements Driven by Real User Insights
I began with wireframes and mid-fidelity drafts, refining each screen through 25+ iterations for each page based on user tests and feedback from the SolarSPELL team. Changes were made to align with project goals and improve the user experience.
Now in the second phase of the redesign, we’re using insights from usability tests and stakeholder reviews to further refine the interface.
View the live link to the website (still in progress)
Usability Testing & Feedback
We validated the design through usability testing and interviews with over 20+ users, including the team, students, educators and partners. Remote sessions allowed us to gather real-world feedback that shaped the final design.
Originally, we did this in-person, but remote interviews became our go-to method, allowing us to test with users in a mix of structured and guerrilla-style sessions.
Mid-FI Screens
Future Steps
The SolarSPELL redesign is an ongoing process, with several next steps planned to enhance the website further:
Advanced User Testing
Conducting additional rounds of usability testing with a broader, global audience to ensure the site meets diverse user needs effectively.
Analytics Integration
Implementing tracking tools to gather quantitative insights on user behavior, allowing for data-driven decisions in future iterations.
Continuous Content Optimization
Regularly updating the content and visuals to reflect SolarSPELL’s latest projects, partnerships, and achievements, keeping the website relevant and engaging.
Accessibility Improvements
Exploring additional features like language localization and enhanced accessibility tools to cater to an even wider audience.
Reflecting on the Journey
Real-World Problem Solving
Addressed key challenges like simplifying navigation and improving mobile accessibility, ensuring the redesign met real-world user needs.
The Power of Collaboration
Working with stakeholders and users provided valuable insights that shaped a more user-centered and effective design.
Growth Through Iteration
Each round of testing and refinement deepened my understanding of adaptability in design and underscored how impactful thoughtful design can be.
View the detailed case study on desktop.
Explore next
SolarSPELL Revamp
SolarSPELL Revamp