Don Han
Don Han
Don Han
box-logowhite.png
Rotato Snapshot 8.png

Enterprise Platform

donateNYC was created previously to replace a collection of web entities that were used to orchestrate the trading of surplus goods. However, with the ratification of new local law 176 calls for the inclusion to support food. 

The evolution of the platform is a culmination of years of business research, target audience validation, user interface design, user experience prototyping, user testing, web and mobile development on an enterprise level.

As the program owner for donateNYC, I have been at the forefront of advocating, planning, budgeting, designing, and executing the program.

 
donate_green.png

PRODUCT OVERVIEW

Methodology

Lean UX

A common problem when using Agile development methodologies is how to incorporate UX elements into an iteration cycle that results in the implementation of new functionality rapidly. Traditional UX phases can be cumbersome and may require complete design upfront, with Lean UX we bypass the traditional phases of UX with a simpler approach.  In a Closed -Loop feedback system of “Hypothesis” >> “Collaborative Design” >> “Building Minimum Viable Product” >> “Evaluate”. This has allowed us to turn around features quickly for stakeholder review, technical feedback, and continuous delivery.

Scrumban

Keeping agile concepts in mind and we adopted scrumban methodologies.  Using the team differentiation, strengths, and familiarity with each other. We felt the continuous workflow of scrumban would benefit the project.  The constant feedback loop, strict work in progress along team members not being timeboxed into a sprint have allowed for rapid design, development, and deployment of feature sets. 

About the Product

donateNYC 2.0 is providing a platform for residents, business owners and non-profits to directly participate in the “zero by 30” plan the city has set to reduce all refuse waste to landfills by the year 2030. This platform will encourage all New Yorkers to get involved in our future.

My Cross-Functional Roles

During the course of the program’s development, I wore many hats during its phases of milestones.

As a Program Manager/Project Manager 

  • Facilitated delivery of a program to completion on time and quality

  • Proactively removed impediments to ensure successful delivery

  • Devised the roadmap for the program

  • Own and managed communication plan across the program

  • Communicated with the stakeholders and ensure transparency on key decisions

  • Built program budgets and timelines based on internal and external resources

  • Managed through shifting priorities to provide clear direction and input on program definition

As an Agile Partner

  • Facilitated sprint planning, daily stand-up meetings, reviews/demos, retrospectives, release planning meetings, and backlog refinement sessions

  • Championed and reinforced Agile principles and frameworks throughout the development process

  • Promoted a safe environment for team members to express ideas, ask questions, and voice concerns constructively.

  • Fostered continuous improvement by guiding the team to self-reflect, identify and improve.

  • Coached employees and stakeholders on Scrumban fundamentals

  • Identified and implementing agile metrics to measure success (lead & cycle times)

As a Product Owner

  • Presented concepts, documents, and program information to key stakeholders

  • Acted as an internal quality control check for all phases of the development process

  • Provided user experience and technical development oversight

  • Identified, communicated, mitigated risks, assumptions, Issues, and decisions throughout the program

  • Defined detailed functional specifications for feature sets

  • Reviewed features for testing and validation during the life of the development

Design Strategist / UX Lead

  • Collaborated with cross-functional leaders to determine which research activities for the program

  • Lead user testing and interviews to validate designs with end-user

  • Guided the design process from framing the problem, synthesizing insights, and ideating creative solutions using design sprints

  • Used Lean UX to translate insights and strategy into concept prototypes to communicate the stakeholders

  • Conducted exercises at all stages from discovery to validation, using a variety of methods to understand customer needs and define opportunities

Platform Roadmap

The roadmap is built on an evolution of technologies along with coaching and guiding the team in learning and adapting to current trends in user experience, agile development, and lean methodologies.

  • donateNYC 1.0 Web / Admin

    • 3 Tier Architecture

    • (Responsive Design)

    • JQuery

    • FireBase

    • RESTful service layers

  • donateNYC 1.0 Mobile

    • Native iOS App

    • Native Android App

  • donateNYC 1.5

    • JQuery

    • Google Maps

    • RESTful service layers

  • donateNYC 2.0 Web / Admin

    • 4 Tier Engagement Platform

    • (Progressive Web App)

    • (Single Page Application)

    • react.js

    • CMS - API  Word Press

    • .net core

    • Docker

    • Linux Containers

    • Mirco Services

  • donateNYC 2.0 Mobile

    • Native iOS App

    • Native Android App

donatenyc_roadmap.png

DESIGN STRATEGY

User Experience

Lean UX

During the initial phases project charter, it was determined that user experience was going to be a critical component in the development of the platform.  In our adoption of Lean UX, the closed-loop “Hypothesis” >> “Collaborative Design” >> “Building Minimum Viable Product” >> “Evaluate” approach has uncovered potential valuable features and costly implementations.

Rotato Snapshot 14.png

On-Demand Notification 

Messaging client rapidly notifies the best-match recipients through email, text messages, web and app-based notifications. Every potential recipient has 30 mins to respond to the perishable food donations before it offers to the next recipient in the queue. Timing and user participation are of the utmost importance. 

By using the Lean UX process the collaborative team determined the best frequency of notifications for the best possible experience for the user.

Multiple Locations and Multiple Users

Each business organization entity will be able to have multiple locations, and multiple users accounts with differentiating roles within the business organization. All users can be assigned to one or more locations to receive notifications about donations nearby.

After several iterations of testing, this feature set in a closed-loop nature of Lean UX uncovered the need for organization entities to have numerous locations while being able to assign users to multiple locations.

Matching Donations

A curated matching algorithm is the central heart of the system, also the most complex taking into account the location, rating, status, and preferences of each organization. The matching algorithm takes into account response time, messages sent and viewed regarding the donation.

Lean UX’s hypothesis approach became very valuable during the iterative development of the matching system, starting with the unknowing design upfront. The team had to focus on creating the matching feature on an incremental basis.

Rotato Snapshot 16.png

Seamless Mobile Experience

Single mobile app for both non-authenticated resident users and authenticated businesses users. One singular experience on mobile and web.

The rapid iteration process of Lean UX allows for the creation of many hypothetical designs to test and validate during the process of development.

UX Feasibility and Importance

Being able to see the bigger picture and vision for the product will drive better coordination and understanding of the creation of the product. During the mind mapping process, this assesses the practicality, feasibility, and importance of each feature that is presented.

IMG_0015bw.png

40-40-20 Rule

Discussion of every feature sets based on the 40-40-20 rule. The rule states 40% are absolute requirements, 40% are not mandatory but the high priority and 20% are nice to have. Breaking down of modules in their values allows for the assignment of story points for its iterative deliverables while keeping agile in mind.

IMG_2862_feature sets_overlap.png

UX Research

In this brainstorming session, we deep dive into major feature sets to determine the target audience, feasibility, and validity of each component related to Journey maps for the user persona.

IMG_8973.png

User Persona

Identifying key user persona types for potential users is critical in planning out the experience. Multiple different persona types were created to simulate potential use cases for the platform.

Storyboards & Wireframes

The cross-functional team went through a series of storyboards, on how a potential user will normally use the system during the normal conditions of interaction. These concepts are based on user persona, journey maps, and best practice standards.

Donate Surplus Goods

In the surplus goods donation module, the team was directed to create a more seamless experience for the user. Below is a decision tree and storyboard of a simpler process to expedite the posting for the user.

 
Surplus goods decision tree

Surplus goods decision tree

Streamlined surplus goods posting

Streamlined surplus goods posting

Donate Food

Below is the decision tree each food donation goes through after a potential recipient match has been made through the matching algorithm.

 
Donate Food decision tree

Donate Food decision tree

Streamline new food donation posting

Streamline new food donation posting

User Registration

The goal of keeping the user engaged with a simpler and quicker registration.

User registration decision tree

User registration decision tree

Streamlined user registration

Streamlined user registration

UI Designs

Over 500+ high fidelity user interfaces were created between a team of designers, including responsive design, tablet,  mobile app, and design specs.

Web User Interface

Mobile Responsive (Tablet Viewport) User Interface

Mobile Responsive (Phone Viewport) User Interface

Administrator Dashboard User Interface

Native iOS User Interface

Native Android User Interface

gray.png

ENTERPRISE ARCHITECTURE

donateNYC platform is the first system of its kind to be developed within the City of New York’s agencies, to be completely modular and scalable. Using a service-oriented architecture will allow for continuous delivery and deployment of incremental features.

Scalable Solution

donateNYC is a client-server architecture which is based on a four-tier engagement platform.  This platform allows for flexibility in the consumption and dynamic composition of services.

  • A client tier allows for engagement of unique services based on the presentation of the client on the web, mobile clients, and stand-alone.

  • The delivery tier optimizes and contextually deliver content based on intelligence from the client layer.

  • An aggregation tier is the service layer providing discoverability between requests/services and bidirectional translation for client and back-end requests.

  • A service tier connects to external third-party service

microservices.png
 
word cloud donatenyc.png

Technical Stack

donateNYC is a progressive web application (PWA), and single page application(SPA). Data is driven by micro services, and external CRM

Using Scrumban the development team, fully took advantage of the collaborative nature of agile and the continuous flow of development and deployment.

The implementation of Docker in Rancher 2 environment in unix containers, and the inclusion of DEVOPS using Jenkins and continuous deployment.

DevOps

Bridging the gap between development projects and operations.  The inclusion of DevOps into our team allowed senior developers to focus on the creation of services rather than troubleshooting the installation of docker containers and server setup.  Containerization, continuous integration/continuous development (CI/CD), and the experience of server operations allowed the team to be more optimal in each role.

CONCLUSION

Observations

Local Law 176 states: “ … create and maintain a web portal that will allow prospective food donors and recipients …”

Department of Sanitation (DSNY) is required to completely build out a web solution to facilitate food donations within the City of New York.

donateNYC platform was truly an endeavor on a grand scale. The project was budgeted for slightly less than a million dollars, after six months of negotiations with the Office of Budgeting. The development team ran into a few snags and bumps trying to learn new technology, frameworks, syntax, and all the while training, interns. We introduced a new Lean UX methodology and the move from scrum-based sprints to scrumban continuous flow. Through it all, the team was high performing in key metrics, Lead and cycle times, delivered on time, and under budget.

Results

All in total 7 different User Experiences are delivered, that spans over 4 products that include Web, iOS, Android and stand-alone kiosk.

donateNYC Web

Dynamic Single Page Application, that delivers on-demand client-side consumption of services. For general public use.

Desktop / Tablet / Mobile Views

Rotato Snapshot 18.png
Rotato Snapshot 20.png
 

donateNYC Mobile Applications

Native iOS and Android Application, that delivers on-demand client-side consumption of services. For general public use.

iOS / Android

 

donateNYC Dashboard

Dynamic Single Page Application, that delivers on-demand client-side consumption of services. For internal managing of content, transactions, and users.

Desktop / Tablet Views

gray2.png