ServiceStart

At Bits of Good, student software teams build custom web applications for nonprofit partners every semester. Over and over, those partners need the same basics such as sign-ups, notifications, a member directory, messaging, and events. So each new team started by building them all over again.

ServiceStart is our shortcut, a modular framework that gives every new project a head start on those foundations.

I notably worked on the pieces that tie the framework together, namely the admin dashboard and its widgets, a brandable nav bar, the notifications inbox and popovers, the member join request status page, as well as mobile versions of volunteer-facing features.

A previous Bits of Good project, VolunTrack, set out to build a shared volunteer management platform too. However, it was built around one nonprofit partner, so ultimately, it became too rigidly tailored to that one organization’s needs, making it difficult for other teams to effectively use it as a reusable framework.

ServiceStart had to serve two audiences: the Bits of Good project teams who design + code with it every semester, and the nonprofit admins who run the finished volunteer management platform day to day.

To keep ServiceStart independent of any one nonprofit, we audited 24 previous Bits of Good web apps for recurring features.

Member directories, requests and approvals, login and sign-up, and profile pages showed up across far more projects than anything else, so recurring needs like these became the core of the library. One-off features such as chat and FAQ were left for teams to build as custom features.

ServiceStart is a library of 17 complete volunteer management features, designed in Figma and built in React. Bits of Good already has their Sunset design system for small components like buttons and input boxes. ServiceStart lives one level up, where every piece is a full flow, from signing up to sending a newsletter.

ServiceStart serves both Bits of Good teams who build with it and nonprofit admins who run the finished product. Both audiences needed some flexibility... but how much?

My first exploration: an editor for admins
I began designing a settings customizer for the end-user, similar to Shopify’s theme editor, where admins could mix and match layouts and menu item styles themselves.

After a lot of back-and-forth with our PM and EM, we agreed we were handing nonprofits control over small design details they had no reason to manage and this initial concept was scrapped.

Solution: split customization by role

Building each feature as its own module made the library easy to mix and match, but once assembled into a web app, the features had no home base. Admins had no high-level view of their organization and had to open separate full-page tools for even minor tasks.

Solution: proposing a home dashboard

A dashboard was not on any designer’s list of assigned features, including mine. Realizing ServiceStart lacked a connective tissue, I pitched this to our PM, and we added it to my scope. I drew inspiration from the modularity of iOS widgets to design a dashboard with widgetized versions of full features.

Exploration: selecting widgets and deciding on sizes
When designing the initial wireframes, small 1/6 widgets looked fine empty, but when filled with real content, they only held one notification or one event. So, I decided to cut them and have the widget size options be 1/2 and 1/4.

Intuitive Interactions
With the dashboard preview, admins can see their changes being made in real-time and customize the layout by dragging and dropping to swap or reorder widgets.

Let’s follow ServiceStart from kickoff to everyday use...