Sequin Debit Card
Engaging Users with a Financial Feminist Learning Tab
Role: Lead UX Designer for team of 3 Designers; Responsible for Decisions around Design Project Management, Client Communications, Research, Wireframes, User Flows, and Presentations.
Tools: Figma, Adobe Photoshop, Maze, Google Suite
Collaborators: Worked closely with 2 Sequin Founding Software Engineers
The Story: Sequin needed to organize all of their debit card perks, rewards, and benefits because users were having a hard time finding them. When we did research, we had a hard time finding examples of users that would use a debit rewards card that costs $9 per month. Through an additional round of research, we found that Users actually valued the learning and financial education aspect of the card and not the cashback, rewards, and other perks of the card. Through this insight, we found the value proposition of Sequin had shifted from debit rewards to an education platform. We reflected this change by putting "Learn" into a separate tab, adding question mark icons for financial definitions, and adding prompts to learn more about topics throughout the app.
The Client's Challenge
Sequin came to us weeks before the launch of their Sequin Debit Rewards Card - a 'For Women, By Women' product that was designed to educate young women (who have been traditionally marginalized in finance) about finances. The Sequin card empowers young women with cash back, a yearly pink tax repayment, a Slack community of Financial Feminists, a series of finance education videos, women focused brand discounts, and a future credit building product. I was excited to begin this contract work with Sequin, as it aligns with my own values surrounding Social Justice, uplifting marginalized individuals, while also making the world more equitable and easier to use.
The problem?
Users were having a hard time finding card rewards which was resulting in them not wanting to use their card and eventually cancelling their card.
How could this be when the card offered so much information and seemed to align with the values of their users? Additionally they asked us to help them standardize their web design system to make their mobile site match the branding of their desktop site.
Project Business Goals
1. Optimize the Rewards Tab (reorganizing the other tabs if needed) to increase user engagement with rewards.
2. Decrease user confusion around rewards mechanics to increase user retention.
3. Match the mobile site to the fun, bright Coral and Purple colors of the desktop site and create a basic Web Design System so that the branding is more cohesive and unified.
4. Create a hierarchy of recommended initial changes to help rollout a Minimum Viable Product quickly so Sequin gets the most out of our designs ASAP.
Existing Screens
Colors not cohesive with current website and actual card
Credit Score checker on a debit card?
Perks page hides benefits & Sequin Financial education.
Users confused by how and where to use rewards
Sequin Primary Bright Coral color is not WCAG accessible as Text on white nor black
Where to Start?
We decided that we needed to better understand exactly what users were struggling with. We also wondered how other cards solved this problem and if there were any existing UI patterns that users might already be familiar with. To achieve these insights we planned:
1. Interviews with Users in target demographic (18-40 year old women)
-
Who are our users?
-
What are their preferences?
-
What do they care about?
2. Work with our client to conduct Generative Usability Tests with existing users
-
What are users confused by?
-
What is working?
-
What is being forgotten?
3. Investigate Competitor Design Trends. (Competitive Analysis of Bank of America, Chase, Capitol One, & Credit One.)
-
How do they communicate complex rewards terms?
-
What UI Trends are they using? (information hierarchies, colors, buttons, icons, etc.)
-
What is common between most competitors?
Affinity Mapping Interview Statements
After interviewing 8 users and 3 usability tests, we collected all of their statements and grouped them into "I..." statements to find trends amongst users.
To see this affinity map in high resolution checkout our Figjam file.
Top 5 Key Research Insights:
1. Users care about Credit Building, Sequin University, Cashback, Pink Tax Credit, and Discounts in that order.
2. Users have a hard time using discounts because they are often hidden within their banking apps.
3.Users are unfamiliar with debit rewards cards and learn about finances primarily through friends and family.
4. Banking Apps reiterate rewards terms on rewards tab and expand on complex ideas with question mark icons and definition modals to decrease user confusion.
5. Banking Apps show sneak peaks of top 3 discounts to entice user to discover all of their discounts and to increase user valuation of their card.
Research revealed a Problem!
After interviewing users and getting an updated brief from the client, we found out that the Debit card came with a monthly fee between $7.40 and $9.00. Additionally there would be no credit building tool offered with the launch of the product.
-
We had no examples of users that would be willing to pay $9 per month for a debit rewards card.
To solve this problem, we launched a single question on an unrelated slack channel and on our social medias.
-
"Do you use a Debit Rewards Card? DM us and tell us why."
A few people responded, the only examples we could find were debit cards with no monthly fee. Across the board, users reported they were only interested in rewards cards that could build their credit score.
We tried again - maybe we need to reanalyze competitors - surely if other banks are succeeding, there is still a market for this product?
-
Again we looked, all of the competing debit rewards cards we found were free.
As a last resort, I went back to a few users that we had previously interviewed and explained the new terms, they finally elucidated a solution for our most important, project defining insight:
-
"If the card has a great financial education, then I could see myself using the card to learn more while I'm unable to qualify for a credit card on my own." - 22 year old, Female College Grad
Insight 6: Redefining Information Architecture & Business Objectives
6. The value proposition of this card to users is not about the cashback, discount codes, nor debit card itself. The value of this product is the Financial Education services aimed at young women who need it.
-
The existing site hides the financial education at the bottom of the Perks tab. Let's lift that call to action and put it front and center by giving it a tab of its own.
-
This feedback has rippling effects for Sequin's business. By knowing this, they could start to focus on improving the financial education, advertise differently, and elevate the card as a learning experience.
Personas
With all of these insights, we created 2 Personas to guide our designs.
We had discovered that most women who would utilize this card progress on a similar life path, starting off with our college aged primary persona, Sanda Sequin, then later on many women later in life find themselves in our recently divorced immigrant secondary persona, Flora Finance.
Primary Persona
Secondary Persona
The Vision
The Sequin Debit Rewards card will allow marginalized women to gain financial literacy so that they will be more financially independent and able to make smarter financial decisions for themselves and their families.
User Flows
We created user flows for 3 tasks. These flows show what the user needs to do and helped us visualize what screens we needed and any other considerations we would need to take before designing.
Design Studio
We held a Design Studio, creating 50+ variations of designs that aligned to our research in a matter of a few hours.
After agreeing on a single design, we created digital grayscale wireframes in Figma and conducted an inventory of all existing colors across all Sequin screens.
To get stakeholder feedback before moving forward with full color and usability testing, we held a meeting with our client. We received a few design notes and decided on the finalized standard colors.
Grayscale Mid-Fidelity Wireframes
The grayscale wireframes below reflect the insights we gained from research. Note that we added the Learning Hub based on the 6th key research insight.
We tested our designs in mid fidelity/grayscale to get targeted feedback on our buttons, copy, and overall information architecture layout without users and stakeholders focusing on colors.
New Learn Tab!
Rewards clearly defined with reiterated terms, cards, and ? icons
Join Sequin Slack Community
Proposed Colors & Fonts
These proposed colors were narrowed down from about 50 colors across their existing desktop & mobile sites. After checking colors for accessibility, we found their Primary Logo color (#FC7760 Coral Bright), was not accessible for text on white or black. (WCAG Accessibility standards).
- Therefore, we decided to make their secondary color (#60034C Purple Dark) the primary call to action.
- We did not make any official sizing recommendations for desktop, but did recommend font sizes 32px, 24px, and 16px for mobile screens.
Usability Testing
Results
To test our designs, we asked 8 users to complete 4 tasks with a total of 7 associated goals. The results of the test and any necessary improvements are listed below.
Goal 1: Users will be able to find out how much cash back they are going to receive on their next statement with less than 1 moment of confusion.
-
100% of those tested Succeeded
Goal 2: Users will be able to determine what their cash back means and will be able to explain correctly how to increase their cash back payments.
-
83% of those tested Succeeded
-
Improvement: add a question mark definition modal for each reward term.
Goal 3: Users will be able to determine how much pink tax credit they have left.
-
100% of those tested Succeeded
Goal 4: Users will be able to determine what purchases their pink tax credit was used on with less than 1 moment of confusion.
-
100% of those tested Succeeded
Goal 5: Users were able to use a discount code with less than 1 moment of confusion.
-
66% of those tested Succeeded
-
Improvement: Some users assumed the discount code would be automatically applied after they opened the merchant website.
-
Improvement: Add a "copy code" button and place code in an uneditable form field to increase user understanding.
Goal 6: Users will be able to identify what discounts they would be interested in using on the discount page.
-
0% of those tested Succeeded
-
Improvement: Users were unfamiliar with the merchants on the discounts page. They noted that they would probably only use discount codes for brands they recognized or understood already. Another user mentioned that she felt it was strange that Sequin was calling products “women-focused”.
-
Improvement: Add icons to define reasons for "Women-focused".
-
Improvement: Add 1 line description of what each merchant sells.
-
Improvement: Added a merchant bio screen where Sequin could explain their women centered reason for selecting each brand.
Goal 7: Users will be able to identify Financial Education as the primary benefit that the Sequin card would bring to them (or someone described by personas.)
-
100% of those tested Succeeded
Client Feedback
"I had the pleasure of working with Emily on a website redesign project for which she was the designer and I was a software engineer. She was wonderful to work with every step of the way through the planning, design, and handoff process. She took thoughtful and thorough notes regarding the engineering and project needs and specifications and was very careful to address each one of these requirements. The designs were above and beyond our expectations and included so much additional work that we didn't expect. I would love to work with Emily again in the future."
- Amanda Truetler, Founding Software Engineer at Sequin
Return on Investment & Metrics
While we are still waiting for implementation of our recommended changes for official metrics, we did note:
- For 4 usability test tasks relating to finding and understanding Rewards, users went from 0% - 20% success to 100% success amongst those tested.
- In the beginning, most users did not know the education existed to 100% of tested users identifying financial education being the primary benefit of the card.
- By identifying that Users were primarily willing to use the card due to the financial education, Sequin now has a major insight into their business that will have rippling immeasurable benefits.
Minimum Viable Product
Since Sequin is a startup and weeks away from launching their first product, it was important to find 3 initial changes that they could implement now. We collaborated with Developers to plan these three MVP items, with remaining changes planned for later iterations.
1. First: Add Sequin University (Learn) as its own tab to entice users to make use of their financial education. This will increase user retention, word of mouth referrals, and aligns with Sequin's core values.
2. Second: Replace the button for Discounts with the 3 sneak peek cards to entice users to use discount codes. This will increase user retention and make the value that Sequin put into creating business relationships worthwhile.
3. Third: Add Question Mark icons to key terms to help users learn what complex financial terms mean and keep their app with the spirit of financial literacy. This will increase user engagement and decrease confusion around all financial tools.
Recommended Next Steps
1. Improve Sequin University by chunking hour long videos into 2-6 minute videos with short readings. This will allow users to learn as they're on the go. (See examples such as Noom, Coursera, etc.) If and when Sequin University is improved, it could be the primary profit generator for their business.
2. Pursue a full native app for Sequin mobile banking. Users reported feeling safer on installed apps instead of on mobile web. This would keep users returning to use the app and increase user trust with Sequin, ultimately reflected in User Retention. Additionally mobile web design does not conventionally include the use of a bottom bar.
3. Pursue a credit building product such as an attachable credit line or a credit card. Most users were not willing to pay for a debit rewards card, but were willing to pay for credit cards and/or valuable education courses. This would also keep users for many years to come, instead of them dumping Sequin once they have enough credit and Financial literacy to get cheaper rewards card.
Takeaways & Learnings
1. Get outside insight into colors. I wish we had done more research into the colors of the Sequin. Initially we loved them and the majority of users reporting loving them as well, but after looking at them for so long we started to dislike them. I would've like to have done more targeted testing on color schemes with users and specifically included more color insights from competitors. If I could do it again, the colors might have been more subdued and used more white space.
2. I learned more about Collaborating with Stakeholders. I felt I our relationship with the Software Engineers worked wonderfully: we were clear about expectations in the beginning and at the end I went through our entire Figma file and made sure layers were correctly labelled & grouped. I added annotations to each screen to communicate exactly our intentions and to relay what might vary now and in the future. The Software Engineers were pleased with how organized it all was and we had a great working relationship, which has resulted in referrals for freelance work for myself. However, we didn't do the best job setting up communications with all stakeholders. Some other members of Sequin did not know we were nor even what UX Design really means. In the future I want to reach out to all stakeholders and set expectations and build a better connection before work begins.
3. Cross check designs against research insights before usability testing. Some of our insights got lost as we moved through designing tasks. After usability testing, I realized some of our insights were direct callbacks to things we had already discovered. To minimize this in the future, I will be pausing before moving onto the next step to double check our research insights.