PROJECT

Product & UX Design at RecipeBox

As a leader for ux and product I solve user problems and help grow the app.

The Details

Context

RecipeBox is a small start up aiming to make planning and preparing meals easier. Its on the App Store  available for download. The main free features are searching, creating,  and saving recipes. Our premium features are generated grocery lists, and custom meal planning. We also have a web application that allows users to save, search, and create recipes at  www.getrecipebox.com


My role

Leading Product / UX Designer. Our team is the founder, technical  lead (both developers) and myself. My joining the team happened in preparation for the app monetizing.


Outcome

Some outcomes of my work are:


  1. Increase in-app purchases. (IAP)
  2. Increase downloads with improved marketing screens in the App Store.
  3. Decrease support emails and confusion around meal planning in mobile app.
  4. Decrease support emails and confusion around categories in mobile app.
  5. Achieve feature parity by designing and testing meal planning for web


Continuous: Add elements to design system for consistent look and feel across all platforms.


Process

As  a small team we are doing our best to scale our process to involve more interaction with our users. When possible I user test, as well as use best practices for mobile design, to work towards a user focused design.  


All of my design work starts out in Figma, I use existing UI elements I have already created along side screen shots to quickly make prototypes.

I also use Figma to plan out user flows, information architecture, and brainstorm.

When prototypes are ready I test with users over Zoom.


Initiatives:

App monetization

This was my first priority. I did competitive research to understand more about our features in relation to out competitors.


I thought about when these in-app purchase touch points would intercept users. I identified areas of "hard", "soft", and passive intercept. Hard intercept was a pop up disrupting a users action, for example. Soft intercept was users navigating to the feature to see a screen for purchase in its place. And passive intercept was when a user searches recipes a small ad would appear in the search results.

After discussion we decided that soft intercept for our In-App Purchase (IAP) would be the smallest lift from a technical perspective. This was important to consider because having not monetized the app at all, this would be the quickest way to validate our value.

Passive, Soft, and Hard In-App Purchase Intercepts

With our soft IAP in place alone the result has been steady daily revenue with an upward trend.


Improved Marketing Screens

One of the first things I did was try to improve upon our marketing screens that potential users view in the App Store before they decide to download the app. I did some competitive analysis to try and determine how competiors were using these screens and what the common practices were. I considered where we felt RecipeBox fit in the market and what opportunities there were for us to outshine them.

The biggest challenge in producing marketing screens is the number of devices you must produce them for. Depending on the device you are using to visit the app store, Apple determines which marketing screens to show you. With the number of iOS devices on the market now-- that's 12 devices and 60 screens total f you choose to show 5 previews like we did.

Example of 2 sets of marketing screens in Figma

I used Figma to automate producing these screens. This helped us save time so we could focus more on which features we wanted to highlight and writing succinct copy.

Re-designing meal planning and categories

This re design has not made it to production (yet!) but involves improvements to user experience.

Figma Prototype of categories re-design

For meal planning there is still some work done to optimize it, but some of the iterations we are working on focus on creating an interface that serves different styles of meal planners. Here are some of the ideas we had based on some loose personas we worked on.

Meal Planning Wireframes and a high fidelity version that uses are current layout.


Feature Parity on Web

This has been the most challenging by far. I did some research on competitors that offered a web based meal planning and saw that there was no good solution. I really had my work cut out for me. I looked at other web apps that were adjacent to meal planning in functionality. I used that to put together a quick prototype and did some usability testing over Zoom. After a few iterations we ended with something that could make for a good minimum viable product (MVP).  The testing also gave us some nice backlog features that we believe may be a good fit for our users under served needs.

3rd iteration of meal planning for web after a few user interveiws.


Take away

This continuous work provides new challenges and problems to solve. I've learned a lot about iOS development & design, as well as mobile specific interactions and design patterns.