Wittle.io is a debt simulation product to help users model their financial wellness under different criteria. With American household debt on the rise and student loans remaining a huge burden for graduates, we recognized an opportunity for improving financial awareness.
Wittle is a personal venture and collaboration with software engineer Molly Morgan intended to solve an ongoing problem that we see with financial planning. During the development process, I've tackeled branding and identity, user journey mapping, prototyping, and user interface design for the entire web app experience.
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.
Iterations of the final logo explored different movements of the letter-forms and stems.
The final logo design combined the stength of a custom san-serif letter-forms with the hit of downward movement.
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 MVP release.
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.
Flash banners used motion and illustration to add delight without detracting from the message. Messaging is clear and informative, without coming across as too personal.
Onboarding is one of the key areas of Wittle's simulation. When setting up loans, users enter personal information about their financial situation. For the MVP, we decided to allow users to input their own financial picture instead of syncing with financial institutions. Users can return and edit their information once the onboarding is complete. Inputing the data eliminated friction with the onboarding flow and focuses on the main dashboard experience.
After inputing data, the user can return to their saved loan information, This section is key for users who want to simulate various types of loans. For example, before buying a house to simulate different interest rates and payment plans.
The system is (of course) responsive allowing for a flexible layout across device sizes and screen resolutions. The responsive design separates the sidebar from the main experience to minimize the information shown to the user.
I created a new design language to make Wittle even easier to navigate and scan for information. I established this design system by unifying the app's UI component library, making it easier for Wittle to scale without diverging from the main system.
While the brand is playful, the subject is serious, so I created a series of icons and brand illustrations which balances the two. Organic lines emphasize the playfulness while the bold contrasts hint at the more sensitive subject matter.
As a personal venture, this has been a great experience in combining my interests in both illustration, UX and product strategy. Wittle.io is an ongoing project, and we intend to iterate and refine as we gain more insights from users.