2 weeks of a 10 week course
For our third project at General Assembly, we worked as a team to redesign a mobile app, and add a feature of our choosing. We got the AllRecipes mobile app. The AllRecipes app is popular and has opportunity for improvement both through tweaks of the UI as well as the new feature we designed.
The AllRecipes app provides a way for users to discover new recipes, organize recipes they are familiar with, and create shopping lists for meals they want to prepare. In order to improve the app, and decide on a new feature, we need to know what people's cooking processes are, in order to design a way of making their processes easier.
We used a combination of an online survey, and in-person interviews to determine how users found new recipes, stored the recipes they liked, and how they dealt with constraints like dietary restrictions. We found that in-person interviews, with open-ended questions yielded the most interesting, and the most useful results. All three of us interviewed users using the following set of questions:
We also had our interviewees se the AllRecipes app in order to get an idea of how usable the current app is. The takeaways from this research was:
Additionally, these were the issues we found in the current mobile app:
User research gave us an idea of the work we wanted to prioritize. We decided to add a filtering system to the main recipe feed screen, clean up the shopping list feature, and add a voice activated hands-free mode, so people wouldn't have to touch their phones with flour or grease-covered fingers.
Since we ony had two weeks, and designing for both iOS and Android would add significantly to our workload, I decided to focus on Android. This gave me a chance to research Google's Material Design guidelines and apply them to the app.
Initially, I had tooltips on ingredients that, when tapped, would let the user know how much of that ingredient was needed in that step, but users wound up getting confused by that, so I took that completely out.
The AllRecipes app currently uses a hamburger menu for navigation, but it's not an optimal pattern, and in some cases, it can actually drastically cut engagement time. The Material Design guidelines include specs for a bottom navigation bar, similar to iOS's tab bar. This not only makes navigation choices more obvious, but gives you a place to put notifications as well. You can only put so many navigation items in the bottom nav, so, using the user research we'd already done, I determined which items were the most important, and prioritized those, retaining the hamburger menu for lower priority sections of the app.
I also aded a viewpager to the main feed with categories, to contextualize recipes, so users would have a better idea of what they were looking at.
User test went okay. The app was a bit more navigable, and people found the recipe detail page more useful, but the results of user test still weren't up to what we wanted them to be. The shopping list, though improved, was still confusing, and hands-free mode still wasn't as well received as we'd like.
As I said earlier, the bottom navigation serves two purposes: navigation, and a place to put notifications. I added a notification badge to the shopping list tab that incremented whenever people added an item to the list, and changed the icon to a standard Material Design "add to cart" icon. With these changes, users immediately understood what the app was doing and were able to use the shopping list feature easily.
During a collaborative design studio exercise, we also came up with the idea of adding videos to each step of the cooking process, so I drastically revamped the hands-free mode. Walter Burke Barbe has proposed that people have three distinct learning styles, auditory, visual, and kinesthetic. Having printed instructions, using Androids built-in voice to speech capabilities to read instructions aloud, and the added video demonstrations can cover a diversity of learning styles.
Finally, it was time to produce high-fidelity comps. I used the existing app's colors and fonts to create accurate representations of what a redesigned app would look like. If we had more time, I would have been able to add redlines and annotations to indicate hex values for colors, margins and padding, fonts, and font sizes so developers could turn my designs into a working app.
I also added an instructional modal on the first time you visit the hands-free page of a recipe detail. After the project was complete, I revisited the hands-free mode and did some user testing of my own, and found that users were easily able to understand how to use voice commands to go forward and backwards through instructions.
The night before the presentation, I did some googling, and found out that Alexa already has an Allrecipes skill that talks you through a recipe, but that it's rated 2.5 stars, which is actually really bad. One of the comments that I got when user testing our hands-free mode was that being able to read the direcions on-screen was really helpful. I'm guessing that since Alexa has no visual feedback, users whose learning style doesn't favor spoken directions aren't accounted for, which leaves many users in the dust. By helping the user to solve their problems in the way they want to, you can increase the number of people using your app, and increase your brand's goodwill.Final presentation (Google Slides)