Our office‘s Enterprise Data Solutions team asked for support to design IntelliMatch, A tool that lets city agencies match data sets with each other and our offices Common Client Index. The tool currently exists as a Java applet. Our Data team is working with a vendor to evolve the backend functionality and develop this into a web app. I am leading the design work for an improved front-end user experience and UI.

Stakeholder Interview

I conducted stakeholder interviews with the project manager and back-end developer to get clarities on the scope of the project, technical details of each function and edge cases.

Output1: Service Blueprint
I worked with the Design Lead to map the relationship between backend processes and user actions on the front-end. A lot of the “work” in these products is done behind the scenes, with users actually having very few actions they can take within the tool. That meant we had to make sure that we were tying each user action with the correct backend processes, and providing the right amount of information and feedback for users so they could follow what was happening without feeling overwhelmed with server-side jargon.

Output2: File Transition Flow
By mapping out the back-end of the product, I was able to further understand both the service provider (Enterprise Data Solutions team) and user’s point of view. Therefore I could bride these two, to create a smooth journey for both parts.

1. Sketches and quick iterations

I created a series of sketches/lo-fi wireframes to show a few design directions. By presenting this progress work to stakeholders and users, I got feedback quickly thus was able to do fast iterations and improvements.

2. Branding & Design System

I facilitated a discussion with the business team and project leaders to understand the characteristics of the product. The 3 major themes evolved are accessible, smart, and helpful. Began from here, I explored and defined the look and feel of the product and documented it in the design system.

Design Iterations

(Click to zoom in)

3. An Expansion of Pattern Library

Our office has an open-source design pattern library, which was only used for our official website. Facilitated by the design lead, I worked with the front-end developer to adapt and evolve this pattern library for IntelliMatch and the entire Equity Data Portal, where the IntelliMatch sits.

1. Screens, User Flows and Events

I created detailed documentation of screens, user flows with major back-end events, to help front-end and back-end developers better connect pieces together.

2. Detailed Instructions on Design Pattern Implementation

An external vendor was in charge of the front-end development of the product by applying the design system of our organization. The vendor didn't have previous experience using design system nor had strong capacity in front-end development. To make sure they adapt this new way of development smoothly and be able to create customized components on their own. I created a detailed documentation of all the components and corresponding elements in the design system. For customized components, I broken them down into pieces and marked individually.

3. Code-level QA with Engineers

I inspected elements in the browser, tweaked code to achieve the ideal design outcomes and communicate necessary changes to the front-end engineers with screenshots and instructions.