Overview
A student-led project to design and develop a financial app tailored to the needs of UW students, aimed at providing a more engaging experience for budgeting finances through the universityās husky mascot. š¶š°
The final deliverable was an interactive prototype, showcasing key features such as budgeting tools, goal setting, and visual progress trackingāoffering students to manage their finances in an enjoyable,Ā cute and gamified way.Ā
Inquiry
Objective:Ā Financial stress has a huge impact on students, andĀ has aĀ great effect onĀ their mental health and wellbeing. šĀ Ā For this project,Ā our team wanted toĀ develop a financial phone application targeted specifically for students of the University of Washington that would help them "play with the idea of budgeting" in a way that is simple and stress-free.Ā š¶šø
Summary of Interview & Research:Ā Our team talked to several college students. Those who have used financial apps before stated they did not like the complexity of them and find them intimidating to use.Ā š¬
List of wants (by students):
ā¢ Simplicity and easy usability
ā¢ Incentive to use
ā¢ Aesthetically pleasing / fun
ā¢ Categorization of different expenses / budgeting mechanic
ā¢ Progress reports / spending trends
ā¢ Privacy/security of information
ā¢ Financial resources
ā¢ Incentive to use
ā¢ Aesthetically pleasing / fun
ā¢ Categorization of different expenses / budgeting mechanic
ā¢ Progress reports / spending trends
ā¢ Privacy/security of information
ā¢ Financial resources
Branding
One of the first things created for the project was a mood board to get a feel of the overall visual look.
ā
Visual Look & Feel Checklist:
ā¢ Color Palette ā UW colors (Purple, Gold, Gray, White, Black)
ā¢ Visual Design ā fun, playful, non-intimidating
ā¢ Modern ā clean lines + shapes, sans-serif type (?)
ā
Visual Look & Feel Checklist:
ā¢ Color Palette ā UW colors (Purple, Gold, Gray, White, Black)
ā¢ Visual Design ā fun, playful, non-intimidating
ā¢ Modern ā clean lines + shapes, sans-serif type (?)
Husky avatar
What we decided would be the biggest appeal for the app was incorporating an avatar that interacts with the user.Ā š¶š§āš WeĀ chose a husky is because it is the official UW mascotĀ (and also because dogs are generally considered to be cute and non-intimidating š).
I played around with a Japanese chibi-styled dog, as well as a more western cartoon look. I refined the look based on feedback from classmates. A mix of the two, with a leaning towards the Japanese cartoon aesthetic, was preferred.āØĀ š¾
These are the initial concepts I drew for the application:Ā āļø
Avatar concepts
Avatar concepts (2)
Husky expression sketches and finals:Ā
Neutral sketch
Happy sketch
Concerned sketch
Neutral final
Happy final
Concerned final
Personas
We created three personas for our project. š„ OurĀ personaĀ "Samantha"āa typical college student who likes games and struggles financiallyāwas considered ourĀ top priority.
User scenario
A storyboard of a user scenario I created for persona "Samantha"Ā focusedĀ on what it would be like for a student who has already used the application for a period of time.Ā ā±ļø Deciding to showcase various expressions throughout the scenario was important for usĀ so people could clearly see Samantha's emotional journey.Ā š
Wireframes
Low-fidelity wireframes our team created;Ā what we wanted to keep consistent was having the husky be on every page so it could provide useful or interesting commentary to read.Ā š¶
Two unique features of the app would be:
ā¢ A resource page tailored specifically for student needs (financial-based)ā
ā¢ A section to redeem awards given to students for consistent app use (husky avatar customization)
ā¢ A resource page tailored specifically for student needs (financial-based)ā
ā¢ A section to redeem awards given to students for consistent app use (husky avatar customization)
Wireframe 1
Wireframe 2
Wireframe 3
Wireframe 4
Usability Testing
ā
ā
Notable feedback from testers were the varying opinions on how often they would personally use the app and that we would need to adjust the gamification aspect (i.e.Ā howĀ dog biscuits would be earned š¦“).Ā There was also some confusion on which graphics were clickable and how information can be input.Ā š¤·Ā Testers reacted positively to the layout and especially the avatar.Ā š
1st prototype
The initial high fidelity prototypes created together by the team:
2ndĀ prototype
After taking another look, we decided a redesign of the prototype was necessary. We researched various different financial apps and took notes on the UI design.Ā šĀ A common theme wasĀ rounded rectangles to section off different categories of information and having some sort of background element. Adding paw prints to the background helped fill the white space around the avatar while keeping the look fun. Making the boxes a darker color helped showcase UW's branding more successfully.Ā š¾
Final thoughts
The overwhelmingly positive feedback we received on the concept fueled our motivation and confirmed that we were addressing a realĀ unmet need among students. šÆĀ Our goal was to turn this project into a functional application and resource for UW students, with support from the university. Additionally, we explored the potential of releasing the product as a white-label solution for other colleges to adopt.
All in all, this was a formative experience in simulating professional product development within a collaborativeĀ setting. On my end I was able to further hone my visual design skillsĀ as well as utilize best UX practices and research.Ā š±
