Betterbia is an Android app that helps users make healthy eating a habit. It restructures cooking methods, breaking them down into simple, task focused steps to create easy to follow, accessible recipes.
As well as re-imagining how recipe methods are presented to users, the app also features a number of tools to help users to begin and continue eating healthier food. There are in-built, shareable shopping lists, as well as a progress tracker and innovative recipe selection methods.
Betterbia has 5 main sections that are broken down below: the recipes list, the recipe detail page, the step by step process, the shopping list, and the profile page.
The application is broken down into 5 main sections.
Recipes List
Users are provided a database of recipes to search and filter. Users can filter by main ingredient, time, or search for a recipe directly.
Recipe Details
Each recipe has a detail page, providing the user with key information like ingredients or equipment needed. Users can also add ingredients to their shopping list from the detail page.
Step by Step
When a user is ready to cook, they hit "Cook this recipe" on the Detail page. This launches the Step by Step process, which guides the user through the cooking method. It breaks each step down to one simple action, with an accompanying drawing, and timer if needed.
Shopping List
The shopping list allows users to add and manage shopping lists. They can have as many lists as they need, with the option to share lists in real time with other users. Items can be added from the Detail page, or typed in manually.
Profile
The Profile page provides a simple tracking system for users. A lot of users showed interest in tracking progress, but many were intimidated by apps that require too much interaction, or provide too much data like calorie counters. Betterbia keeps it simple: 2 inputs, with a calendar for an overview at a glance. Nice and easy; nothing fancy.
Research
Betterbia took place over six months, and began with a period of extensive research. While we knew that we wanted to create a healthy eating app, we began the project with no goals beyond that. The research consisted of interviewing and surveying as many people as we could, and collating those responses into a number of design insights. This body of research pointed towards an intimidation factor that put people off learning to cook. To combat this, betterbia is designed to restructure recipe methods, and help guide users through recipes in a much more meaningful way.
Design Process
After the research phase, the project went through a number of design cycles. Each cycle meant idea generation and development, before refining ideas into concepts and getting them in front of users. This process is best exemplified by our work on the recipe selection inputs.
The selection filter component was a microcosm of the overall design process used throughout the project.
Informing the Design
Our research showed that when searching for food, users wanted to sort by two key factors: time taken to cook a meal, and the main ingredient the recipe uses. We used these insights to inform our design phase, which began by sketching out multiple variations of the design.
Sketching designs allowed us to rapidly iterate through potential solutions.
Detailed Design & Digital Prototypes
Once the initial feedback had been collected, we mocked up the designs using Sketch and Principle. Testing digital prototypes allowed us to get a much clearer view of how users expected the interaction to happen - movement, animation, and detailed design can be tested with these prototypes. Again, these designs were shown to users to gather data on how they work. A key learning from this iteration was that a logo on its own was not strong enough to convey meaning to the user - text would also be needed here.
Coded Prototypes
The final stage was to create coded prototypes. This allowed for a really robust, complete user test. The design was essentially tied down by this stage, meaning that we didn’t have to waste valuable time coding and recoding because of user feedback. Instead, we were able to focus on the microinteractions throughout the user experience; the focus was on things like how long the transitions take, and did users prefer scaling animations, or sliding animations.
Coded prototypes allowed us to test microinteractions, like animation style and timings.
Development Tools
Betterbia was developed using a combination of tools and frameworks. The front end was built using AngularJS and Ionic, a framework that focuses on optimizing performance and display on mobile devices. The back end is built using Firebase. Firebase is a database that stores its data as a JSON string, providing a number of Javascript functions to call and save data. It also manages storage of images and user authentication. I had a basic knowledge of Javascript and jQuery when the project began, so there was a steep learning curve in the first few weeks.
The project can be viewed as a GitHub repository. The GitHub was not used for the full duration of the project, so does not represent the development cycle implemented.
Problem Solving
While working on this project, a very clear method for problem solving arose. Many coding challenges presented themselves over the course of the project, and this method was applied to each of them. In solving the challenges, the key was to break the problem down into its most simplistic. If you can build the most basic interaction, that is an excellent starting point. I then used the basic piece as a building block, and iteratively build on more and more smaller pieces. Through this method, the smaller building blocks can be combined into more complex, compound structures.