Society of Grownups Website

Society of Grownups Website

people

Project Team

face

Responsibilities
  • Mockups
  • Prototypes
  • Minor Development

build

Tools Used
  • Balsamiq
  • Adobe Creative Cloud (mainly Photoshop)
  • InVision
  • HTML/CSS

Challenge

Society of Grownups needed a way to help its customers, affectionately called Grownups, to start thinking about the big goals they might have for their lives. These goals were used to help our financial planners build a useful path forward for each Grownup.

Approach

A team from design firm IDEO completed years of research into how people thought about their money. Bourne of this research was the idea that financial advice should be provided based on the goals of the individual, not just to serve the interest of the adviser or the idealistic investor. A digital tool to help facilitate this was wireframed by the researchers and designers at IDEO, and prototyped by developers at Bocoup. When I joined the team, I helped build this concept into a reality. I spent much of my time working directly with IDEO to update static comps as we came up with new ideas and got feedback from potential users.

Outcome

Annotated wireframes were created, outlining all of the anticipated steps the Grownup would take as they progressed through finding their goals, setting up their account, and scheduling time at the Society of Grownups physical space. The wireframes were also imported into InVision to create a working prototype that mapped out specific interaction patterns that were used to communicate with the developers working on the project.

This website won The Webby Awards People’s Voice for Advertising & Media in Financial Services & Insurance. You can even see me accept the award with our 5-Word Speech!

Lessons Learned

While the designer at IDEO used InVision to specify interactions between pages, there were a lot of interactions that either weren’t prototyped due to time constraints or just couldn’t be modeled easily through the tool. In some cases, it was easier to prototype directly in code. As the consultant teams from IDEO and Bocoup rolled off the project and more work was picked up by members of the newly formed Society of Grownups design and development teams, I continued to provide code examples to the developers where it made sense, decreasing the amount of time between iterations.

Important Note

The image above was created by a designer from IDEO with whom I worked very closely to iterate on this design. This image is for illustrative purposes only and should not be construed as representative of my work entirely.