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.

  1. Complex navigation with no hierarchy
  1. Complex navigation with no hierarchy
Solution
  1. Resources page not easily accessible
  1. Resources page not easily accessible
  1. No emphasis on partners and their significance
  1. No emphasis on partners and their significance
  1. Lack of clear presentation of the key offerings
  1. Lack of clear presentation of the key offerings
  1. Inconsistent visual design
  1. 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

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.

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?

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

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

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:

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.