Project DetailsRole: User Research and UX Designer
Project Type: Interaction Design Studio
Teammates: Ryan Huber, Gian Piero Spicci, Yesica De Pontes, Harry Vasanth
Platform: Mobile, Smartwatch, Web
Tools: Sketch, InVision, Photoshop, Illustrator, InDesign
Timeline: 5 weeks
Starting with User Research
We first started out by with our user research. Having a general idea of what we wanted to explore, by conducting interviews, creating our personas, and creating our storyboards, we were able to develop a solid idea to ease our way of going to the design phase.
We first started out by conducting interviews. We asked a total of 10 college students questions about their banking experience. Several topics we asked included: usage of bank's application, smartwatch usage (if they had one), how they came to choosing their current bank, frustrations faced with bank, savings, tracking expenses.
With these interviews, we created an affinity diagram to organize our observations and to reveal common issues across the interviews. By doing the affinity diagram, it helped to show where the problem space was and showed places with opportunities for design ideas.
Of of the many insights that were formed, we specifically focused on 3 key insights that were valuable for us in creating a mobile application that could help manage budgeting and prevent overspending for students.
Creating Our Personas
With our research and insights, we created several personas - all students with different needs and goals. It was important for us to understand who we were designing for by identifying the person's goals and behaviors to ensure that we would design interfaces suited for them. From these personas, we created scenarios for our storyboards.
Creating our Storyboards
Storyboards helped us to visualize the person(s) and how they would interact with the app. We took one idea and decided to go deeper into the idea of virtual cards - we met up with people outside the team to ask them questions and opinions about our idea.
After more research, we decided to go with this idea and further condensed and refined it. We decided to focus on several categories for the virtual cards: budget control, tracking expenses, contextually aware notifications, and saving plans.
Our refined storyboards showing budget control/tracking expenses and receiving contextually aware notifications. With our ideas confirmed, we easily went onto our next phase - designing our interface for our mobile application, Prism.
DESIGNING OUR MOBILE APPLICATION
We took careful consideration for each step of the design process. We started from low-fidelity wireframes to medium-fidelity and finished our project with high-fidelity mockups. For each iteration, we met up with people outside our team and conducted user testing, which helped us move from low-medium-high fidelity wireframes.
1. Low-Fidelity Wireframes
We created our low-fidelity wireframes through hand-sketches. We only displayed the important details to help us get a sense of the interface. Specifically for low-fi, we concentrated on how the multiple virtual cards would be displayed: vertically, on top of each other, swiping functionality, etc. We created many versions (some shown below). For the cards, we wanted to display the actual card, the amount of money spent, and an indication of the limit for that particular card (whether you were safe or nearing the limit).
2. Mood Board
Before moving on to our next iteration, we created a mood board to make the next processes a bit easier by determining what colors, fonts, and visualizations we should do. This helped us become more comfortable in doing our mid- and high-fidelity wireframes.
Particularly, we focused on color theories as there are many color studies dealing with financial services. We decided to go for black and purple which indicate a sense of strength and power while being luxurious. We also looked at what type of graph visualization would be easy to see and understand for the users and the colors of the gradients for these graphs.
3. Medium-Fidelity Wireframes
For our medium-fidelity wireframes, we designed it online through Sketch. We created all the pages that were to be included in our app. This helped us to create a better sense of look and feel.
Below, we show some of the wireframes. We focused on the layout so that when we did the high-fidelity wireframes, we could focus more on the visual design.
4. Feedback through User Testing
Throughout our mid- and hi-fidelity wireframes, we refined many of the details we created through user testing, specifically looking at card, color, and layout patterns. For each iteration, we got feedback until our users were satisfied and could understand and walk through the process.
Here are some of the iterations that we went through for the card layout. We focused on the bar colors showing how much spendings the user had left (gradient vs. solid color), text layout (centered vs. right-aligned), and card colors (multiple vs. one). In the final version, we decided to go for a solid bar color, right-aligned text with just the card name in the middle, and multiple, dark colors for the background color.
5. High-Fidelity Wireframes
Our high-fidelity prototypes, incorporated feedbacks from our user testing. We made sure that our design was consistent with the visuals. I took the lead in the design's interaction and developing the final prototype using the mid-fidelity wireframes on Sketch.
We divided it into several areas of focus:
1. Onboarding Screens
2. Card Screens
3. Adding Card Screens
4. Finance Overview Screens
5. Notifications (smartwatch)
6. Desktop Extensions
We also added some features specifically for smartwatches and desktops. For smartwatches, we focused on receiving context-aware notifications. For desktops, we focused on having ease of access to card information while maintaining privacy and security.
Onboarding Screens. These screens go through the introductions of what Prism is and how to use it to our first-time users.
Card Screens. For these following screens, the users have the option of seeing all their cards in one view with an overview of how much spendings they have left (indicated through the colored bars on the top). When they tap on a card, it will go into greater detail, showing all transactions used for that card. A new feature yet to be established currently is the idea of being able to store receipts inside the transactions. For each transaction, there would be an option to view the receipt.
Adding Card Screens. For users that want to add a new card, they can quickly and safely do it right on our app. There are a list of categories that are popular cards to choose from. Once they pick a category (or create one), all they need to do is enter the following information: card name (purpose), the limit they want to set for that particular card, limit options (resetting and refilling), and sharing card option.
Finance Overview Cards. These pages show an overview of ALL the user's cards. There are several activities that users can access on these pages:
- Users can see several graphic visualizations that show what categories they spend more money on.
- Users can see their overall transactions from all their cards.
- Users can see their total spending patterns with different graphic visualizations.
- Users have the option of seeing their spending patterns for just a specific category.
Notification Alerts. Prism is a contextually-aware service so users would get notifications or alerts on their smartphones and smartwatches.
- Users will get notifications when they are near a particular area or store showing reminding them how much money they already spent and how much is remaining.
- Users will get notifications when the app for fraud detection.
Desktop Extension. While all the functions on the smartphones can be easily accessible on the desktop screens as well, we have added one special feature accessible via desktops only. The desktop extension will allow users to easily enter their payment information when shopping online with a single click. Being contextually-aware, it will know what card users will most likely use and have that card on top, without needing to search for the card. This extension would be safe to use as there would be multiple security levels to protect their identity (not shown in our wireframes).