Ander Onaindia | Case Studies

Summary

Meet Ander & Trey

‍Ander and Trey are best buddies who enjoy each other’s company. On one Spring day, Ander and Trey discussed the extent to which COVID-19 has affected our lives. Being high school seniors themselves, the discussion quickly converged around the impact the pandemic has had on education. Having personally experienced the transition toward online learning in order to preserve social distancing, the duo couldn’t help but sympathize for students coming from lower-income families who couldn’t afford the technology that was now essential for keeping up in school.

So, drawing from Trey’s entrepreneurial spirit and Ander’s love for computer hardware, the idea for CompShare was born. Taking it upon themselves to develop a solution, the duo built a network of both donors and students in need, rapidly receiving dozens of donations and serving students who otherwise would have been left behind.

Project Brief

‍As the project took hold, Ander and Trey quickly realized that in order to maximize CompShare’s impact on the community, they would have to find ways to improve efficiency. So when the decision came to build a website for CompShare, the objective was not only to elaborate CompShare’s inspiring mission and purpose in order to motivate users to make donations, but also to automate certain processes that were taking time.

Problems & Solutions

1. Automate processes for greater efficiency:

Donations portal: Of all possible functionalities the website could have provided, a portal for making and receiving donations was an obvious choice. Without donations, CompShare simply wouldn’t exist, so the intention behind the design of the Donations portal was to make it easy to find for users and as intuitive and smooth to use as humanly possible, which was achieved by guiding users through content through sufficient spacing paired with clear helper text and bold titles.
‍

‍

FAQs: Engaging with both donors as well as students on the receiving end meant that CompShare had to appeal to two different groups, each with their own sets of questions. As such, each group has their own set of FAQs to refer to - donors are led to the “Make a Donation” set of FAQs, and students are referred to the “Receiving a Donation” FAQs. In accordance with web design best practices, content overload on the page is minimized by revealing each set of FAQs only if and when users to learn more, and each “View FAQs” button is strategically placed where users actually have questions - i.e. immediately prior to taking action.
‍

‍

Contact form: As an additional attempt to secure an inflow of donations, CompShare’s website features a custom contact form that signals availability to users and makes it easier for anyone to reach out to CompShare by guiding them in the construction of their message. Putting your email address out in the open increases your likelihood of receiving unwanted emails, so a contact form also helps to reduce spam and keep the site secure.
‍

2. Persuade users to make a donation:

“Our Work” page: The “Our Work” page was developed solely as a means to communicate the impact CompShare has had on the community. But nobody is wired the same and different forms of communication resonate differently from one person to another. With that in mind, in an effort to appeal to a larger audience, CompShare’s impact is exhibited through three different media types: photos linked to CompShare’s social media accounts, testimonials from partners, and relevant statistics (# of computers donated, total donation value, etc.).
‍

Helping real people: The facts and figures that appear on the “Our Work” page mentioned above communicate the impact donations have had on the community up to now, but we also wanted to shed light on the fact that future donations will as well. As such, CompShare’s website provides a space to showcase all student requests for donations; some of which are genuinely funny and heart-warming.
‍

‍

Youthful yet sophisticated: In order to use CompShare's youth to their advantage, the site’s visual design queues echo the playful nature of a classroom through bright colors and lively fonts, but it was important to Ander and Trey to demonstrate CompShare's professionalism as well. Integrating professionally done artwork on the About page as well as an interactive background using Particles.Js, CompShare’s website is visually appealing and shows the world that they mean business.
UI Design: Using various visual dividers throughout the site, the most noticeable being different colors for each section, helps to distinguish sections from one another, thereby dividing content into clear groups and making the layout clearer and more digestible for users.

‍

View live site

Back