Nwamaka Akah

Nwamaka Akah Reports Overview Share Income Expenses NGN Customers This Month Total No. of Customers 45 +12.50% compared to last 30 days Oana Grigore Avg. Transaction Per Customer ₦42,540.00 +12.50% compared to last 30 days Designing the Reports feature on Dillali ₦12,320.03 Avg. Pending Payments +5.30% compared to last 30 days Case study Feranmi Olowookere PROJECT OVERVIEW What is the Reports feature? Reports is a feature in the financial records-keeping app Dillali. It provides a more detailed information about our users’ financial transactions and enable them make informed decisions. Every business owner wants to know everything about their business financials in simple terms. By adding this layer to dillali, our product moves from storing information to providing insights. This is the start of making dillali a super-smart app that will do a lot for the business owner. Problem statement Why we chose this feature? It’s pretty simple. Feedback As a product company, we understand how important feedback is to our product development. So our first step was to listen to our users. From our feedback analysis, we discovered the following key pain points: Our users want to be able to make informed decisions in their business. To do this, they need more and detailed insights than we offer with our dashboards. Because of the complexity of financial data, the business owner always relies on an accountant to get adequate information on their business. Design process Our journey from ‘To Do’ to ‘Done’ Empathize Define Feedback analysis User personas User interviews Empathy map Ideate Information architecture Userflow Problem statement Week 01 Week 01 Design Moodboard Design Test User testing Iterations Prototype Week 02 Week 03-07 Week 07-08 EMPATHIZE Feedback analysis Messages from our feedback channels showed that our users were making requests based on their needs. We analyzed these requests, which helped us prioritize based on our users’ most immediate needs. New feature request between August - October, 2021 37% 12 responses 50% Reports -50% 13% Stock/Inventory -37% Budget -13% I would like to have a barcode scanning and inventory feature to reduce theft -Emeka It would be nice to compare my budget and expenses to know if I surpassed it. -Grace Can I be able to see more information on my business without having to wait for the monthly reports sent to my email? -Abdul EMPATHIZE User interviews Once we settled on which feature to start with, we conducted interview sessions with some of our users to determine the type of data they would be looking to see in the reports feature. The following are some of our findings. As a user, what data do I need to see concerning my income? As a user, what data do I need to see concerning my expenses? Total income Total expenses List of all income based on time period List of all expenses based on time period Top selling products Performance compared to time period Highest paying customers Group expenses by category List of invoices generated, collected and owed Average time to receive payment Average Value of Sale Performance compared to time period Would you like to have segments of reports like income only, expenses only? Would you like to download and share the reports? 7 responses 7 responses 100% 95% 5% Yes -95% Yes -100% No -5% No -0% DEFINE User persona We created these personas to help us understanding our users’ goals and frustrations. Samuel Okpala Agri-business Kano, Nigeria Samuel owns a chain of farmlands, where he cultivates various food produce. Due to how large his business is, it can be hard sometimes to track losses or gains. Frustrations Goals Wants to see his business performance in real time Wants to be able to understand the his business analytics Waiting till end of the month to see his business perfomance slows his decision making Business data is very complicated and hard to understand Joy Akinde Candle business Osun, Nigeria Grace builds her business around her customers’ satisfaction. From time to time, she sends gifts to her customers and make them feel special for supporting her business. Goals Wants to know which customers support her business most Wants to know which of her products are most loved by customers Frustrations Has to determine her best customers by going through bank transfer records Cannot afford an accountant to help her with business analytics Ideate Information architecture Overview Expenses Income Income reports Expense reports Net balance Total income Total expenses Income Pending payments Avg. expense value Expenses Average income No. of expense payments Reports overview Pending payments No. of invoices View net balance only Amount generated from invoices Highest paying customers Top selling products How customers pay you Avg. time to receive payments Top selling products Expenses by category All expenses Share Filter by date and currency Customers Customer reports Total no. of customers Avg. transaction per customer Avg. pending payments Avg. customer rating Avg. time to receive payments How customers pay you All customers Payments received Share Pending payments Top expenses Share Filter by date and currency Pending payments Share Filter by date and currency Filter by date and currency Ideate User flows Flow 1: User wants to see their reports in real time. Open app Route for desktop Reports Dashboard Route for mobile Open hamburger Navigation menu Overview Income Expenses Customers Flow 2: User wants to filter their reports to a specific timeline or currency Filter Overview By By date currency Income Date picker Currency picker Expenses Select date Select range currency Customers Apply filter Flow 3: User wants to share and download their reports Share Overview Share via Share via WhatsApp Email Download Income Expenses Download report Share report Select document format Customers Enter Select report Select report to download to share number/ email Excel PDF sheet Download Overview Send Income Customers Expenses Design Design guide We adopted the antdesign system, since we already adopt it in our app. This helps make the development seamless because antd components are available for developers too. However, we still followed our brand guidelines in terms of colour and typography. Typography We chose inter because it is our official font and also a google font and this helps our app size. Inter The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog- Colour Primary Accent Secondary Interactive Design Visual designs Overview Users can see an overview of their reports. We focused on the most important reports that they woud want to see at a glance, which is mostly info about their current financial state Income The reports are segregated appropriately. In the income section, the user gets to see more detailed information about money they made, as well as who owes them. Expenses Users are able to see everything regarding the expenses they made within a time period, and also compare it with previous expenditures. They also see which expenses they finance most Customers Users can easily know their customer base and activities, in order to make better customer-relation choices. Download Users can easily download and have their reports locally shared. They can choose any section of the reports, in two document formats (PDF or Excel sheets) Share Users can easily share their reports either via email or WhatsApp. They can choose any section of the reports, in two document formats (PDF or Excel sheets) TEST Usability testing From the testing sprint, we found out that the general flow of the app was straightforward and clear to the users. However, we noticed two significantly recurring edge cases: The users were confused by some financial terms and jargon Some of the data visualization graphs seemed to complex We solved these by: Simplifying some of the terms Adding tool tips to explain the ones we could not simplify Opting for simpler and more relatable graphs. Take care and thanks for being here! You can read our blogpost on key things we learnt in the course of this design in our blog https://www.dillali.com/blog/designing-the-reportsfeature-key-lessons-we-learnt