Modernizing FamZoo

FamZoo
FamZoo provides prepaid cards and a financial education for your kids. 
All in one award-winning app!

Since 2008, I've designed FamZoo.com’s mobile and desktop app, marketing website, blog and many more! This project showcases an evolution of my design style and approach. I work collaboratively with founder and developer Bill Dwight on a “lean UX” process of design, understanding constraints of a small startup team on a tight timeline and budget.
Agency
Lealea Design

Responsibilities
Research and Discovery
User Experience
Visual UI Design
Art Direction
Graphic Design

Team
Development — Bill Dwight
Development — Chris Beaufort
Illustrations — Henry Payne
Mobile App Screens
Let's start with the end result: our customers routinely compliment us on the look and feel of our design. The design matches the goals of our brand perfectly, and it's a key element in delivering a positive overall user experience.

BILL DWIGHT, CEO & FOUNDER
FAMZOO
Initial New Control Panel
Revised Control Panel Iteration
Account Trends
Chore Checklists
Project Needs

The primary goal is to provide the tools for parents to teach their children of various ages — but primarily teens — better financial literacy. This is achieved through checklist and account transfers due to cause-and-effect. Do your chores = get an allowance bonus! Delay chores = receive a penalty. Additionally, the app encourages finances to be split between "spend, save, give" with incentives heavily weighed toward saving and giving.

For this particular project, we want to give our users an experience on desktop that matches the mobile design experience. In the 10+ years FamZoo has been around, we’ve gone through several app iterations and this case study focuses on the most recent direction.
I reviewed Wave Apps and Mint for design research as well as flat design best practices.
Research and Discovery

Since FamZoo is a lean team, most user testing is internal within the FamZoo team (including me) where we iterate on comps. However, throughout the years, our team has used tools such as usertesting.com and informal user tests involving observation of FamZoo users while they use the interface. In addition to those tests, Bill has gathered a bunch of direct customer service feedback that allowed us to identify a couple main problem points:

+ Switching between accounts and views
+ Identifying global actions
+ Account-specific actions

We received feedback based on app reviews, such as those in the App Store, that the desktop view was starting to look dated in comparison to the mobile app and the overall styling of the app. So we prioritized:

+ A reasonable sense of consistency with the mobile UI
+ An uncluttered look
+ Better discoverability without the need for mouseover tooltips

And finally, as the app has matured, so had its audience! The business needs shifted so the original styling of the site, more in line to be kid-friendly, now needed to have a more age-neutral look (like the mobile UI) to appeal to the primarily teen audience.
Style Guide & Accessibility Rules
Another challenge with a product and site that has evolved over the years is figuring what goes where and why. Originally, this was just a Basecamp text document that outlined hex codes and assigned them to elements. Over time, that became cumbersome, plus it wasn't descriptive nor did it reflect what it actually looked like. Then, as web accessibility has become a higher priority (FamZoo VP of Operations Chris Beaufort is color blind, too!) we needed a single source to reference original color choices and its more accessible counterpart, alongside rules of usage.

Enter the Style Guide!
My design work for FamZoo goes beyond the digital realm. I was also responsible for exploring other ways we could push the FamZoo brand and create print materials imbued with the app's sense of playfulness to appeal to its family audience.
Business Cards with Variable Backs
Key Takeaways

I learned a lot about flat design and even more about our product’s functionality! The design process allowed us to dive deep into complex user actions which was fun and enlightening.

During my research, it was surprising to see some of the patterns that are more established in other interfaces — left logo, logins on the top right — were abandoned. In the end, trying that pattern out confused our team and we decided to work on a more established navigation that was similar to our current one. The main changes focused then, instead, on the interior content of the accounts but we wanted to keep the main navigation between app sections consistent.

The most challenging part of this project is scale of resources. Changes like these over ten years is live moving a large ship. However, documenting the patterns we established in a Style Guide allowed our team to make better incremental improvements across all web properties.

It felt great to have a chance to revisit work that I did so many years ago, plus the back and forth with the team!
Modernizing FamZoo
0
11
0
Published:

Modernizing FamZoo

Since 2008, I've designed FamZoo.com’s mobile and desktop app, marketing website, blog and many more! This project showcases the evolution of my Read More
0
11
0
Published:

Tools

Adobe Photoshop
Adobe Illustrator

Creative Fields

Copyright Info

No use is allowed without explicit permission from owner