Overview:
College Savings Trust is a fin-tech web based app that allows parents of all demographics to set up college trusts for their children.
The goal of this project was to create a mobile iOS app of their web platform, but with a higher level of visual design and a more intuitive user experience.
The team consisted of 6 product designers (including myself) and a PM. I was active in the entire design process, but was also a co-lead on the hi-fi phase. We conducted competitive analysis for each feature / flow we developed, then jumped right into sketching, lo-fi, and hi-fi.
Because the scope of this project was so large, I'm going to specifically highlight the funding source / deposit flow, gifting flow, and the account page that we designed.
Animation of savings calculator feature
Add Bank / Deposit Flow:
The first flow that we had to set up was the funding source flow, which consisted of separate flows for adding a debit card, adding a credit card, adding a bank, paying with a check, and direct deposit.
The second flow that we designed (also a core feature) was the deposit flow, which all of the funding source flows would loop back into.
Below are my sketches for the "add bank" portion of the funding source flow, as well as the deposit flow.
My sketches for the add bank / deposit flow
Specifically with the deposit flow, we were trying to figure out what features would encourage users to keep depositing to the child's college fund. We landed on the idea of giving the user the option to make one time annual deposits, however the default state would be monthly recurring payments.
Next we took our design to Sketch to create a lo-fi version.
Lo-fi mock up of add bank / deposit flow
Contribution Flow:
Our next challenge was to create a way for users to invite others to contribute to their child's fund.
After looking at several registry apps for inspiration we came up with sketches for how users could create a contribution page that they could send to their contacts.
My Sketches for contribution flow / contribution page
Then we built a lo-fi version.
Lo-fi mock up of contribution flow
Account Screen:
The account screen was perhaps our biggest challenge throughout this whole project. It was the most integral part of the app because it generated the reward for the user. It had to be the "hook" of the app. Originally we had designed the account page around a singe child view.
First draft of account screen
However our PM soon informed us that most of the parents that were currently using the web version had multiple accounts for different kids. We needed to adjust our account screen so that multiple children's accounts could be viewed and managed through a single user account.
My sketches for an account screen with multiple children
Then we took it to lo-fi.
Lo-fi mockup for account screen with multiple children
Our PM liked our design, but once again came back at us with a desire to create a savings calculator feature within our account page. This would serve as a hook to get parents to invest more into their children's accounts.
And so the sketching continued...
My sketches for a savings screen with a savings calculator feature / screen
Then we took it lo-fi once more.
Final version of account screen for multiple children with savings calculator
Hi-Fi Color Treatment:
We had decided upon all of our design elements (font size: 17, font: Apple's SF Display and Text fonts, etc.) throughout our lo-fi stage except for our colors. Once we had created all of our other flows (log in, onboarding, investment preferences, and other features) and made small adjustments to our existing lo-fi design, I led the team in creating a color palette for hi-fi and dropped it in.
Color palette for hi-fi
I also created some illustrations for the app's onboarding flow.
Preliminary onboarding illustrations
Here is a bird's eye view of all of the flows we built out for the v1 of this app (coming soon once hi-fi treatment is finished).
And finally here are some selected screens with our hi-fi treatment.
Onboarding screen and savings calculator screen with hi-fi treatment