Envolve is a community service that could encourage people to take part in volunteer events and get certifications.

1st-place winner – Hacks for Humanity 2017, a 36-hour hackathon

About Envolve

The average person produces 4.4 pounds of garbage every day, there are 36,000 homeless people in Arizona alone, and 5,250,000,000 trees are massacred yearly. Doesn’t this sound like the dystopian future we always feared? Right now, community service has a negative connotation; we’ve seen college students half-heartedly volunteer to have a to put on their resume. Thankfully, the love for our planet is deep down in the hearts of all humans.

At Envolve, we want to change the outlook on community service to make it fun for everyone. By implementing a social, reward-based style of earning points, people can be more motivated to serve their community and help the earth all while having fun by leveling up and earning achievements. With our platform, everyday people can learn to build empathy, broaden their worldview, and create a difference in their local community. Envolve promotes people to come together with other friends and volunteers to create new friendly, competitive, and societal interactions with like-minded individuals. We want to help communities become more involved environmentally and socially with the incentive of high scores in Envolve.


A typographic logo is easy to recognize as a new startup. For the logo of Envolve, I used our brand font, Cooper Hewitt, and bolden the “vol” that represents volunteer.


Product Design: Website UI Design & Prototype; Function design

Not Interactive, but for Communication

Since we have a limit of time to finish the project, we decided not to create an interactive prototype using Adobe XD or proto.io. It is enough for me and developers to communicate our web design ideas by just making graphic and UI design in multiple images, and then we will concentrate on developing web pages and making the pitch. I used Adobe InDesign to make these web page designs.

Landing Page

Envolve Website-1 (dragged)

Sign-up Page

Envolve Website-2 (dragged)

“At-A-Glance” Page

This page is showing all latest updates, including upcoming events, new updates from the organizers that you’re following, your recent achievements, and news from Envolve.

Envolve Website-3 (dragged).png

“Discover Events” Page

This page will display upcoming events by the organizers that you’re following.

Envolve Website-4 (dragged).png

Click on one event, and you will see the detail of this event in the “Event Details” page.

“Event Details” page

Showing the description and photos of this event, a “sign-up” button, location, organizer, time & date, a glimpse of this organizer, and a link for reaching out this organizer quickly.

Envolve Website-5 (dragged).png

Click on the organizer’s name or the “contact organizer” button, you will be directed to the organizer page.

“Organizer Details” page

Showing descriptions of this organizer, upcoming events from this organizer, contact information, and social media.

The organizer could be an individual:

Envolve Website-6 (dragged).png

Or also an organization (nonprofit/company/student organization/club/association):

Envolve Website-7 (dragged).png

“My Events” page

Manage your events. You can check-in before the event starts. Announcements from the organizers will be displayed on this page. You can also see the event you’ve attended by pressing “past events” button.

Envolve Website-8 (dragged).png

“Past Events” page

Envolve Website-9 (dragged).png

“Achievements” page

We designed an “achievement” reward system to motivate users to attend more volunteering events, increase the user engagement, and enhance the site stickiness.

Envolve Website-10 (dragged).png

Envolve Website-11 (dragged).png

“My Profile” page

Your personal information, registered events, level, gained points, and profile picture.

Also, a “preferences” option will let the system help you find and filter events based on

  • your range of distance willing to travel from your location;
  • your volunteer interests;
  • hours that you are willing to spend on each event;
  • skills that you have,

in order to customize your Envolve experience.

Envolve Website-12 (dragged).png

“Leaderboard” page

Just like the “Achievement” page, this will motivate users to gain more points and increase their ranking in the entire Envolve community.

Envolve Website-13 (dragged).png

“What is Envolve” page

Introduce our startup. A quick link to contact us. At the bottom, promoting our new product.

Envolve Website-14 (dragged).png

Product introduction page

And this is not just an example of our products. During the middle of our design and development, Christian and I were thinking about how to maximize our advantage as a volunteer community service to not only encourage people attending volunteer events but also enhance its advantage for our customers for their future, including career-seeking or academic application.

We came out a solution by offering a “Career Service“. We offer a certification for customers to prove their participation and professional skills.

Envolve Website-15 (dragged).png

Other informative pages

For example, a rubric for different levels of the achievements.

Envolve Website-16 (dragged).png

The Envolve Team

1st-place winner – Hacks for Humanity 2017

  • An Duong. An is an undergraduate student majoring in Computer Science at Arizona State University. He is our primary web developer and worked on both the mobile and the desktop version for the Envolve website. He initially came out with this idea.
  • Jared Hsu and Christian Chee, studying Technological Entrepreneurship. They worked on the presentation of the pitch.
  • Junshu (Ted) Liu. I’m a Digital Culture major with a concentration in Media Processing. As the product designer for this project, I worked on the UI and UX design for both our desktop and mobile version of the website.
  • Aaditya Ravindran, master in Computer Science. He worked with An and also helped with part of web development.

My Experience at Hacks for Humanity

This is the second time I attend the Hacks for Humanity, a 36-hour hackathon. Last year I got a 3rd-place, and we had a lot of great memories. This motivated me to attend this hackathon again this year, also the 3rd hackathon I’ve ever attended since my college year.

Learn more about Hacks for Humanity.

Different from other hackathons, Hacks for Humanity focuses more on solving problems for social goods, team collaboration, and entrepreneurship.

With multiple skills from business, design to web development, we have a clear division of labor, and everybody put their great job into our project, and lead us to the victory of a grand prize.

Every hackathon offers prizes and rewards that we love. However, here’s the thing – While this hackathon is not as “big” as other I attended, but that’s a great thing because, at Hacks for Humanity, every team has a chance to present their project, or we can say a “startup”, on the stage. Even though the project is not completed technically, we all have great ideas with mockups and trying to present our idea with video and presentations with powerpoint to the “venture capitalists”, the judges and mentors. Hackathon is not just “hacking”. Everyone, including developer, engineer, designer, artist, entrepreneur, humanist, business, and futurist is supposed to be treasured and got a chance to show their own talent.

Big thanks for this opportunity that became such a great experience. I feel motivated, and I will never stop creating things and get the most out of my college life.

Next Step

Startup Breakfast, November 11, 2017

One of our grand-prize rewards is a letter of invitation to a startup breakfast organized and hosted by Michelle M. Mace, President, and Owner of M3B Inc. and her family. Organizer of Hacks for Humanity from Project Humanities, mentors, and the TOP7 teams participated in this hackathon attended this event. We pitched our product again and got some valuable feedback.



Big thanks to Mrs. Michelle and your family for hosting this meaningful event at your place, and thanks again to all mentors and organizers for your feedback and advice.

Future Thoughts

We’re holding our project idea, although we’re not working on it currently since we have other side projects and academic overload. However, there’s a lot of opportunities for the market and needs of volunteering, and we are looking forward to continuing working on it in the future.


  • Adobe Photoshop
  • Adobe Illustrator
  • Adobe InDesign
  • Apple Keynote
  • Apple Final Cut Pro X


  • Team Collaboration
  • Video Editing

Copyright © 2017~2018 Envolve. All rights reserved.

POSTED April 6, 2018

Leave a Reply