Date: 2018 - 2019
Role: Principal Product Designer
Role: Principal Product Designer
tl;dr
I designed the user experience and user interface for an enterprise platform consisting of mobile & web apps. The app digitizes Office Depot Europe’s corporate client order fulfilment process. I also provided design consultancy and project management services throughout this project.
Brief
Office Depot Europe manages office supplies for corporate and government clients. At standard intervals, a courier visits the client’s office to restock and backorder office supplies. This process, which Office Depot Europe named “NeverEnding Store®” (NES for short) was largely carried out offline and involved a lot of paperwork. ChainCode B.V. in partnership with Emkore Limited was tasked to digitize this process.
Deliverables
1. Digitize the existing order fulfillment process into a user-friendly experience for Office Depot's couriers, increasing efficiency while minimizing backorder time.
2. Using Office Depot’s branding guidelines, craft a sleek and intuitive UI/UX for both mobile and web applications.
3. Develop a comprehensive project initiation document for phase 2, detailing features, technology, front-end design, development roadmap, and milestones.
Background
The project was divided in two phases; phase 1 focused on the initial launch, and phase 2 on improvement & expansion. Doing research, I found the following:
1. The order fulfillment workflow has to be standardized to map to a UX.
2. All cabinets have a "grid-like" layout similar to a spreadsheet.
3. Product mutations happen often, and without prior warning. These mutations also result in new product SKUs (barcodes).
4. Most user errors occur when recording and logging product orders.
5. To get buy-in from staff, keep things simple.
6. The app needs to work offline due to the security requirements of certain clients (e.g. government facilities).
User Experience
In Phase 1, the focus was on efficient barcode scanning, which seamlessly integrated with existing workflows as to secure employee buy-in. To address hidden product mutations, I introduced a manual barcode input, allowing users to add unrecognized barcodes as new SKUs.
Phase 2 honed in on solving the product mutation challenge and refining on-site order fulfillment. Using a web app for back-office staff, we were able to centralize product order & SKU mutation processing. This allowed us to transition the mobile workflow from scanning-based to location-based. In this workflow, the courier immediately sees the entire inventory upon scanning the cabinet barcode. This transformation prompted the creation of a dedicated workflow for onboarding cabinets, ensuring compliance with the new order fulfillment UX.
In addition to previously mentioned core features, I devised workflows enabling Office Depot management to track various KPIs like workday duration, time spent on travel and order fulfillment. The finalized UX optimizes & simplifies the order fulfillment workflow, reduces time spent on non-essential tasks, and decreases user errors.
Phase 2 honed in on solving the product mutation challenge and refining on-site order fulfillment. Using a web app for back-office staff, we were able to centralize product order & SKU mutation processing. This allowed us to transition the mobile workflow from scanning-based to location-based. In this workflow, the courier immediately sees the entire inventory upon scanning the cabinet barcode. This transformation prompted the creation of a dedicated workflow for onboarding cabinets, ensuring compliance with the new order fulfillment UX.
In addition to previously mentioned core features, I devised workflows enabling Office Depot management to track various KPIs like workday duration, time spent on travel and order fulfillment. The finalized UX optimizes & simplifies the order fulfillment workflow, reduces time spent on non-essential tasks, and decreases user errors.
User Interface
Choosing Flutter as our front-end SDK and Material Design as our design system, allowed us to quickly turn around phase 1 and lay the ground work for phase 2.
Using Office Depot’s brand guidelines, I designed a single user interface appealing to Android and iOS users. To cut down on development time, I had to select a single typeface and icon library. As to not alienate either Android or iOS users, I opted for a neutral 3rd party typeface: Work Sans. This font is optimized for on-screen text usage at medium sizes (14-48px). I used FontAwesome Pro for icons; adding a little “play” to an otherwise business-minded app.
Using Office Depot’s brand guidelines, I designed a single user interface appealing to Android and iOS users. To cut down on development time, I had to select a single typeface and icon library. As to not alienate either Android or iOS users, I opted for a neutral 3rd party typeface: Work Sans. This font is optimized for on-screen text usage at medium sizes (14-48px). I used FontAwesome Pro for icons; adding a little “play” to an otherwise business-minded app.
During phase 1 I designed the first iteration of the smartphone app. In phase 2 I expanded the smartphone app, added the tablet app and designed a separate web app for back-office users. In designing the tablet app I made sure to optimize the usage of screen real estate, while maintaining consistency between smartphone and tablet apps.
The end-result is a UI that feels natural for both Android and iOS users, both smartphone and tablet users. A design that enables the user to effectively accomplish tasks without it ever looking boring or dull.
The end-result is a UI that feels natural for both Android and iOS users, both smartphone and tablet users. A design that enables the user to effectively accomplish tasks without it ever looking boring or dull.
Credit
Jeroen Kemp, Product Manager
Jonas Hartmann, Lead Developer
Jonas Hartmann, Lead Developer