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.
Screenshots of nonprofit and user profile pages.
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.