Designing a banking app for Gen Z
Product Overview
At Step, our mission is to improve the financial future of the next generation. Our first product was a secure spending card that helps build credit and an app to keep track of your spending. The goal was to become the largest bank for Gen Z in the United States.
My role
In April 2019 I joined Step as the Head of Design. I was something like the 10th full-time employee, there were no designers, a basic brand identity from their website and an app with a referral leaderboard.
Prior to my arrival the team had launched what they called the “Referral App” which had created a substantial waitlist by offering users $1 to invite their friends. The app featured a leaderboard incentivizing users to invite friends but no banking features. While we finalized details on the physical card, I was tasked with designing the banking app.
Timeline of the launch of the Step app
Defining the problem
My task was to design the mobile application for a bank for teenagers.
Making sense of a big problem
To understand the founding team's vision, I ran design sessions and met individually with cross functional leadership. We discussed examples of "best in class" competitors and what we liked and disliked about them. Together we collected a list of requirements, functionality and features that needed to be designed and then built.
Basic feature set for teen users
The Step Card (a secure credit card)
Spending (Checking) Account
Peer to peer transfers
The ability to link a debit card
Research
To get some understanding of the audience I created an interview guide and began conducting interviews with teenagers to understand their attitudes and behaviors.
I also read numerous reports, articles, and studies to gain a balanced perspective on Gen Z. I found material on the psychology of adolescence to be particularly interesting.
Key takeaways
Experience and knowledge of banking and finances was lower than we thought.
Most people get their first bank account around 14 years old but experience with finance varies… a lot.
Both children and parents wanted financial independence for the child.
Young people didn’t have a lot of money so checked their balance frequently.
Based on all of the research we prioritized jobs to be done, created design pillars, and user personas. These artifacts helped provide structure and direction to the design process.
Design pillars from the initial launch
Jobs to be done
Viewing my balance - Do I have enough money to make a purchase?
Transferring money - I want more money
Financial Health(?) - Where did my money go?
We started the design process prioritizing these actions.
The design process
Starting with high-level "movie poster" concepts, I collaborated with stakeholders to align their vision. These concepts helped us pick our favorite UX patterns and start to organize features and functionality.
We had a very limited feature set at time of launch so after considering several options, we went with a simple version based on concept 1 that focused on the top jobs to be done (Account balance, transferring money to other people, and the past transactions). As we began to finalize design decisions, I formed the spec to document them.
Final App Navigation is simple and focused on balance and P2P
Once I had the basic structure of how the app was organized I started to flush out the UX for each feature like P2P. There was a lot to do so at we hired a junior product designer (the talented Olivia Ouyang) to help with the workload. I was able to delegate functionality and flows which allowed me to think about the big picture a little more. Figma organization became super important once there was more than one person working on the files. To maintain quality and consistency I started creating a design system with basic components for the app.
First version of the peer to peer transfer flow in the Step app
At this point we recognized that we needed to create icons, illustrations, etc., but hadn't discussed the art style or visual identity. So the design process took a little detour while I worked on that but at least I had Olivia to continue to work on the app.
Defining the visual identity
We created personas, brand pillars, and guidelines based on our prior research. And after collecting art inspiration with the team, we explored a revised art style that aligned with our brand pillars.
Initial brand pillars for Step launch
I created moodboards with inspiration and competitive analysis that we thought demonstrated the characteristics of our brand pillars visually. These helped guide our own explorations.
These were some of the top examples that the team liked from the moodboards I created.
We created example illustrations internally and hired an agency to create some. The goal was to explore a variety of styles. Below are some samples.
Early explorations created by Olivia Ouyang, Fireart (a digital agency) and me.
Below is the art style that won out in the end. The teens we interviewed liked it and we were happy with the result.
Examples of the illustration style I created for the first version of the Step app.
Early Product Testing
As engineers started work on the app we finalized the art style directions we wanted to show and created a robust prototype of the app design. We recruited teens that the team knew or customers from the referral app to help give usability feedback and guide our decisions. We did picked a final art style and improved important flows like onboarding and transferring money.
Parents couldn’t find their teens account in our usability sessions
Usability Feedback
Sponsors found it difficult to find and fund their teens account.
Users favored the art style with doodles and photos combined.
We quickly tested some solutions to make it easier for parents to fund their teens account. Product education like the gif above didn’t seem to work so we ended up added some more explicit arrows to guide them (image below). A larger change was made right after launch that solved the problem more completely.
Soft Launch
Starting in December 2019, we began testing the real product internally and with friends and family. We then added real users from the waitlist, starting in January 2020. In May, we opened up the app to all potential users but in stealth mode (no marketing).
As we rolled out our product we wanted to test the basic functionality and monitor key metrics to identify areas we could improve before putting marketing dollars behind a public launch. The biggest problem we wanted to fix was with onboarding conversion. It was challenging to onboard two different users (parent and child) to the app but it was required since children can’t open bank account without adult approval. We focused our efforts on these moments:
Soft Launch Objectives
Increase requests sent by children
Increase the number parent’s accepting requests
Next we wanted to talk to users to find out why they weren’t completing these steps and collect general feedback on the app.
UX Research - Real Customers:
Next we conducted moderated interviews with 15 teenagers and 10 parents and surveyed hundreds of responses. We focused on teens since our research showed most children get a debit card around 14 years old and to avoid COPPA restrictions. The surveys and interviews provided more insights into general attitudes and behavior, and usability testing helped identify teens' pain points.
Pain points
Teens didn’t think their parents would approve
Teens didn’t think there parent’s had time
Customers had concerns about the app's legitimacy.
Customers still had concerns about entering sensitive information.
We were missing basic features like ATM, Savings, etc. that they expected from a bank.
UX Optimizations and Experiments
To improve these metrics and pain points we ran onboarding conversion tests which came out of targeted design sessions I ran. Below is a list of some of the experiments.
Forced the child to ask their parent for approval during sign up.
Gave the child talking points to help in person conversations with parents.
Added web landing page to provide parents more info.
Added a primer to prepare sponsors for entering sensitive information.
Added recurring payments (Allowances)
Added the ATM feature.
Basic UX for setting your ATM PIN. We were shocked by how many teens wanted access to cash in our soft launch.
Unsuccessful tests
When it comes to growth I think building a culture of learning is important. So in the spirit of promoting experimentation here is a list of unsuccessful tests we ran:
Web sign up flow.
Videos on our website landing page.
Reducing and reordering the onboarding steps.
At least 1,000,000 messaging tests
Different referral amounts and reward criteria.
Sending articles on Step in messages to parents.
Thumbnail for a test video sent to parents of teens that want to join Step. One of many unsuccessful tests we ran to improve onboarding conversion.
Soft Launch Results
By the time we were ready to put marketing dollars behind a launch we had achieved the following results:
Improved overall teen onboarding conversion
Improved parent conversion
Added 2 of the most highly requested features by customers.
Early tiktok post from Charli D’Amelio
The public launch
We officially launched Step on September 26, 2020. We partnered with the biggest TikTok influencer at the time Charli D’Amelio. By the end of 2020 we had over a million accounts created. Here’s some key learnings I took away from the experience.
What worked well
Being live for so long before our public launch let us better understand the audience so we could optimize flows and improve their experience.
Having a clear list of requirements made building the initial app faster and more efficient.
What didn’t work
Focused too much on optimizing flows and not exploring some new, larger ideas as well.
App Store screenshots of our peak on the app store during launch
Conclusion
Overall we were super happy with the launch. The initial app included all of our requirements plus some additional features. While the timeline was longer than we hoped our initial user growth really exceeded our expectations. Step still has a long way to go before becoming the largest banks for teens in the US but by all measures the launch was extremely successful. Here are some highlights:
Highlights
#14 overall on the app store (peak)
#2 in the finance category on the app store (peak)
1 Million teen accounts by the end of 2020
LifeTales
LifeTales is an app that allows families and friends to share and preserve their fondest memories. The app lies somewhere between Storycorps and Facebook. I designed the UX, created visual mock ups, suggested functionality and oversaw 3rd party designers. Since I was one of the only members of the team with Mobile Application experience it was my job to communicate and educate the rest of the team on platform guidelines for both iOS and Android. One of the most difficult challenges with designing the app was that the target demo was older and we were often surprised of the results when testing with our target audience.
Sketches
My motto is always do one thing well before you try and add additional functionality but it was extra important in this particular case. Since our users would usually older we focused on getting them to create a story as quickly as possible. That meant large buttons that took them to the camera or audio recording screen in as few click as possible. I also advocated that most secondary screens stick to one primary use-case.
Showing large pictures of the user's friend and family was also important to me. People were being asked to tell intimate details about their lives. I think we can all admit how hard and awkward that can be sometimes. We decided to show pictures of the people that were in the story during record mode for this reason.
Wireframes
Some of the numerous UX explorations and flows I did for LifeTales. Since I was working remotely from the team I had to be diligent in my documentation. It was a good reminder to be detailed when explaining your work/logic and also to take notes while you work. The wireframes above above are some of the main flows; the various create flows, invite and the FTUE logic/flows. These are nowhere close to final and we iterated on them constantly. There was a point with the FTUE where I took a step back and realized that if we're having to explain so much to the user they probably won't get it. Remember the target demo was between the age of 45-65. From then on I became an advocate of simplicity.
Working remotely with engineers
Documentation is important when working with engineers but its also important to be able to work things out together. Working remotely makes that difficult. My spec sheets needed to be very detailed since the engineers were in Toronto and I was in SF. To make matters worse some of the engineers were very new to mobile development. Above are some of the numerous spec sheets I did for the project. I also did frequent calls to go over spec sheets and UI implementation.