Desktop UI/UX

Solar Chapter Goes Online

Role: Project Manager & Designer

Duration: 3 Months

I have been working as the Director of Public Relations and Marketing at Solar Chapter - HQ for the last two years. In a span of two years, we have gathered more than 120 students across the globe to help the underprivileged access clean water, education and community development. We have grown bigger, started to gathering attention from important figures and we realized we need to solidify our brand image, starting with our website.

Solar Chapter started from a four-person initiatives into 120++ students' way to give back to community; helping more than 5000 people yearly in Indonesia.

For our website project, I was acting as a Project Manager + Designer along with two other associates who are helping me with data collection and ideation. In order to create accountability during the span of 3 months, we decided to split our project into three phases:

Ideation & Research

In this project, we took a goal-directed design approach that proved to be quite effective in our design efforts. Everyone in the team looked at the old website and list down pros and cons. From there, we already have a foundation to work off from. Also, we found qualitative research methods to be the most useful, consisting of a kickoff meeting, ideation for the website. We started out by asking ourselves some initial key questions.

"What is the product and who is it for?"
"What do our primary users need most?"
"What kinds of information do we already have and what needs to be uploaded on the web?"
"How can we attract people to see and browse around on our website?"
What is Solar Chapter?

Solar Chapter is an Indonesian non-profit organization that functions as a medium for young people to contribute their resources such as skills, knowledge and effort to the underprivileged society using sustainable methods that can last for generations to come.

It was first established in 2017 and as a team, we have successfully fundraised more than $125,000 through CSR and crowdfunding initiatives for various projects in providing clean water access, education and community development.

What do our primary users need most?

We defined some uses from our website and picked out four most visited pages, based on the data from our old website:

What kinds of information do we already have and what needs to be uploaded on the web?

Since the beginning of Solar Chapter's early days, we are always focus on the outcome on the project and never about showcasing what we have accomplished. For us, it was never about making a name for ourselves but it is all about the legitimacy of what we are doing and the continuation of the projects.

However, we've seen that we could improve ourselves and our organization by using what we know and share them to the world, instead of keeping it to ourselves.

So, we list down all the information that we could share to people from our work:

How can we attract people to see and browse around on our website?

This is where my role as a designer and marketer comes together. By leveraging two aspects of a entity together (in this case marketing and product), I quickly identified some key findings:

  1. Illegitimacy issues: Without having a proper website, I won't be able to attract sponsors and big companies to sponsor our projects.
  2. Traffic issues: Without having a social media plan, our website won't be able to generate the target traffic and its initial use.

Based on these findings, I have designed the website where every page to be easily directed onto the next project and have a Call-To-Action on the bottom. In addition, our social media plan always have a CTA where we would direct our followers to our website.

Design & Prototype

User Flow

We constructed a user flow based on our old website and also added some new pages that we would like to incorporate in our new website.

Sketch

We started off our design process with sketching. Through this stage, we know better what our app would look like based on the user flow.

Wireframe

We turned our ideas into low fidelity wireframes. We reviewed what was necessary and what areas needed improvement. We poured a lot of our time into this step to make sure we had the finishing touches on the underlying UX before moving onto the visuals.

Wireframe of the Homepage
Final Design

Online Donations

Since we first started, Solar Chapter was founded in the United States as a way for Indonesian students to give back to our community. We never limit anyone who wants to donate based on their location and/or their currency, so we provided two options:

Project's Page

As a nonprofit organization, we have multiple ongoing projects that our branches are currently working on. On our old website, it was kind of hard to navigate the current and past projects so we wanted to create a clean interface where users can easily browse projects from our interactive map and the gallery view. In the project's page, we also provide detailed information regarding the villages that we help; such as:

About Us

Another thing that we want to improve as an organization, especially as a youth organization is to inspire each other and motivate to make a movement. We want to share our stories and how can we get there. This is where the about page is all about. We tell everyone about our history, what we value and believe in, and just basically who we are in general.

Takeaways

What did I learn from taking on this project?

We are very proud of what we have changed in the last three months together, but I do have to say that we are never going to stop improving. I do believe that there's always room for improvement.

Another thing that I have learned from doing this project is that it takes a lot of time and effort to connect with different stakeholders. When I was collecting data from branches, it was a bit challenging because every branch has a different format that I need to format first before it goes to our website. With a more proper communication to different stakeholders, I think that website improvement and flows could be a better process for everyone.

See Other Projects

ZyklusPelotonTraveloka
Concept, Branding, Mobile UI/UX
Concept Design & Desktop UI/UX
Concept Design & Desktop UI/UX
< Back to Projects