My Role: Lead Designer for the Bakerz app
Duration: 2018
Bakerz is a mobile app that connects you to people who want to sell you home-baked desserts. Users browse the app, pick what they want, pay online and then either pick up their food or have it delivered. I worked on the Android redesign of the app. Below you can find the solution I came up with as well as the process I followed.
As this was a redesign project, the first thing I did was to check out the app. I tried all the features and took note of the overall look and feel to get a good idea of the product and gather my initial thoughts. I also did some competitor research to see how similar products worked, the features I liked and the ones I found troublesome. The client had also provided some notes on the features that needed to be revised, and the info they wanted to focus on.
Although it might be tempting to start drawing wireframes immediately, I always like to take a little time to listen to the team or client I am working with, understand what they believe is and is not working, what their needs are, and what are they looking for in the redesign. So that I can plan to make solutions to what the team is looking to fix.
In this case, the Bakerz team wanted to make it easier for people to connect with home-bakers and buy desserts. One of the problems they were facing was concerns about concerns over the quality of the cooks and their dishes. Another problem they were trying to solve was that searching and sorting desserts was not intuitive and difficult for their users.
The Bakerz team came to the conclusion that there were thousands of people that are open to the idea of buying home-baked goods but were averse to the idea of making the first purchase through an app. Keeping these things in mind, I decided that I should focus on making the app feel: “intelligent and useful” as well as “trustworthy and highly-regarded”.
This should be achieved by the following goals:
1. Help people find and buy quality home-baked desserts.
2. Highlight the background and expertise of the chefs.
3. Provide the necessary information about the items on sale.
I spent a bit of time sketching, wireframing, and prototyping ideas for the new version of Bakerz. We had regular meetings with all of the team involved, where I presented the progress, we refined our ideas and honed in on what everyone was feeling strongly about.
This is an early whiteboard sketch where I mapped the user flow and the basic features I wanted the app to have.
After some more iterations, I was ready to start prototyping low fidelity wireframes in Adobe XD. Being able to design low-fidelity wireframes quickly means that we can make huge strides towards creating a layout that offers a great user experience, while not having to worry about the visual design too much (at first).
For the bottom navigation I opted for 4 top-level destinations:
1. Find
2. Liked
3. Orders (has past orders, upcoming and messages)
4. Profile
These have similar importance requiring direct access from anywhere in the app. The shopping cart was added as a toast bar, displayed at the bottom of the screen. It contains a single line of text directly related to the items added to a cart.
From the start of the experience, I wanted to draw interest towards the product and, also showcase the user what is the expected use case. The welcome screen is pretty standard, first-time users are greeted with a prompt to sign up via Facebook or Google. The screen also features a large animated app icon to reinforce branding and add some visual delight to the user’s first contact with the app. To reduce friction, the user can skip the process of signing up, if he does he will be reminded to make an account before buying a dessert.
In the context of value being delivered as soon as possible the second screen lets the user select some of the things they like. The categories come from the most popular filters and types of deserts. This makes sure that the home screen grades and ranks the information and shows the matching data as a top recommendation for the users.
A walkthrough helps users understand the app’s basic value proposition. It uses the first screens to create some context and focuses on benefits instead of features. Animated walkthroughs are much more engaging than a static one (since animation is great at grabbing attention).
The main view is quite simple, its main purpose is to find and discover. On the top, it has a search bar where the user can input exactly what he is looking for. Below, there is a grid that lets the user filter the available data very quickly. These filters were carefully selected as the 6 most valued categories from the desserts data. At the bottom, the recommendations are displayed ranked and personalized based on the onboarding screens. This way we help three types of users: the ones that have a clear idea of what they are looking for, the ones that have a category of dessert in mind but would like to browse for ideas. And the ones that are looking for recommendations and haven’t made up their mind yet.
If a user picks a category, he will be shown a screen where he can scroll through the category desserts shown as a grid list optimized for visual comprehension. From here the user can sort the data based on price, distance, and dietary requirements.
One of the problems of the application was that it showed too little information about an item and the baker. Because of this, users were suspicious of the quality of the goods or were left with many questions regarding the ingredients of an item.
This was bad for the app because many sales were lost at this point. So to help achieve goal number 2 and 3, I created a screen that showed the relevant information about each item.
The top of the screen has a gallery of images, the name, dietary specifications and the rating of the item followed by a description.
If the user becomes interested in the desert he can check the rating and the profile of the baker and message him or her. This reassures the buyer of the professionalism and experience of the home-baker.
To make sure that the selected article fulfills all diets, the ingredients are specified, this is similar to buying a baked item in a store. Below that, the nutritional information is displayed, such as calories, servings and special diets. Reassuring the user of the full story of those products and helping him to make good choices.
At the bottom, the user can add the number of items required to a cart and see the total price for the purchase.
Once an item is added to the cart, a toast bar is added to the bottom of the screen, showing the total amount, the number of items and a view cart button that displays a persistent bottom sheet with the order’s items.
The orders top-level destination shows a fixed tab bar where the user can browse past and upcoming orders as well as messages sent to bakers. Each order displays a picture, date, and total. It also contains two buttons, one for easy reordering of the item and another one that shows the complete receipt of the order.
High fidelity wireframes give a better taste of what real UI elements might look like and make it easier to communicate functionality to developers.
Motion effects can be used to build a connection between the customers and the app as animation makes user onboarding more engaging.
One of the essential places, where a well-designed animation is meant to impress users, is the onboarding flow. Inviting them to interact with your app trough visual elements will convince them that it was a great decision to download your app.
Some apps have a complex structure, and if you don’t want to frighten users, you should explain how an app works at the very beginning. That’s why I wanted the initial onboarding screens to be simple and focus on the benefits of using the app instead of the features.
I designed the artwork for the animation in Illustrator and then imported the layers to After Effects where I keyframed the necessary items.
A user can search for the type of dessert he wants and then sort the results based on price, distance and dietary filters.
A user can search for the type of dessert he wants and then sort the results based on price, distance and dietary filters.
The results view shows the pictures of the desserts.
The desserts name is also featured, followed by the name of the cook, the price, and a like button.
The like button helps the user save the desserts he likes to a list, and lets him continue browsing quickly through the results.
At this point we’re mainly trying to get the user into the detail view, so we’re going for a “delicious” reaction which would lead to a click.
When the user goes into the detail view we want to address his concerns about the dessert.
We want to highlight the background and expertise of the chefs as well as provide the necessary information about the items on sale. The user can see the name of the item as well as the dietary concerns, and a description above the fold.
Here we also find a favorite button as a FAB because we want to encourage the user to continue maintaining a shortlist.
Below the description, the basic information of the home-cook is displayed: a picture, the rating and the number of reviews. If the user taps here, the profile of the baker is displayed.
There is a contact button, which was one of the most used features of the previous app. If the user has some questions, he can contact the baker directly by chat.
Below the ingredients and information are displayed. And a special instructions field can let the user write a note.
Finally, at the bottom, the user can select the number of items and add them to a cart.
If the user displays the baker profile we want to address his concerns about the professionalism of the chef.
Right away we see a chef’s profile picture, a brief introduction about him, a rating, location and a grid list that shows the all the desserts offered by the baker.
This profile screen is important to help reach goal number 2. The background and expertise of the chefs are highlighted making the app feel trustworthy.
The shopping cart was added as a bar, displayed at the bottom of the screen. It contains a single line of text directly related to the items added to a cart containing the total amount, the number of items and a view cart button.
If the view cart button is pressed, the user is taken to the cart view displayed as a persistent bottom sheet with the subtotal and total of the order’s items.
Before redesigning an app it is important to stop and think about what kind of experience first-time users deserve. Give some thought to what you’re trying to accomplish, and which techniques are most appropriate.
Keep in mind your personas and goals before embarking on a redesign. Having defined personas will allow you to target the design to your target audience. Having goals gives you a mechanism to make decisions on the design as well as measure success once you are done.