Task detail page wireframe, defining the underlying skeleton for the page Home page wireframe
I began this process by creating a sitemap and an extensive set of wireframes that defined how Bettter’s primary audiences would discover and interact with one another through the service. This stage also defined the user flows required to carry 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 created style tiles to quickly work through the typography, color palette, voice, and art direction that would define Bettter’s front-end design.
Better.org home page combining the wireframes and final style tile
The finished home page combining the visual cues from the style tiles, the structure of the wireframes, and the findings from extensive user testing.
Non-profit profile page User profile page
Example profile pages for nonprofit organizations and individual volunteers.
Volunteer task submission form Published task detail page
Example task flow pages for defining and scheduling a sponsored activity.