Mobile Apps: Freshop Groceries & White Label

Freshop Groceries App

This app is available at no additional charge for all Freshop customers when they join the platform. It leverages the API and experience flows available in the browser-based product. It has been developed for both iOS and Android devices. The codebase also serves as the foundation for the white-label mobile app offering at an additional cost. 

The apps use the base design systems offered by Apple (UIKit) and Google (Firebase). With the acquisition of Freshop by NCR in 2021, the team doubled back to build an updated, shared design system focused on Material UI. This was shared across all lines of business at NCR to provide continuity and improve the ability to share solutions.





PRODUCT DEVELOPMENT – Overview

I joined Freshop in 2018 as the sole designer (growth marketing/onboarding / UX/UI / CMS-WordPress / everything design). By 2022 I led a full-time designer and an intern, and together we re-created the UX/UI flows in Figma. The past CEO was the decider on the product. In the last year, we hired a Product Manager who has not worked in eCommerce or mobile app products. The mobile apps were originally created by the Engineering team and have not benefited from a formal design process. Yes, it is the perennial story of a technology startup. I have been called in throughout my time here to provide UX flows and offer UI comps to help provide better communication and usability. 

Now, we have many roadmap items to accomplish that begin with documenting current flows and recreating the current UI in order to educate product and engineering teams. The approach is to create incremental improvements (MVP) that can be implemented in 2-3 sprints. My team is working to create achievable “Patches” to create better functionality without impacting the Engineering API/App teams.

MY APPROACH TO MOBILE APP UX/UI

Starting in Q1 2022, I’ve set my team in motion to document the relevant current flows in parallel to the roadmap and start creating components in Figma. It helps us to communicate with Product and Engineering the current state of the products. Beginning with the areas we are being asked to improve. It has allowed us to then iterate more quickly to tackle the roadmap items. 

We are attempting to adhere to an Agile process. The goal is to lead by example and establish new working relationships and collaborative behaviors with Product and Engineering. It is my hope as time passes that our teams grow together to generate positive results and better user experiences.

FRESHOP GROCERIES and WHITE LABEL MOBILE APPS

These are our customer’s end user-facing products. We also have an order fulfillment app called “Freshop for Stores” that we are balancing to thread front-end updates into this product. It too is also going through the above documentation and component creation process. I will address this in another post.

The mobile shopping app “Freshop Groceries” is similar to a marketplace format. All of Freshop’s customers are represented by this app. We have over 550 grocery store banners with over 3,500 individual store locations. This gives smaller banners (1-5 stores) an opportunity to offer a mobile app solution. The caveat is that they must download our product. 

Larger banners (6-200+ stores) like to manage their own brand and want to direct their shoppers to their own mobile app in the Apple and Google Play stores. As mentioned previously, the codebase is the same. The branding and publishing are wrapped around apps for each.

MY ROLE IN THE MOBILE APPS

The majority has been created during the start-up phase of the business. I’ve been involved in feature improvements (checkout process, time-slot selection, branding/design systems). It has become a more collaborative process. I am grateful for that. Having a three-pronged (Design, Product, Engineering) approach was beneficial for the future of the product. 

I understand the work that is needed to create better processes for a better product. My vision was to shape these processes while making incremental improvements. The absence of an established Agile process didn’t stop me from building one. 

I referenced books and online publications to guide the teams to a better understanding of the concepts for better product development and design. All this while remaining optimistic and determined kept me focused on productivity and a better future.