Read MoreNCR MUI Design System (WIP)
NCR MUI Design System (WIP) The goal of the collaborative design system is to align each product in the entire NCR product ecosystem. This includes digital products in Banking, Retail, and Hospitality. My role is to contribute and comment on elements added to the Figma library for the Freshop product and eCommerce applications. Some of these are for end user-facing UI elements. A positive joint effort is to combine all elements in the dashboard. This effort will create a seamless design and experience for customers to service their own products. The following are examples of blocks representing core treatments of components. All included in a shared Figma Library leveraging MUI (Material UI).
Read MoreFreshop Groceries Mobile App
Freshop Groceries Mobile App This is a project created during Freshop’s Start-Up phase by the previous CEO and Engineering team. I assisted with UI support. I did not successfully contribute to the UX due to the structure of the organization. Initial designs were created in Sketch and are now recreated in Figma. This is an example of the Substitution Flow in its current state. I am working at this time to reconfigure the UX for a more intuitive experience defined by the current state. Sharing the product to provide context that I do work with Mobile App design and development. DOWNLOAD APPS
Read MoreUI Project: Personal Shopper Substitution – Freshop for Stores Mobile App
Freshop for Stores Mobile App This is a project created during Freshop’s Start-Up phase by the previous CEO and Engineering team. I assisted with UI support. I did not successfully contribute to the UX due to the structure of the organization. Initial designs were created in Sketch and are now recreated in Figma. This is an example of the Substitution Flow in its current state. I am working at this time to reconfigure the UX for a more intuitive experience defined by the current state. FIGMA UI PROTOTYPE The components are being recreated with Figma to document the current state of the flow. This audit includes learning the product and interviewing Personal Shoppers to figure out where it is and where it should be going. OPEN PROTOTYPE IN NEW WINDOW
Read MoreUX Project: Personal Shopper Substitution Flow with Two-Way Communication
The task is to create two-way communication through the “Freshop for Stores” App from the Personal Shopper to the Digital Customer. The intent of this communication is to help expedite substitutions for OOS (Out of Stock) items and replace them with an IIS (Item In-Stock). The Digital Shopper will receive the messages through the stores’ mobile app or SMS/Text. I’ve defined the process to begin with a Conceptual Model/Flow chart to communicate between the UX Design, Engineering, and Product Teams. We are in agreement that this is the flow used and we can add UX/UI to solve the design problem.
Read MoreMobile 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 our browser-based product. It has been developed for both iOS and Android devices. The codebase also serves as the foundation for our 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, we are doubling back and working on an updated and shared design system focused on Material UI. This will be 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). I now have one full-time and one intern that reports to me and we are now re-creating the current 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…
Read MoreUX Project: Product Substitutions
PROBLEM A perennial issue with online grocery shopping is that the product the customer chooses first is not available and they would like to substitute it with something similar. When a product is not available during fulfillment, it creates an increased amount of friction on the personal shopper’s productivity. Each time an item is not available and the customer requests a “Best Comparable” product, the personal shopper, in most cases, needs to make a decision themselves or reach out to the customer to find the best replacement. Slowing everything down and placing strain on the stores to keep up. RESEARCH It was known that the substitution process was a challenge for both end-users and personal shoppers. The current flow was defined when Freshop was a start-up (pre-2021 acquisition by NCR) and did not have a defined UX Design team. I was “the team of one”. Its addition was created by Engineering to offer something to the stores on the platform. The team began looking at the competition to understand how they were handling it. Instacart, even though it is a marketplace eCommerce solution, has defined the expectation by online shoppers on this is handled. We have learned valuable insights by deconstructing how others handle this flow. What we found was that we can see the “Front-End” experience of the shopper but can not see how the fulfillment tool handles it. We also interviewed the engineer who was the architect of the solution to understanding what guardrails were present in creating a solution. ROADMAP This platform enhancement was elevated to the roadmap Q1-2022. Project, Engineering, and UX Design teams met to define what was possible leveraging the design systems patterns and components. The Product team wants to create an MVP to move this into production by end of Q1. SOLUTION With broad requirements, the UX Team set out to leverage the available patterns and components to create the UI. The framing of the problem that was presented was to reduce the cognitive load and offer fewer options with the ability to add a second choice product for the online shopper. This would streamline the fulfillment process. We also were aware of the technical considerations that leveraged the current platform so we could create the desired MVP by end of Q1. The following prototype is how it will be presented on the front end of the platform. Flows/UI for the personal shopper…
Read MoreUX Project: Pre-Select Time Slot
PROBLEM End-Users of our platform often experience that after they spend time shopping for the products they find that they can not pick up/receive delivery when they desire it. They are unable to see available slots until they have entered the checkout experience. This creates abandoned carts and/or customer disappointment. RESEARCH The UX Design team looked into the claim by reviewing the analytics. We noticed a number of sessions ended on the first step of the checkout process. This step is where they select their fulfillment type and time slot. This finding coincides with anecdotal evidence, this claim appears justified and needs to be addressed. We looked to see how other online grocery solutions manage this flow. From what was discovered, a list of approaches was created and presented to the product team with recommendations. ROADMAP This platform enhancement was elevated to the roadmap Q1-2022. Project, Engineering and UX Design met to define what was possible leveraging the design systems patterns and components. The Product team wants to create an MVP to move this into production by end of Q1. DESIGN With these requirements loosely defined, the design team began creating the proposed user flow and creating Lo-Fi mockups to communicate how this problem will be solved. We are in the process and you can see the Figma prototype to begin to see how we are solving the problem. WIP/Process Prototype: Current Project Update 02/19/2022 OPEN PROTOTYPE IN NEW WINDOW
Read MoreFreshop | Marketing Website
MULTI-CHANNEL SHOPPING EXPERIENCE Service customers with a multi-channel shopping experience that lets them shop beyond your store’s physical location; on their desktop or laptop computers, tablet devices, or mobile phones. Tailored to the grocery and beverage industries with tools to thread your store’s brand and reach more customers in the online marketplace. View Website
Read MoreUX/UI Bevmo – eCommerce Redesign
This was my first full redesign of what has become Freshop’s largest customer. Working with their digital team, I was able to lead in defining and designing the user interface. Establishing design systems that organize content and make shopping easier. We were able to accomplish this inside the provided brand standards which needed to be expanded to accommodate design for the desktop browser and mobile devices. The design layouts were created using SketchApp and Adobe Creative Suite. The eCommerce platform uses a WordPress theme to deliver the shop functionality and requires custom CSS and web programming to display content pages to match their brand guidelines. The website is managed by the Bevmo’s marketing team: Bevmo website
Read More