Published on | Prototyping: From UX to Front End — Medium Kim Atkinson UI Designs for a “Create Budget” Feature in Flipp

Disclaimer: I don’t work for Flipp. This case study is a personal exercise to explore how a “create budget” feature within Flipp could work. If you have any comments please don’t send Flipp your feedback. They’ll have no clue as to what you’re talking about. Instead, comment below. I’d love to hear your thoughts!

Flipp is an app that aggregates weekly shopping flyers and coupons.

Hypothesis: Adding a budget feature to Flipp will increase engagement and attract new users. There’s an opportunity to bring in additional revenue as well.

Currently, Flipp works best for gathering clippings, but it leaves a few things to be desired when creating a shopping list. As a result, users are using more than one method to plan their weekly shopping for the following reasons:

Creating a shopping list from it’s current clipping process isn’t ideal — when an item from a flyer is clipped, there is no capability to immediately return to the shopping list to add another item.
Making a list isn’t practical — users have no ability to list multiples of the same item. This causes users to resort to creating a list on pen and paper or a note-taking app.
There’s no capacity to calculate spending — users need to open other apps and/or device/tools (calculators, pen, paper, etc.).

As a user, my verdict on having to do all of the above: not very fun.

Business Opportunity:

1. Adding functionality will encourage users to stay within the app, increasing the average engagement time per use.

2. A budget feature can be an in-app purchase ($1-$5).

I would definitely pay a fee to minimize the stress of planning and tracking my weekly grocery shopping. I have a strong feeling others would too; I’ve talked to them.

Process

I began by developing a task analysis. I worked through the touch points users will encounter with this feature. This guided the creation of my interaction and UI designs.

I went through several iterations of how this feature could work and paid close attention to usability.

Task Analysis

Sketches

Interaction Design for Create Budget Feature

The wireframes below depict the new user experience.

Creating a Shopping List:

Now have the option to view past shopping lists.

Creating a budget:

Users can now add multiples of the same item.

Adding items based on budget:

Adding items decreases the remaining budget amount.

Creating additional budgets:

Budget creation is an easily repeatable process and can be shared.

UI Design

The following images explain the visual design choices that were made:

Shopping List Home Screen

Shopping List with Budget Feature Home Screen

Budget Keypad

Conclusion

People use Flipp to find deals. Once a deal is found, users exit Flipp and go about their day. There’s an opportunity here to increase engagement. Increased engagement means less time spent in competing apps. It also allows Flipp to embed itself in a user’s shopping process in a way it hasn’t before; with the ability to plan, calculate, and track spending all in one place. It will attract new users since no other apps currently have this functionality and/or convenience. People are creatures of habit. If we find a habit we like, it becomes increasingly difficult to get us to change it. Revamping Flipp in the way I’ve suggested about will help Flipp take advantage of that.

Disclaimer again (in case you may have forgotten): Please don’t contact Flipp. Contact me. Unless you think I did a really good job, then contact Flipp.

Increasing Flipp’s User Engagement was originally published in Prototyping: From UX to Front End on Medium, where people are continuing the conversation by highlighting and responding to this story.

Increasing Flipp’s User Engagement

Cool stuff, every week

More Articles