The goal of this assignment is to create a mobile app that will empower business owners with real-time insights into their finances, sales, and expenses. Instead of operating blindly and waiting for an accountant to review their finances, our goal is to provide them with immediate visibility and control over their financial data.
With my sketches, I went for a very clean look while using many icons to make the app visually easy to navigate. In both my workflows, my home screen has the balance of the account and a list of recent transactions for when restaurant owners wants a quick glimpse into their account. There's also a navigation menu at the bottom to click on quick actions. There's an option to click to see a full list of transactions and graphs to display balance analysis. I leaned towards rounded edges and icons for a more welcoming and appealing vibe.
When designing my sketches, I focused on the original view of the Mi Fonda Wallet app that was provided by the founder and tried to think of different ways to display the most information but still be mindful of the real estate of the screen. I thought about the different scenarios that restaurant owners may come across and created different views for scenarios like accounts, a clear view of the balance, and overall transaction history.
For my sketches I wanted to have four screens. One for the login, one for the home/dashboard, one for the transactions and one for user info. My first flow incorporated more elements from their original site while my second flow felt more like an app. During my sketches, it became apparent to me that the second flow felt right and was better for seeing and understanding information quickly and on the go. It applied more mobile practices and was the flow I ultimately pulled the most from throughout the project.
When creating the initial sketches for the Mi Fonda Wallet app, my goal was to design a user interface that would make information easily accessible and viewable at a glance. This was crucial because people in the restaurant business are always busy, and quick access to information can streamline their decision-making process in day-to-day tasks. To achieve this, I aimed to create a main dashboard page displaying the user’s balance and important information below it, complemented by either a donut graph for a breakdown of income or large navigable icons to allow quick retrieval of specific information.
We ended up using a bottom navigation bar from Kiara’s sketch, the donut graph wheel from Liam and Matt’s sketches, and the transaction week-by-week spacing from Sarah’s sketch. We also used a login screen similar to Liam’s sketch.
From left to right, we have: the login page, home dashboard, full list of transactions, and account details. Our first wireframes were an amalgamation of the sketches we all drew. We had a basic login screen that was up to par with one’s found on many types of apps. We wanted to keep things simple and modern. The dashboard is supposed to be an “at a glance” view of the account. It displays the balance as well as a donut graph to show different expenses. We later found out that this was not conducive of how a restaurant functions, so we were forced to re-evaluate down the road. Our transactions page had another graph on it, but we were not sure at this point what type of graph it would be. We knew we wanted to display both the revenue and expenses and decided later on to use a bar graph. Finally, our account info screen had space for us to add multiple different buttons in three categories, Personal, Security, and Other. We wanted to keep this simple again since there is no need to complicate this crucial aspect to the apps functionality.
After sharing our designs with peers and our clients, we received helpful suggestions
for improvement:
In the studio critique, to improve visual representation and understanding, it was
recommended to incorporate a bar chart, which could help restaurant owners better
visualize financial data over time. The use of more contrasting colors and distinct
categories was also suggested to make the information more accessible and easier to
differentiate at a glance. There was confusion regarding the function of the donut
chart, specifically whether it was indicating an addition or subtraction from the
balance, pointing to a need for clearer visual cues or labels. Additionally, a
barrier was suggested to effectively differentiate between the graph
area and the transactions list, which would help to organize the display and reduce
visual clutter. Clarity was also needed on how recent transactions are grouped,
especially when they fall into the same category, to facilitate quicker insights
into spending patterns. Lastly, the navigation bar was noted to appear a bit
cluttered, suggesting a redesign or simplification could enhance usability.
During a critique session with Professor Talie, feedback was provided regarding the
banking app designed for restaurants. A key point for feedback was the question
about the app's unique selling points which differentiated from other apps,
particularly in terms of data utilization. There was a consensus that the app should
offer more in the way of aggregate statistics, providing more comprehensive insights
into overall business performance, seasonal trends, and customer preferences.
From left to right, we have: the login page, home dashboard, full list of transactions, account details, list of payees, and a send money screen. On the second iteration of our wireframe, we took into account the feedback of the founders, our fellow classmates, and our professor to improve our design. The largest change that we made was in our dashboard where we removed the categorization of transactions as well as the donut as recommended by both Fonda and students as it wasn't clear whether or not the donut was showing income, expenses, or both and the categorization added confusion. To address this feedback we replaced the donut with a large view of the balance that can be blurred by a button if a user wants more privacy. We also placed a small progress bar that would show how much money is left for a particular budget that the user determines for themselves. Another point of feedback that we addressed was from the students where they mentioned that our transactions page was not spaced well and so we added dividers and introduced more white space in order to make different sections more distinguishable. Also on the transactions page, we removed the button style for each transaction in favor of a unified background to also make the page more visually appealing as suggested by Fonda. Another point of feedback from the students was that the navbar looked cluttered and so we removed the text for each item and improved the icon to make it more descriptive of where it would navigate to. The last suggestion that we implemented was from our Professor who suggested that we had a key selling feature. To address this we redesigned our donut so that it only showed the different sources of income and if a user tapped on the donut, it would give the dollar amount for the source of income and would automatically filter the transactions list to show only income from that source making it more intuitive. While we implemented many of the ideas given to us as feedback, there was one that we decided not to include. This was to replace the donut with a bar chart as suggested by some students. We decided to not include this as the founder asked us to pursue the idea further and we also believed that the donut chart made the page look more appealing.
For our style guide, we didn't need to create one from scratch as Fonda provided us with their existing guide for their website. However, they noted that since they don't currently have a mobile app, we were granted some freedom in our design choices. Given that Fonda Wallet is used for a resteraunt’s finances, we believe that Fonda made their design decisions so that they could convey a user’s financial information clearly without introducing content or colors that would be distracting from the user experience. When creating the mockups, we decided to stay faithful to the original style guide as it worked well with our designs and allowed us to achieve our goal of effectively showing financial information.
Our high fidelity prototype included a login screen, a home dashboard, a transaction screen, a transaction details popup, a payee contact book, the send screen, a confirm send screen, a payment method popup, and an account info page. Throughout the design we used the Roboto font which aligned with the style guide given to us by Fonda. We utilized the different heading and body text sizes to emphasize more important points, such as the balance on the dashboard or the day of the week in transactions. We also made sure to change our design to emphasize contrast of colors, since part of our feedback was changing the transactions to have a light background instead of dark. We were able to keep all things aligned properly using the grid functionality of figma and left adequate spacing and white space to reduce clutter and keep that modern/simple flow.
During the meeting with the founder of a company developing a banking app for restaurants, we discussed several aspects of the app's design and functionality. The login feature was well-received, but it was noted that a sign-up option is currently missing and should be included. Additionally, integrating biometric verification such as face recognition could significantly enhance security and user convenience. The dashboard's "budget" line was found to be not very intuitive; renaming it to "goal" might better communicate its purpose, especially in the context of managing restaurant finances. In the transactions section, it was suggested that including dates would be beneficial, and changing the display from monthly to weekly would allow restaurant owners to better observe spending trends and manage budgets more effectively. This could be further supported by a swipe-through feature for different views, allowing easier navigation and comparison. The need for more robust analytical tools was emphasized to help users gain deeper insights into their financial patterns and make informed decisions. Finally, safety features were briefly discussed, highlighting the importance of further enhancing this aspect in future updates to ensure the security of sensitive financial data. These adjustments and enhancements could greatly improve the app’s utility for restaurant owners and managers.
New projects, work inquiry or even a coffee.
I'm currently a Software Engineer at Capital One. I got my BS in Computer Science at Brown University. My pals describe me as a caring, reliable, hardworking team player. I'm passionate about interaction, UI/UX, and human-centered design. My driving force is understanding people, having empathy towards the challenges they are presented with, and helping them find solutions through intuitive design and insightful interaction. When I'm not coding, you can find me playing with my foster cats, going on Pikmin Bloom, or watching K-dramas!