Bettter

User Interface & Experience Design

My Master's thesis centered around the creation of a service called Bettter – a game that connected volunteers with sponsors to fund nonprofits. By using the service, volunteer carried out tasks for their friends and neighbors while earning points and completing fun challenges. Tasks included anything on a sponsor’s to-do list: raking leaves, tutoring students, designing a logo – pretty much everything was fair game. As a result, users of Bettter were not only helping to fund the organizations that were making a difference in their community, they were also helping their friends and neighbors to get things done.

I spent the better part of two years developing the project, from branding and wireframing, to user flows and extensive user testing. The finished product was a 110 page book that documented my design process, user testing procedure, and implemented refinements based on my research findings.

An outline of three user personas - distinct primary audiences for the service. — I began this process by developing user persona's based on the service's primary audiences. Who were the people willing to carry out service work? And who were the people in need of extra help around the house? I sought answers to these questions here in order to better inform the design.

Wireframes defining the underlying skeleton or layout and architecture for the site. — With personas in hand, I created a sitemap and an extensive set of wireframes that defined how these audiences would discover and interact with one another on the service. This stage also defined the user flows required to carrying out complex tasks, such as sponsoring a volunteer.

Style tiles used to iterate on the site's look and feel. — Once the site's layout and task flows were defined, I iterated on the visual layer that would sit on top of the wireframes. I used Style Tiles to quickly work through the typography, color palette, voice, and art direction that would define Bettter's visual identity.

A screenshot of the finished home page, created by combining the wireframes with the chosen style tile. — The finished home page after combining the Style Tile's visual cues with the structure of the sitemap and wireframes, informed by audience personas and extensive user testing.

Example profile pages for nonprofit organizations and individual volunteers.

Screenshots of pages related to sponsoring a task on the site. — Example task flow pages for defining and scheduling a sponsored activity.