Ecopreneur Media

Ecopreneur Media is a school platform that helps schools and students manage, track, and fulfill volunteer hours.

Overview

Challenge

- School administrators are frustrated with the lack of innovative tools to suggest and track each student's volunteer activities resulting in hours of paperwork and room for error.

- 72% of Student Volunteers struggle to find more than one volunteer opportunity they care about. Additionally, they struggle to provide accurate information for college applications without efficient tracking tools.

‍

Objectives

Admin users to

  • Easily search and share volunteer events with their student body
  • One-touch QR check-in and monitor student attendance for live events
  • Track student activity through data analytics

Student volunteers to

  • Search and sign up for volunteer events they're interested in
  • A quick QR scan check-in to events to track volunteer hours
  • Generate a service resume with student activity data to use for college applications
Project Scope
Tools

Adobe Illustrator, Figma, Figjam, Calendly, and Slack

Role

Lead UX Designer

Duration

1+ year

Design Process

Discovery

01

Empathize

After surveying multiple schools, our initial market research highlighted:
‍

‍

So I asked, How might we...

... help students keep track of their completed and pending volunteer hours in a simple and visual way?

...reduce the administrative burden on school staff managing volunteer programs?

‍

User Persona

Define

02

Admin User - Check-in

One of the main functions teachers wanted was to be able to easily check students in at events and approve hours quickly. It was important to me, that these actions could be done on one screen.

‍

‍

How does this work?

  • When an event begins, a QR code will be generated automatically.
  • Admin can display this code at the live event, where students can then scan in.
  • Once scanned, the student's information is logged automatically, tracking their hours.

‍

‍

Admin User - Analytics

100% of schools also sought a platform that compiles data for college applications and readiness.

Some unique data points:

  • Economic Impact - the dollar value of an hour of volunteerism
  • Demographic - live monitoring engagement levels of enrolled students according to their demographic information

‍

Student User - Check-in

We knew we needed the students' experience to be simple and seamless for them to use our platform.

So we said:

Scan the unique QR code -> check in -> accumulate points from volunteerism.

‍

‍

How does this work?

Students use tablets or phones to scan QR code

or

Log in to send a message if unable to attend

Go be an EcoWarrior and save the planet.

‍

‍

Ideate

03

Design System

Developing the School Portal facilitated a significant expansion of Ecopreneur's design system.

  • created an extensive component library designed for scalability and consistency.
  • included versatile, reusable components that streamline development and ensure a cohesive user experience
  • As the portal evolves, these components can seamlessly adapt to new features and areas, enabling faster iterations and maintaining visual and functional harmony across the platform

‍

Documentation snippet of just the project card's components

Prototype

04

As one can imagine, building an entire MVP for a startup requires many changes on the fly. Here are just some of the iterations that went into designing the Student Dashboard.

‍

V1

  • Organized yet busy
  • Added in main function for check-in
  • sticky right side with user information
  • Feels a bit overwhelming

‍

V5 (final)

  • The main function of check-in is clear and functional
  • Simple Stats tracker on the right, all other info can live in the account profile
  • Cleaner visuals and negative space allow for breathing room

‍

V6 (final_final)

To maintain consistency with the updated website,

  • Updated cards and some layout changes
  • Edited out the teams and the point system for a leaner MVP for the initial launch

Development

While I made sure we maintained constant communication with the dev team, there was one big challenge we didn't expect.

We used a third party to funnel volunteer opportunities onto our platform which required an API key. However, there were some UI requirements that came along with the integration we weren't aware of. Unfortunately, this led to some setbacks as we had to redesign some of the UI to fit those requirements.

We pushed through these obstacles, maintained communication, and built around those setbacks, and thankfully we were able to get back on track to meet our beta launch deadline!

‍

‍

Looking back & looking forward

When I think of all the work that's gone into this project, I feel an overwhelming sense of accomplishment, relief, and excitement. We had hiccups due to unforeseen circumstances, like losing team members and challenging API integrations that pushed back our timeline, but we adjusted as needed, sticking to a lean MVP to ensure we would meet our hard deadlines.

With the beta launch, I maintained close communication with sales and tech teams to collect valuable feedback as we started iterating on updates, new features, and a mobile application launch!

View Prototype

Test

05

Unmoderated Testing

Due to time differences and a serious time crunch, we opted for unmoderated testing via Maze.

  • Students had a much easier time navigating tech than admin
  • We noticed the admin had issues with initiating the check-in flow, so this discovery led us to turn it into an automatic feature, making significant improvements
  • The overwhelming feedback from the users was excitement and eagerness to try it out!

‍

Redesigned iteration based on feedback for admin's check-in flow automates the check-in process via geotags. We also simplified the interface by removing the upcoming projects that are not relevant to the current project. Lastly simplifying and organizing complete projects for approval for less room for error.

‍