Header image depicting Solar Equity logo and a screen of the redesigned website.

Solar Equity: Optimizing Information Architecture and Design

Streamlining information architecture and customer experience.

Role Duration Project Type Tools/Skills
Project Lead 4 Months Partnership Product Management, Figma, Surveys

Summary

I worked with Solar Equity, a non-profit green-energy organization at UNC Chapel Hill. Solar Equity receives donated solar panels and works with local partners to install the solar panels and record them on tax data. Local sponsors also donate to Solar Equity to help fund their mission. Students either join as members or can simply volunteer their time. The club also runs events jointly with UNC like the "Solar Strides" marathon event.


Overview

Problem: Solar Equity's site had confusing and unclear information architecture, making it difficult to locate specific information regarding involvement or verifying the organization's validity.

Objective: Overhaul the Solar Equity web experience to inform users how to get involved as well as inspiring confidence in the organization.

Research and Process:

  • Completed a comprehensive heuristic evaluation based on UX/UI experience to identify usability issues, then presented to the organization.
  • Conducted user interviews to gather qualitative insights into user personas and needs.
  • Developed personas to represent distinct user segments and guide design decisions.
  • Utilized card sorting to optimize information architecture and ensure logical content flow.
  • Iterated on wireframes and prototypes to test design hypotheses and refine the user experience.

Outcome: A fully interactive prototype with updated data-driven information architecture shared with Solar Equity.


Positives Pain Points Next Steps
Clearly defined user segmentation and avenue of communication. Unclear user flows for different groups of users, difficult to discover information. Match website user flow to user personas and their needs.
Strong community focus and use of images. Lack of narrative or organized information. Update information architecture to better structure site narrative.

Reflection

In partnership with Solar Equity, gave me through experience with UX research and design. Every decision I made was informed by user data or design thinking feedback.

  • User Interviews and Challenges with Data Collection: Due to the nature of Solar Equity's clients, most data was collected via user interviews and user surveys. Although I did not have access to clients to interview, I learned that these limitations could be bridged by asking the right questions to the organization board since they are communicating with clients everyday. By formulating my interview questions carefully, avoiding jargon and focusing on letting the interviewee share their knowledge, I picked up on extensive information that helped inform by project strategy, such as focusing on user-based flows.

  • Design Limitations: Solar Equity, being a student-run club, did not have a dedicated development team like many other projects. Instead, I learned to work with the client limitations to create a site that could be built in a standard CMS without complex programming knowledge. This included focusing on a developing a design system, modular page layouts and updating information architecture and content.
Design system including color palette, color contrast, and typography guides.



Personas

The main purpose of the Solar Equity site is to inform potential participants on the organization and how to get involved.

Based on User Interviews: Three major personas.

User interview data helped me outline three main persona types.

  1. Student volunteers: Students can either volunteer or join the organization to get involved on various committees. According to user survey results and user interviews, students were most interested in the organization's mission, event information, student meetings, and Solar Strides (a marathon for sustainability).
    Sub-personas: According to user interviews, students may be 1. club members, 2. only interested in volunteering, or 3. interested in attending speaker or marathon events. Given this data, I conducted a user survey to gauge what information students would find most helpful.
  2. Partners: Partners are typically local businesses or organizations that partner with Solar Equity to install solar panels. According to user interviews, this includes tax and informational assistance. Partners may be most interested in metrics or previous customers (like testimonies) for credibility, tax information, or contact information.
  3. Sponsors: Sponsors are typically local businesses or organizations that offer funding or donate Solar Panels. Like partners, they are likely most interested in metrics or previous customers (like testimonies) for credibility, tax information, or contact information. However, according to user interviews, sponsors will be most interested in straightforward and secure "Donations" user flow.
Student: Joins or volunteers with SE Persona chart describing a student's experience with the website.
Sponsor: Funds SE Persona chart describing a sponsor's experience with the website.
Partner: Works with SE Persona chart describing a business owner's experience with the website.

Persona-Driven Userflows: Each persona needs different information.

Each persona has different goals, I prioritized directing users to the correct destination based on which information they are seeking.

  • Homepage: On the landing page view, the user is met with three different options.
  • Student flow - user story: "Annie’s passionate about sustainability and community service. She wants to get involved in volunteering with SE."
    Students are directed to a page with further options, for volunteers, student members, or for the Speaker Series (an event available to all students). Ideally, this intermediate page serves as a direct pointer to the correct page. It may also encourage students to explore other options.
  • Survey results from students describing features they would be most/least interested in.
  • Partner flow - user story: "Ronald’s interested in installing solar panels on his home, but is overwhelmed by costs and tax information."
    The original page provided little relevant logistical information, and no calls to action. I included a form to submit contact information as well as previous client testimonials. Based on user interview data, partners may be interested to hear from other partners' positive experience with Solar Equity.
  • Sponsor flow - user story: "Natalie’s boss wants her to find a local non-profit to partner with. She is looking for sustainability-focused organizations."
    The original design of the website had no page dedicated to sponsor relations or relevant information. I created a page with metrics, tax information, and previous sponsor testimonials. Based on user interview data, sponsors may be interested in verifying Solar Equity's legitimacy, past work, and tax information. Additionally, on the website homepage, there is also a board of sponsors displayed on the page to clearly show Solar Equity's strong relationships with the community and its sponsors.
Annotating a student's journey to the volunteering page to explain certain design choices.


Navigation and Information Architecture

In line with research-informed decisions surrounding persona-based workflows, the navigation needed to be upgraded. I outlined key points of user flow, such as "mission", "sponsors", or "projects", and mapped pages according to a manual card sort. I tested variations of the navigation with a user test participant. Next steps may include gathering additional data from user testers.

...

Prototypes

Referencing user research data and the original website design, I created a high-fidelity wireframe, highlighting updated site navigation, and focus on persona-based user flows.

  • Modular Design: My design focused on sectioning content and use of simple components like cards or slides.
  • Image Headers: The original design included many images from club activities, but had difficulty integrating them into content. I decided to use images in headers to immediately give users an idea of the content of the page and continue building a strong connection between the organization, each of the page's content, and the users.
  • Interaction design: I focused heavily on interactivity and mapping out navigation throughout my design.
  • Calls to action: I used buttons, forms, and links to encourage users to engage with the organization's operations. For instance, if users were interested in volunteering, they could interact with a calendar, list or buttons to learn more about events and registration for volunteering events.

...
...
...
...
...

Acknowledgements

Thank you to Solar Equity for collaborating with me on this project.



Return Home