UI/UX | Branding & Identity | Product Strategy | Prototyping
Wittle emerged as a debt simulation product to help users model their financial wellness under different criteria. American household debt has increased by 11% in the past 10 years and nearly 80% are in significant debt. Student loans remain a huge burden for Americans. In 2012, 71% of students graduating from a 4-year college had student debt and it continues to be an ongoing $1.3 trillion dollar crisis.
As a sensitive issue, designing for debt management is a challenge. Personally, I had to deal with moderate student loan debt; I paid off my graduate student loans a few years ago and am familiar with the murky waters of managing debt. Therefore, I knew it was important to create a design system that acknowledged the sensitivities of financial planning and appeared to be a thoughtful and approachable guide for users.
- Develop an identity for debt management that resonates with users
- Create an MVP prototype of the debt simulation dashboard to gather feedback from Beta users
- Launch an MVP web app to Beta users to gather feedback and iterate on the design and UX
I tend to follow the same approach for defining a design system:
- Research, product strategy and planning
- Iterations through sketching and low-fidelity wireframing
- Wireframing concepts
- Creation of a style guide
- Developing a user journey for the prototype
- Visual design and prototype creation
Favorite Design Tools
- Steps 1–2: Pen, paper, dot grid books
- Steps 3–5: Sketch, Balsamiq or Omnigraffle
- Step 6: Sketch, Flinto, Principle, InVision
Wittle’s core brand attributes focused on soothing users and encouraging them to take ownership of their debt. Attributes include: Guiding, Educational, Encouraging, Confident, Optimistic, Fun, Soothing, Manageable, and Approachable. With these attributes in mind, I sketched over 100 iterations of the logo, exploring transition, decreasing shapes, “W” letter-forms and abstract graph shapes.
Initial Logos “Missed the Mark”
The first iteration of logos used smooth shapes and gradients, but didn’t seem to align to the product. User feedback on this design indicated that the logo was too flippant and fun, which didn’t account for the sensitivity of debt.
I then explored sturdier sans-serif letterforms that incorporated graphical elements. The creation of the final mark was a challenge; repeatable curved forms needed consistency and a thoughtful approach. I went through many rounds of “final” logos until I felt that the forms were correct.
The final logo design combined the strength of a custom san-serif letter-forms with the hint of downward movement.
The User Journey
I created the user journey from the perspective of a new user and a returning user to show the onboarding process from login to the dashboard screen. The user journey accounts for future ideations of the design to include Resources and Account sections, even though those areas won’t be present in the initial release of the product.
The focus of the prototype is the simulation Dashboard. Users can get a quick overview of the main areas of their debt. The goal of the Dashboard is to give users a comprehensive overview of their debt, whether that’s car loans, student loans or credit cards.
Focus Areas of the Dashboard
- Total Interest
- Total Loan Amount
- Date of Payoff
- All Loans (graph)
- Simulation of All Loans (graph)
The wireframes expanded upon the initial sketches to show details about the active and disabled states, transitions and form inputs. I try to keep my wireframes as close to the final design as possible, paying extra attention to the use of typography, layout and content areas.
The placement of the loan “cards” at the bottom of the screen posed an additional challenge, since these are secondary containers meant as breadcrumbs for the user. I explored different iterations of placement, size and type hierarchy here.
I created the design solution in tandem with the UI style guide. The style evolved as I was creating the components. Repeatable patterns keep the design simple and the user journey succinct. However, the design allows for future iterations, such as modules or resources for specific areas of debt.
Prototyping the Dashboard Layout
To test out the animations and interactions, I mocked up the main transitions using Principle.
PROTOTYPING THE ONBOARDING CAROUSEL
UI Style Guide
The components are kept to a minimum for this product. The style guide includes use cases for colors, buttons, card components, inputs, typographic scale, navigation, icons, illustrations, and sidebar components.
The use of color has been integral to the development of a consistent style. Each of the Primary Colors uses a darker variation variable for overlays, clickable icons or hover states. Background gradients use two of the Primary Colors for a subtle transition.