Rhino Wallet — a UI & UX case study

Rhino Wallet

High-Level Overview — Rhino Wallet is a hypothetical banking app I created for my UI & UX Design capstone while taking part-time classes at Nashville Software School.

My UI & UX instructor Susan Culkin designed Rhino Wallet with various predetermined constraints. Our mission was to do user research and develop a banking app to disrupt significant competitors such as Venmo and PayPal.

During this process, I learned hands-on user experience principles and methods.

Project Goals

  1. Create a user-oriented experience
  2. Research the user, their needs, and their pain points
  3. Make design decisions based on data, not assumptions
  4. Analyze similar products on the market
  5. Avoid costly mistakes in the development phase
  6. Deliver the final product to stakeholders

Company Overview

Founder Susan Culkin and CEO Dani Crosby launched Rhino Wallet in 2022. Geared toward young people, Rhino Wallet is a digital banking service whose primary focus is peer-to-peer payments and helping people build credit so they can become financially independent.

Target Audience — 16+, young adults, anyone needing to repair or start building credit.

Attitude — Safe, secure, young person friendly, educational, engaging

Budget — Unlimited

Sprint Duration — 14 weeks

Rhino Wallet has no annual fee, no interest charges, and no credit checks. Cardholders set up a direct deposit and deposit funds into a Credit Builder Account. Purchases are made with their Rhino Wallet Card. At the end of the month, the balance is paid in full. On-time payments help beginners start building a credit history

Project Phases

  • Discover — Conduct user research interviews, build user personas, and evaluate competing products.
  • Design — Design key visuals and principle interactions using modern tools to create wireframes and prototypes for usability testing.
  • Develop — Implement responsive designs using HTML and CSS.
  • Educate — Share knowledge of common developer challenges and constraints by teaching several weeks of technical material to design-focused classmates.
  • Deliver — Facilitate discussions with important stakeholders, scope projects, and adapt designs to developer constraints.

Discover Phase | Week 1–3

Before developing Rhino Wallet, I conducted initial research to identify the target audience, frame the problem, and understand our users’ needs. I gathered enough evidence from interviews, competitive analysis, and building personas which gave me direction on what to do next.

Deliverables Used To Discover:

  1. Problem Statement
  2. Competitive Analysis
  3. AEIOU Research Plan
  4. User Research Interviews
  5. Insights, Themes & Key Scenarios
  6. Personas
  7. Journey & Empathy Maps
  8. Usability Tests

Problem Statement

To build a cloud banking app that allows young people trying to build credit and have access to the tools they need to succeed and feel proud of their accomplishments.

45 million American consumers are living without credit scores.

— CNBC

Competitive Analysis

My strategy was to better research major competitors to understand their strengths and weaknesses. I also wanted to gather competitor data to uncover commonalities and gaps in the market that Rhino Wallet can benefit from.

I did extensive research by downloading apps from the competing market and analyzing data stemming from my interviews. I studied the workflow and usability of each app and took notes on what this app would be like if I were designing it.

Competition Reviewed:

  1. Mint Budgeting App
  2. Chime Credit Builder
  3. Venmo Peer Payment Platform

Mint — Mint is a free budgeting app that allows you to connect all of your financial accounts in one digital space so you get a high-level overview of your financial health. The app also allows users to track spending and savings and set and track budget goals.

Mint Budgeting App UI | 2022

The signup process was straightforward and I liked how all your account information was available on the initial dashboard. I was able to enter my personal financial information to get a personalized budget plan.

The only downside I encountered was Mint didn’t have an investment option. You can track investments from other accounts but are not able to buy-sell-trade on the Mint platform.

Chime — Chime seems to be the front runner as far as credit-building options go. Users can sign up for a credit builder card that directly helps them start credit history which is reported to FICO.

Chime’s Dashboard UI | 2022

Chime’s sign-up process was straightforward, but the interface was very loud, with lots of distracting information and unnecessary graphics. As a result, it’s possible first-time bankers would feel very overwhelmed using this app as their initial banking experience.

Venmo — Venmo is a popular payment app for sending money to friends and family.

Although users thought the app easy to use and seemed quite useful, suers said the emoji requirement during the payment process and public feed made the app feel more like a social media app than a banking app.

AEIOU Research Plan

The first task was to identify problems users had using traditional banking apps. I used the AEIOU framework to create individual worksheets to document my research. Once I completed the worksheets, I found efficient solutions for each of the user’s pain points which allowed me to move on to designing a lo-fi prototype.

  • Activities: Making everyday transactions, including bill pay, financial planning, transferring money into savings, purchasing investments, applying for a loan, transferring funds in and out of various accounts, and accepting money gifts.
  • Environments: Purchases at home or on the go, going to an ATM withdrawal station, attending social situations including restaurants and bars, visiting a physical bank.
  • Interactions: User logs in to check account balance, completes peer-to-peer transactions, transfers money in and out of accounts, views savings account, buys-sells-trades investments, deposits checks, withdraws money, checks FICO score, and chooses to learn finance options in the education section.
  • Objects: Smartphone, computer
  • Users: Primary account holders, parent or guardian if a user is under 18, secondary users such as siblings.

“One of usability’s most hard-earned lessons is that you are not the user.”

— Jakob Nielsen

User Research

I wanted to go about this process from the end user’s perspective. My mission was to gather data to improve usability and ultimately shed light on how young people will use Rhino Wallet. My challenge was to prevent bias and assumptions from designing for one user: myself.

Rhino Wallet | User Interviewees

The Work:

  1. Form Interview Questions: Interview Outline Here
  2. Recruit & Interview 3 Potential Users
  3. Analyze Feedback & Data
  4. Create Actionable Insights

Insights, Themes & Key Scenarios — I quickly realized I was drowning in a sea of data and sticky notes. As I went back and forth, moving my sticky notes into categories, emerging themes gave me an idea of what information was most useful across my user interviews. Eventually, I was able to turn those themes into something meaningful.

Emerging Themes:

  1. Need for credit building tools
  2. First-time banker anxiety
  3. Users not able to get loans or credit cards

Insights:

  1. Users mentioned there wasn’t a solution that allows young people to build credit; they must rely on taking out a credit card or loan to establish credit.
  2. First-time bankers relayed they wanted straightforward, easy-to-use tools to make them feel financially independent. They also expressed the need to make all of these banking options in one app.
  3. With cybercrime at an all-time high, users wanted strict privacy and security regarding transactions.
  4. Users expressed a desire to buy-sell-trade investments.

Building a Persona — Once the interviews were done and the data had settled, I went to the drawing board to build an imaginary person that closely matched a group of similar users that would use Rhino Wallet. I realized the solution didn’t fit into just one user; it required several personas.

Egan | Primary Persona

Primary Personas:

  1. Young adults looking for an all-in-one bank that will help build credit
  2. A teen user under the supervision of the parent account holder

Secondary Personas:

  1. Younger siblings that could become future users
  2. Parent of a teen looking to establish banking history
  3. Friends looking for similar banking solutions
  4. Family or friends wanting to gift money

Choosing A Persona — Given so many potential routes, I had to shave down to the core of what the app ultimately is — a credit-building app. The potential users that would benefit from Rhino Wallet were the young adult needing credit now and a teen with their first job wishing to build credit for the future. The parent user must also facilitate banking until the teen is old enough to bank legally.

Empathy & Journey Mapping — Before creating solutions, I wanted to capture a focused view of our users’ behaviors and explore what it’s like to be inside their heads.

Rhino Wallet | Journey Map

Questions Considered:

  • See, Do, Say & Hear — What do they see around them? What are their daily activities? What influences them? What do they hear from coworkers, family, and friends?
  • Think & Feel — What matters most to them? What do they worry about? What do they feel? What are they trying to achieve?
  • Pains & Gains — What goals do they have? What do success and failure look like to them? What do they aspire to achieve?
Primary Persona Empathy Map

User Feedback — It was clear this user had lots of anxiety about their financial future and worried they weren’t taken seriously as a young adult.

  1. “I assumed once I turned 18, I automatically had credit. I feel so naive.”
  2. “I’ll just buy everything in cash, so I don’t get charged interest.”
  3. “Why do banks and loan sharks prey on young people?”
  4. “I’m worried how I’ll be able to save for the future with no credit.”

Define Phase | Week 4–5

I had a lot of fun with this section of the assignment. I enjoyed understanding how to categorize and structure information and take raw data and turn it into something meaningful.

Information Architecture

I collected my findings in one place and created a wall of information to inform the problem-defining process. From there, I was able to draw connections between these individual data points and develop new and deeper insights to create potential solutions.

Deliverables Used To Define:

  1. Brand Theme
  2. Revised Problem Statement
  3. Site Map

Brand & Theme — The Rhino Wallet brand reflects our company values and our way of doing business. We strategically chose a Rhino for our logo to convey a sense of confidence, assurance, and sure-footedness that makes users feel safe and protected while using our app.

Revised Problem Statement — After sitting with my interview data, I was able to reframe the problem statement to reflect the user’s concerns.

It became apparent that the primary user wasn’t too concerned about the flow of a banking app in general, instead of with the whole banking system. Instead, they wanted a solution to wrap all these smaller banking apps, including peer pay all into one app with a focus on credit building.

“If you do it right, it will last forever.” — Massimo Vignelli

Sitemap — I used LucidChart to create a flow chart for the peer-to-peer payments feature. Once that was created, I got a clearer picture of what the structure should look like.

Rhino Wallet | Peer Payment Flow

I realized I could simplify the payment process by filtering each sub-channel back into the original flow. Once those modifications were made, I translated the finished workflow into key pages

The Work:

  1. Reviewed existing content and structure
  2. Once reviewed, implement new ideas
  3. Identified all categories and subcategories
  4. Mapped out pretend user journeys
  5. Made modifications to reflect a more efficient user experience

Design Phase | Week 6–12

I toyed with many ideas and narrowed the choices through sketches, flow charts, site maps, and prototypes to determine the most effective and efficient way to construct a solution for the Rhino Wallet platform.

Deliverables Required

  1. Rapid Prototypes
  2. Brand Style & Logo
  3. Content Strategy
  4. Mock-ups

Lo-Fi Prototypes

To begin this process, I sketched Rhino Wallet’s basic UI on paper and wireframed prototypes in Figma to test functionality and a basic visual appearance.

Rhino Wallet | Illustrated Wireframe by Dani Crosby

Lo-Fi prototyping proved to be a low-cost and fast way to get the point across. I could jot down my ideas quickly and share them with potential users. Then, using a clickable wireframe through Figma, I rearranged layouts based on user feedback and repeated the testing process to create a more straightforward path.

Details:

  • Visual designs: Basic shapes were used to create a simple visual hierarchy
  • Content: Only vital elements were included for this round
  • Interactivity: Figma prototyping tool was used to change the design’s state in real-time manually
Rhino Wallet | Account Setup Wireframe

Lo-Fi Usability Tests — Users were able to interact with only the basic features of Rhino Wallet. Usability testing during this phase was crucial as it was the final step before creating the Hi-Fi counterpart.

  • Although the initial version of this app wasn’t ‘beautiful,’ users stated the placement of the content and initial flow was easy to understand
  • Users stated they wanted to see a scrolling credit card feature on the initial dashboard screen.
  • Users stated they wanted to see their available spending balance on the initial dashboard screen so they could visualize their spending options
  • Users like the minimal design and appreciated the lack of graphics and minimal use of color

High-Fi Prototype

Creating a Hi-Fi prototype was challenging. It took a lot longer than the Lo-Fi version and required a solid understanding of what I needed to build. I also needed to do extensive and repeat usability tests with real users.

Rhino Wallet | Dashboard & Peer Pay Views

Details:

  • Visual Design: Realistic and detailed design of all interface elements
  • Content: Prototypes contained actual or similar-to-real content
  • Interactivity: Prototypes were highly realistic in their interactions
Rhino Wallet | Peer Pay UI

Hi-Fi Usability Test — Users interacted with the Rhino Wallet prototype as if it were an authentic product. Unlike the Lo-Fi counterpart, I was able to add animated transitions and hover/touch-down effects, which made the app come alive.

  • Users stated this version of Rhino Wallet felt more manageable to use than Venmo, and the UI was cleaner and less bulky compared to Chime
  • Users felt as though Rhino Wallet had the potential to attract more users since it had all their desired features wrapped into one application
  • Users like the color scheme and noted it looked just like a professional banking app
  • Users stated the setup and sign-in process was straightforward

Development Phase | Week 11–12

The final phase will be taking my Hi-Fi prototypes and using responsive design to create a static website with HTML, CSS, and a touch of Javascript.

Rhino Wallet | Style Guide

Deliverables Required:

  1. Style Guide
  2. Code

Dev Collaboration

All of my data indicated the users want all of their banking options rolled into one app, I tried to accommodate these requests on the dashboard view.

Once I had the wireframing and prototyping linked, I calculated a realistic launch date with developers. Our investors decided funding from our initial seed round only covered rolling out the peer-to-peer pay, so I used that feature as my starting point.

Investors mention another round of funding is in the works where the company would be able to implement other features starting with the credit building aspect.

Deployment Phase | Week 13–14

.

Deliverables Required:

  1. Create a Portfolio
  2. Demo Product

Demo Day | Wrapping Up

I had the great honor to complete the Front-End Web Designer|Developer Bootcamp at Nashville Software School. Not only did they teach me how to work across the entire spectrum of front-end design and development they also facilitated a ‘Demo Day’ with a long list of potential employers. I was able to demo Rhino Wallet and get first-hand interview experience. It’s been a fantastic journey and I highly recommend this program!

The end.

--

--

--

UI & UX Designer | Front-End Developer | Minimalist

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

10 ideas for today

Why usability testing matters for the next generation of fintech products

Design 4 week 3 Material study work

20 best WordPress themes for blogs

Masonry Hub WordPress theme

The fundamental: design thinking

Void Decks: Voiding the Positives

F-Shaped Reading Pattern on Web

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Dani Crosby

Dani Crosby

UI & UX Designer | Front-End Developer | Minimalist

More from Medium

Redesigning Vokraf — Online Learning Website

Case study: Designing groceries selling website.

UI UX Case Study | Manage Your Daily Nutrition with “GiziKu”

UX Case Study: Full House Modern Furniture Website Redesign