→ Description
Einkaufsbuddy is a mobile application designed to simplify the planning, management and analysis of the weekly shopping. By uploading the receipt, the most important information is extracted using text recognition and categorised using AI. With the application, users can better analyse their spending habits and get an overview of their grocery expenses. As a plus, users can set goals that they want to stick to for future purchases.
→ My role
This is a student project of a university seminar, which had the goal of a successful implementation of the application. My task was to identify the user needs and design a user interface based on these findings.
Interviews
In order to define the project idea precisely, we chose an explorative approach and conducted interviews with 4 potential users aged between 19 to 32.
→ Goals
- Identify users’ pain points with existing budgeting apps
- Missing functions in existing budgeting apps
- Needs that have not been sufficiently met so far
- Needs when it comes to supermarket purchases
→ Findings
Division into categories
Respondents would like a clearer division of each product in their purchase and spoke of positive experiences with categories.
Detailed breakdown of purchases
In connection with the previous point, the majority mentioned that categorising purchases as “groceries” or “food” is not sufficient when shopped in a supermarket, as they often also include products from the “drugstore”, “household”, “office supplies”, etc. sectors.
Tidious input process
All mentioned the pain point of manually entering all data in budgeting apps. An automatic retrieval of e.g. date, place and products is desired.
Storing receipts
Saving receipts for further use in returns or tax returns was mentioned by a few respondents.
Confusing purchase summary
Almost all respondents expressed the difficulty that the numerical presentation of the budgeting apps they are familiar with is often difficult to understand. Some suggested a visually simpler and more playful presentation of these.
Competitive & Target Group Analysis
Up to this point, there have been no similar apps that specifically focus in budgeting for grocery shopping. Therefore, our research applied to general budgeting and other finance products.
Compiling competitive research enclosing target market, user-friendliness, features, usability and design together with a comparison chart aided to evaluate current market offerings.
App Name | Description | Design characteristics | Interesting Features & Functionalities |
---|---|---|---|
MoneyCoach | Budgeting | Brand colors: Minimalistic, Modern, Flat illustration |
|
TaxFix | Tax Declaration | Brand colors: Modern, Playful, Simple, Prominent |
|
LunchIt | Meal Vouchers | Brand colors: Minimalistic, Simple |
|
YNAB | Budgeting | Brand colors: Modern, Simple, Strict, Serios |
|
Finanzguru | Budgeting | Brand colors: Modern, Prominent |
|
Money Pro | Budgeting | Brand colors: Dark, Strict, Professional |
|
Parquet | Asset overview | Brand colors: Modern, Clear, Professional |
|
Empathize with the User Group
By utilizing quantitative and data from the Sinus-Milieus, we formulated personas to three target groups: Lisa (Marketing employee, 30), Peter (Self-employed, 46), and Sarah (Student, 25).
Information Architecture
Based on the insights from the competitor analysis and user interviews, we defined a compressed sitemap for Einkaufsbuddy with only a few pages and functionalities for the beginning:
- Dashboard with an overview of all purchases
- The “Goal” page to check and set spending goals
- The “Scanning” page for the user to scan the receipt
Wireframing, Prototyping & the Final UI
→ Wireframes
With high-fidelity prototypes, I was able to keep the developers in the team updated and changes could be discussed fast. Adaptations to the wireframes could be done in dialogue with the Project Manager despite the distance, which enabled faster implementation and iterative work in a team. A free Wireframes Kit from the Figma Community was used.
→ Clickable Prototype
After adaptations and in consultation with the developer team, the final User Interface was designed and prototyped with Figma, first starting with mobile devices and then also adapted for desktop.
This is a working prototype. Click through and if you get stuck, press “R”.
→ Visual Design & Styleguide
The visual design and Styleguide was developed by researching with mood boards, the insights from the competitor analysis and our focus groups. For a quick and easy implementation possibility for the development team, we used UI components from the Figma file of the React library Chakra UI and adapted them to the visual design.
Conclusion & Learnings
A budgeting web app that focuses on grocery shopping is very much a niche product, but it was well suited for the seminar in an university context. Because it was possible to adapt the feature included in the web app to the scope of the course, we were capable to do design work and technical implementation in three months.
The process of using exploratory interviews to derive a final project idea was new and unusual for me. However, it taught me how design thinking as a mindset – taking user experiences as a starting point – can shape a project.
→ If there had been more time…
- Conducting extensive usability tests with the first prototype followed by design iterations
- Developing a User Onboarding Flow
- Researching and iterating the Dashboard, especially the charts
→ Learnings
- Starting with explorative interviews to find a project idea was scary but helped us gain deeper insights and very specific pain points
- Integrating the development team in the early phase prevented double design work and helped with figuring out technical feasibility
- Regular meetings and proactively asking the development team about the technical feasibility of features I had doubts about proved valuable
- Introducing the development team to the clickable prototype instead of just handing over the link was received positively
- Working with ChatGPT for developing personas delivered very broad and superficial results. Instead, it helped with the beginning and provided a structure to follow up on
- Generating photos for the personas with StableDiffusion on the other side, worked very well
Project members: Benedikt Friedl (PM), Sascha W. (BE), Jenny F. (FE), Nassim Laarmann (UX/UI)