User Research | Information Architecture | Interaction Design | Prototype and Testing | UI/Visual Design
Sketch | InVision | Marvel App | Photoshop
Timeline: 80 hours over 2 weeks
How might we make it easier for users to experience budgeting as a simple task?
Aspiration is a FinTech organization that has the mission is to bring the best financial solutions to everyone. They offer socially-conscious and sustainable banking services and investments. Aspiration sees an opportunity to make a difference and help young adults manage their personal budget and set goals.
1. Customers are already using their bank’s mobile app to view account information.
2. There is user interest in being able to budget and view savings goals using a mobile app.
3. The majority of Aspirations’s customer base is between 18 and 35 years old.
Through the use of secondary and market research, customer interviews, IA, and usability testing, I integrated a budget feature into Aspiration's financial management options on their mobile app.
What are users needs and pain points related to financial management?
I conducted market research and a competitive analysis to learn more about the market and potential users. FinTech mobile banking and financial management apps are a growing market. Among smartphone users in the U.S., nearly two-thirds have at least one financial app.
People have embraced using their devices to keep tabs on their checking accounts and other products. That’s particularly true for banking apps, where 70 percent of the respondents say they check their bank’s mobile app at least once a week; 16 percent say they check it every day.
What does a potential user look like?
Using the insights from and the market research and competitive analysis, I created provisional personas to help in preparing for user interviews.
One in every four respondents ages 25 - 34 has used at least two FinTech products in the last 6 months. Usage is also high, 21 percent, among 35 to 44 year olds.
Opportunities for Growth
One major room for growth is education and awareness of FinTech services. In one survey, over half of non-users said that they were aware of the availability of these services.
Another area is increased building of trust and confidence in FinTech services As the market grows and awareness rises, this is an area where users belief in the security and reliability of FinTech companies can grow.
One final opportunity is using design to add to the websites credibility. In a recent survey, participants comment on the design look of apps in the finance sector (more than any other) as influencing their trust in the company.
To better understand the mobile app experience from the user’s point of view, four interviews were conducted in person and remotely with Aspiration and other mobile banking app users. Rapport was build with each participant and an interview script was used for consistency.
What do users need?
After the user interviews were finished, I sorted my notes using an empathy map to clarify exactly what users were saying, thinking, feeling, and doing during their budgeting experiences. I looked for patterns and noticed that a few key ideas emerged from the majority of the interviews:
Using the insights and patterns collected from the empathy map, I created a user persona to understand the major needs, goals, pain points, and motivations of the majority of users.
DEFINE & IDEATE
Now that I had discovered more about the user from research, it was time to begin brainstorming possible solutions. To help bridge the gap between stating the problems and identifying solutions, I created POV statements and HMW questions using the persona's needs, goals, and motivations. POVs and HMWs are useful tools to spark thinking on a broader scale about how to address the user's challenges.
POV and HMW statements
Group Facilitation and Brainstorming
I organized and led a group brainstorming session with 4 people who fit the demographic for users based on my earlier research. I described the HMW’s one by one and participants had five minutes per HMW to brainstorm on their own.
We went around the table and
each person shared their responses. At the end, group members had the opportunity to
share their opinions and insights about ideas that were shared, as well as build upon those ideas.
-A visual icon or color could be used to indicate budget status
-users could send information between app an excel
-a text alert could remind the user when they are reaching a budget limit
I wanted to make sure that I address the shared goals of the users and the business. The also thought about technical constraints of the project such as maintaining the current app's UI patterns and designing for iOS standards.
Business and User Goals
I also created a project roadmap using the pov's and input from the brainstorming sessions to prioritize possible design solutions and metrics for measuring feature effectiveness.
I created an app map using the current structure of Aspiration's app to visualize how the new feature would integrate and connection into the current structure.
After creating the sitemap, I used a task flow and user flow to visualize the main steps and thought proccess of a user as they accomplish a task Aspiration's mobile app.
low-fi homepage wireframes
Now that the architecture had taken shape, I used sketching and wireframes to begin exploring how the interface would interact to create a visual focused experience for the users.
high fidelity wireframes
To prepare for an initial prototype, I used Sketch to created high fidelity wireframes of new feature integration.
Once the interaction wireframe sketches were completed, it was time to add color, typography, and interface elements that adhered to Aspiration's brand and provided visual hierarchy.
I used images, colors, and words to reiterate the look and feel of Aspiration's brand and explored the brand adjectives -reliable, honest, eco-conscious, fresh.
The style tile give an overview of how the typography, color palette, etc. will work together and at various sizes to convey Aspiration's brand.
As Aspiration's brand evolves over time, a comprehensive UI kit will allow for consistent changes to the UI patterns.
PROTOTYPE AND TESTING
I conducted in-person testing with four participants who fit the demographics and profile of a potential Aspiration user. Each participants was given two scenarios to consider with a task to accomplish. Each participant session was recorded and lasted approximately 10-15 minutes.
After testing the prototype with users, I created an affinity map to sort, prioritize, and rank the user testing feedback. Insights from the affinity map helped to identify areas for iteration.
Based on insights from the testing, top priority recommendations included the following:
1. Increase the font-size of the category precentage breakdown.
2. Add "View Budget" label to the budget card.
3. Decrease the size of the radio buttons on the new category screen.
high-fidelity wireframe revisions and iteration
I revised the high-fidelity wireframes screen design based on recommendations from usability testing. If time allowed, I would iterate with another round of usability testing to look for further ways to improve to the user experience.
high-fidelity prototype with revisions
I created high-fidelity updates of the wireframe with the revised UI design. The prototype in InVision had clickable buttons and simulated page transitions and animations that roughly matched my experiential concepts of how the interaction would flow.
CLICK TO INTERACT
WHAT I LEARNED
Hindsight is 20/20...here are my takeaways from creating Aspiration's mobile budgeting feature.
Beware of Scope Creep
Remember the saying, "Don't bite off more than you can chew?" With the possibility for a variety of features which could have solved the problems of this project, I realized halfway through that I was trying to do too much within my alotted project timeline. I needed to narrow down the features to ones which provided the best solution based on research. Designers need to be not only pixel-perfect, but pragmatic!
Benefits of Group Collaboration
I lead and facilitated a group brainstorming session for this project which generated a variety of creative and insightful ideas that added a lot to the final prototype. Taking the time to properly introduce the project and what the expectations were allowed participants to feel safe to share and have fun building upon one anoother's ideas. In addition, collaborating with my mentor has allowed me to sharpen my design thinking and process in ways that I would not have been able to have done alone.
Success and Challenges
Working with an existing brand was more enjoyable and freeing than I initially imagined! The contraints of Aspirations UI and branding allowed me to sharpen my eye for visual design by digging deeper into existing design patterns. In addition, I was able to spent more time conceptualizing and understanding how the interaction design would function instead of focusing too much energy on the look of the UI.
The main difficulties with the project included lack of familiarity with the industry. I dove into the research portion of the projects to learn about existing user needs within fincial management and found that there are a wealth of sub-genras that exist for students, investors, etc. I did as much research as I could with the time contraints of the project, but would love the chance to iterate on the feature and do even more research into the industry and what users need.