All intellectual property presented in this portfolio case is owned by Sift.com.

**Role:** product designer

**Team:** me, frontend engineer, design team (workshops and feedback sessions), main product PM

**Timeline:** 3 months to pilot in Sketch, 1 year to 15 components in Figma and 10 developed and tested components, still being designed and developed

## **1. UI inventory and roadmap**

First things first. I've spent several weeks poking around to better understand how the product work, how design is being done, how handoff looks and how it gets coded.

I've come up with a set of crucial components in prioritized view, based on usage frequency and potential usage on products' roadmaps.

**Current components list and pipeline view**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FSvc7ykDmeSTK3JAiHZk5Y56XIGC2%2Fvd7HcTn8DucYrgxabFuD%2Fefd17daf-dd26-44e7-83ed-41a995007037.png?alt=media&token=09cd70ac-86ff-4c2f-828c-753b24da1198","id":"efd17daf-dd26-44e7-83ed-41a995007037","width":990,"height":1396,"filename":"1.png","type":"image/png","caption":"","border":false}]}
```

I've also spent some time researching how the system works and what entities we have that can be componentized in UI.

**This usually looks like this and most components like this fall into organisms group:**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FSvc7ykDmeSTK3JAiHZk5Y56XIGC2%2Fvd7HcTn8DucYrgxabFuD%2Fa1461c09-c549-4ea6-bc83-4ad2ea7aeb47.png?alt=media&token=148be677-c314-43df-bfc8-ec53f7c5e47b","id":"a1461c09-c549-4ea6-bc83-4ad2ea7aeb47","width":1410,"height":1588,"filename":"2.png","type":"image/png","caption":"","border":false}]}
```

For example, **team members** from this scheme turned into **people selector** component later.

**Team members** from this scheme turned into **people selector** component later.

## **~~Atomic~~ approach**

I'm usually sceptic about giving too much attention to atomic approach, but it's the only suitable analogy to address some basic principles for building design systems:

1. Components should be as reusable as possible to prevent overwhelming complexity in future (atoms)

2. Complex components should be built reusing smaller ones (molecules)

3. There should be a shared library of not only generic components, but the ones that have business logic behind them (organisms)

**This leads to my approach to naming what is what:**

**Atom** — anything that can be coded with a single html tag (in most cases, there still are dozens of ways to overengineer things).

**Molecule** — any *generic* component that is built with atoms.

**Organism** — any component that is built based on business logic (decisions selector) or has any logic in it (search field).

According to Brad Frost, there is no only right way to categorize components when using atomic approach. Each team should just sync on what makes the most sense for them and stick to it. I've come up with this logic because it's clear to both engineering and design because everyone knows how HTML works.

## **2. Visual exploration**

After a month of visual explorations, a dozen of feedback meetings with product and marketing design teams, I’ve come up with several final visual concepts.

**Interim explorations**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FSvc7ykDmeSTK3JAiHZk5Y56XIGC2%2Fvd7HcTn8DucYrgxabFuD%2F22201964-586d-4341-894f-0ff729103849.png?alt=media&token=548e7b30-bc9f-457a-9917-388979504f09","id":"22201964-586d-4341-894f-0ff729103849","width":4320,"height":4320,"filename":"3.png","type":"image/png","caption":"","border":false}]}
```

👇👇👇

**Final design concepts**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FSvc7ykDmeSTK3JAiHZk5Y56XIGC2%2Fvd7HcTn8DucYrgxabFuD%2Fed313f8c-616b-4153-8913-d34b386fdafd.png?alt=media&token=66e81271-c82c-477c-8758-3d8672fa6c08","id":"ed313f8c-616b-4153-8913-d34b386fdafd","width":4320,"height":4320,"filename":"4.png","type":"image/png","caption":"","border":false}]}
```

## 3. Design principles

I’ve run a design principles workshop to align on how we make design decisions and how to approach tradeoffs.

**Design principles workshop**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FSvc7ykDmeSTK3JAiHZk5Y56XIGC2%2Fvd7HcTn8DucYrgxabFuD%2Ffb0f7423-01c6-4bf6-b323-e890f8aedbd1.png?alt=media&token=6268cfc1-13fe-4eaf-b283-2d87f598719e","id":"fb0f7423-01c6-4bf6-b323-e890f8aedbd1","width":2280,"height":1098,"filename":"5.png","type":"image/png","caption":"","border":false}]}
```

We’ve come up with these design principles:

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FSvc7ykDmeSTK3JAiHZk5Y56XIGC2%2Fvd7HcTn8DucYrgxabFuD%2F0449c669-8e7c-4d2e-89ea-9ab6048b1a80.png?alt=media&token=90e8fbf5-73af-4c43-9a49-c44da8d21e42","id":"0449c669-8e7c-4d2e-89ea-9ab6048b1a80","width":480,"height":560,"filename":"Principle 1.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FSvc7ykDmeSTK3JAiHZk5Y56XIGC2%2Fvd7HcTn8DucYrgxabFuD%2F82668f2d-518b-4330-a634-fb4df889f412.png?alt=media&token=e85bd0bf-d8d3-423e-b1f1-44fb96db966c","id":"82668f2d-518b-4330-a634-fb4df889f412","width":480,"height":560,"filename":"Principle 2.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FSvc7ykDmeSTK3JAiHZk5Y56XIGC2%2Fvd7HcTn8DucYrgxabFuD%2F21383393-e0d9-484c-ba32-c015710cf990.png?alt=media&token=ef5be28e-b61a-4fae-8b3e-85c5cba812ee","id":"21383393-e0d9-484c-ba32-c015710cf990","width":480,"height":560,"filename":"Principle 3.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FSvc7ykDmeSTK3JAiHZk5Y56XIGC2%2Fvd7HcTn8DucYrgxabFuD%2F1819c186-a064-4189-90c8-8de0a9566ccc.png?alt=media&token=6d0ebb34-ef0f-42fa-b2f8-d95f14cad70f","id":"1819c186-a064-4189-90c8-8de0a9566ccc","width":480,"height":560,"filename":"Principle 4.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FSvc7ykDmeSTK3JAiHZk5Y56XIGC2%2Fvd7HcTn8DucYrgxabFuD%2Fb96d1cd6-f65b-4314-ba59-26080c94ec3c.png?alt=media&token=1789ccc2-472f-4474-a4b6-4157fc64ce5d","id":"b96d1cd6-f65b-4314-ba59-26080c94ec3c","width":480,"height":560,"filename":"Principle 5.png","type":"image/png","caption":"","border":false}]}
```

## 4. Tokens

I have pretty straightforward approach to design tokens. They should be put in one of 3 buckets using this logic:

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FSvc7ykDmeSTK3JAiHZk5Y56XIGC2%2Fvd7HcTn8DucYrgxabFuD%2F157f5542-dd6c-4999-8afd-9cdba03a775b.png?alt=media&token=d97080ca-6187-4cb9-98b4-98f47c3dde2d","id":"157f5542-dd6c-4999-8afd-9cdba03a775b","width":760,"height":632,"filename":"11.png","type":"image/png","caption":"","border":false}]}
```

This leads us to storing 3 sets of variables in code and at least 2 in design library, but this way of structuring design tokens allows us control component’s design on any level. Also, we don’t need to make all the tokens shareable, for example, 1st level tokens were enough to built Sift’s website without going too deep into reusability, but still preserve new Sift’s visual identity.

**Sift’s token set**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FSvc7ykDmeSTK3JAiHZk5Y56XIGC2%2Fvd7HcTn8DucYrgxabFuD%2Fd702df6e-78c3-4bd1-ace0-9032529706b6.png?alt=media&token=dc800b73-3cb4-467c-9eae-c4c11a7641f0","id":"d702df6e-78c3-4bd1-ace0-9032529706b6","width":4320,"height":4320,"filename":"12.png","type":"image/png","caption":"","border":false}]}
```

## 5. Components

All the components were built using every feature Figma suggests: auto-layout, variants, properties.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FSvc7ykDmeSTK3JAiHZk5Y56XIGC2%2Fvd7HcTn8DucYrgxabFuD%2F94e46120-8de9-4580-9f72-536d6b79e6aa.png?alt=media&token=4e404ede-52b6-43ae-b65d-f021fa6cdaf2","id":"94e46120-8de9-4580-9f72-536d6b79e6aa","width":504,"height":602,"filename":"13.png","type":"image/png","caption":"","border":false}]}
```

My approach to component documentation:

1. Show properties

2. Animate

3. Teach

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FSvc7ykDmeSTK3JAiHZk5Y56XIGC2%2Fvd7HcTn8DucYrgxabFuD%2Fa1aa0e52-41e2-4a38-874a-a0a2d01356b9.png?alt=media&token=be18cba2-b879-4edc-bd32-9315c1c4d46a","id":"a1aa0e52-41e2-4a38-874a-a0a2d01356b9","width":4320,"height":4320,"filename":"14.png","type":"image/png","caption":"","border":false}]}
```

## 6. Code

We had regular meetings with engineering team to make sure all the components were coded right. We’ve set up the process of transferring and QA of the components using Chromatic+Storybook.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FSvc7ykDmeSTK3JAiHZk5Y56XIGC2%2Fvd7HcTn8DucYrgxabFuD%2F20ca04bf-0766-4a44-a9e1-715c8cda6836.png?alt=media&token=34889217-e018-4d72-93bc-c78ddb7fef77","id":"20ca04bf-0766-4a44-a9e1-715c8cda6836","width":3808,"height":2258,"filename":"15.png","type":"image/png","caption":"","border":false}]}
```

## 7. Documentation

All the materials are documented using Zeroheight to have the one and only source of truth for Product, Marketing and Engineering.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FSvc7ykDmeSTK3JAiHZk5Y56XIGC2%2Fvd7HcTn8DucYrgxabFuD%2Fb03d88e6-5ec7-4190-b033-a4889c66ae17.mp4?alt=media&token=f2792f85-c97c-4045-beeb-29d95e614a27","id":"b03d88e6-5ec7-4190-b033-a4889c66ae17","width":2092,"height":1080,"filename":"Untitled.mp4","type":"video/mp4","caption":"","border":false}]}
```

## 8. Results

> ✏️ After launching Focus design system pilot, team of 4 Product Designers redesigned the whole product during Console 2.0 initiative.
>
> 🖥️ [Sift.com](http://Sift.com) website was redesigned by Marketing team using tokens from Focus.
>
> 👨‍💻 Sift’s engineering team established rules and processes around frontend. They’ve never needed to sync on right component or styles usage.
>
> 🚀 Focus design system is still being developed and evolving into organization-wide tool that is used not only by designer and engineers.

## 9. What's next?

We've set up a process that helps any designer or developer contribute to the design system. It includes components database, dashboards, and request forms.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FSvc7ykDmeSTK3JAiHZk5Y56XIGC2%2Fvd7HcTn8DucYrgxabFuD%2F04bfc436-034b-4439-954f-70f559351a88.png?alt=media&token=bb3ea5d2-f124-4d90-a45f-ac6605b72fbc","id":"04bfc436-034b-4439-954f-70f559351a88","width":3584,"height":1648,"filename":"Screenshot 2023-02-07 at 14.57.07.png","type":"image/png","caption":"","border":false}]}
```

Focus Design System

**Role:** product designer

**Team:** me, design manager

**Timeline:** 1 month from onboarding to company owners presentation and developers handoff

## Goal

> Create an omnichannel approach to tracking parcels that is widespread among users, since tracking in implementation is not clear in the wording of texts and looks different in different channels.

## Problem

> 30% of calls to the call center are related to the location of the parcel, and 47% of site users come to the site to track a parcel. This is the most requested feature of all the company's digital products.

## User Research

1. **Analytical report analysis**

   Report with the results of the study on the calls reasons to the call center (analytics department).

2. **UX audit of current tracking**

   Evaluation of current tracking problems

3. **Qualitative and quantitative research**

   In-depth interviews with site and app users who had tracking issues (45 respondents).

   Survey on the main page of the website to find out how users understand the current statuses (1732 respondents)

### 1. Analytical report

What exactly are they asking about?

1. Is the parcel available for pickup

2. The sender specifies whether the recipient has taken the package (because the statuses are displayed with a delay, and the recipient says that he took it)

3. Clarify what the status "Cargo in the city of the recipient" means

4. When to expect a courier

5. Will the package be delivered by courier today

6. Clarify the status of the forwarded package

7. Want to get a more accurate status

8. Clarify additional information about the package

### 2. UX audit of current tracking system

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FSvc7ykDmeSTK3JAiHZk5Y56XIGC2%2Fvzv7fV9a5Zb3VfNu9JVk%2F6ca1b3c7-1997-42b5-a4ce-5c458eb577b8.png?alt=media&token=9b553bd6-9589-49c8-9ad1-6b0cbf2458cb","id":"6ca1b3c7-1997-42b5-a4ce-5c458eb577b8","width":1670,"height":1170,"filename":"Screenshot 2022-11-05 at 14.02.00.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FSvc7ykDmeSTK3JAiHZk5Y56XIGC2%2Fvzv7fV9a5Zb3VfNu9JVk%2F392099da-44bd-459e-a48a-9662bae115b2.png?alt=media&token=9df4e9d3-aac4-4da0-b046-26318f694cb0","id":"392099da-44bd-459e-a48a-9662bae115b2","width":1744,"height":1246,"filename":"Screenshot 2022-11-05 at 14.02.15.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FSvc7ykDmeSTK3JAiHZk5Y56XIGC2%2Fvzv7fV9a5Zb3VfNu9JVk%2F9b279c53-4bed-4ad3-b8b7-c94cfb3a3de6.png?alt=media&token=b98522c9-846a-4c72-bf49-a5c1ada5b23a","id":"9b279c53-4bed-4ad3-b8b7-c94cfb3a3de6","width":1044,"height":1570,"filename":"Screenshot 2022-11-05 at 14.04.10.png","type":"image/png","caption":"","border":false}]}
```

1. **No visual hierarchy**

   It is difficult for users to quickly find out the status and understand what information is located where

2. **Difficult to understand and unstructured texts**

   Not all users clearly understand the meaning of statuses.

3. **Main button at the bottom of the page**

   Outside of the first screen, it's hard to find the "Know" button.

4. **Differs too much in different products**

   Texts and visual display of statuses are different at all points of contact with the user.

5. **Non-adaptive website tracking**

   50% of site users access from mobile devices, you can read the information, but entering data into the fields is very difficult

### 3. Qualitative and quantitative research

**In-Depth Interviews**

To better understand the context of tracking usage, find edge cases and understand why a bad tracking experience makes users call the call center, we conducted 45 in-depth interviews with users who actively (1-5 times / month) use tracking on the site and in the app.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FSvc7ykDmeSTK3JAiHZk5Y56XIGC2%2Fvzv7fV9a5Zb3VfNu9JVk%2F13543345-c9e4-4971-acdd-f3f1257e1f70.png?alt=media&token=2c8f004c-bfd4-47cc-bdd5-0b4a0102652a","id":"13543345-c9e4-4971-acdd-f3f1257e1f70","width":1762,"height":788,"filename":"Screenshot 2022-11-05 at 14.08.44.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FSvc7ykDmeSTK3JAiHZk5Y56XIGC2%2Fvzv7fV9a5Zb3VfNu9JVk%2F998a4b2a-42dc-4e72-b78c-36231383ce70.png?alt=media&token=1400a5c9-7b6d-4315-9f68-19f0688e5074","id":"998a4b2a-42dc-4e72-b78c-36231383ce70","width":1762,"height":788,"filename":"Screenshot 2022-11-05 at 14.08.48.png","type":"image/png","caption":"","border":false}]}
```

**Survey**

We realized that the main problem with statuses is in understanding texts, they are perceived differently by different people.

To better understand how statuses are understood, we launched a questionnaire on the site. (1732 respondents)

**How current statuses are understood**

"Getting ready to be sent to the city of receiver" — misunderstood by 40%

"Parcel is in the receiver's city" — misunderstood by 33%

"Parcel is now in the receiver's branch" — misunderstood by 10%

## Competitors Research

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FSvc7ykDmeSTK3JAiHZk5Y56XIGC2%2Fvzv7fV9a5Zb3VfNu9JVk%2F3964fbc3-8fd2-4d0c-ac41-4dedfaf5b14b.png?alt=media&token=7cdfd1c2-bdf6-4e41-8857-8ab0f5944d1e","id":"3964fbc3-8fd2-4d0c-ac41-4dedfaf5b14b","width":1938,"height":1116,"filename":"Screenshot 2022-11-05 at 14.13.05.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FSvc7ykDmeSTK3JAiHZk5Y56XIGC2%2Fvzv7fV9a5Zb3VfNu9JVk%2Fbebf98a3-9a45-41ee-ac07-e9048be73c89.png?alt=media&token=5446de35-d59f-4ac3-b1c5-0004c5bcac40","id":"bebf98a3-9a45-41ee-ac07-e9048be73c89","width":1938,"height":1116,"filename":"Screenshot 2022-11-05 at 14.13.08.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FSvc7ykDmeSTK3JAiHZk5Y56XIGC2%2Fvzv7fV9a5Zb3VfNu9JVk%2F986e40fa-0ab3-4307-b5a4-e4932bb1f258.png?alt=media&token=d1db9724-6efa-477c-8d62-9dcac55ace31","id":"986e40fa-0ab3-4307-b5a4-e4932bb1f258","width":1938,"height":1116,"filename":"Screenshot 2022-11-05 at 14.13.11.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FSvc7ykDmeSTK3JAiHZk5Y56XIGC2%2Fvzv7fV9a5Zb3VfNu9JVk%2F75f34979-89ef-49b7-a236-004d2c400b9d.png?alt=media&token=6a1a7754-2a8c-4b8c-ac57-cfde1e400ce8","id":"75f34979-89ef-49b7-a236-004d2c400b9d","width":1938,"height":1116,"filename":"Screenshot 2022-11-05 at 14.13.14.png","type":"image/png","caption":"","border":false}]}
```

## Research Results

1. Texts should be unambiguous, understandable to both end users and business representatives, more detailed in order to reduce the waiting time for a status change and give a sense of control

2. The information on the page should be clearly structured: first, the important - the status of the package and what needs to be done - information about the package - actions with the package

3. It is important to give users visual status anchors - colors and icons, so that in the first seconds of looking at the page it is clear what the status of the package is.

4. In order to easily and systematically work with edge-cases and increase the consistency of the tracking system, we propose to introduce the concept of "Linked parcels", where to display other "units" of parcels, redirects, returns.

## Solution

### Status text structure

Main status - describes at what stage the parcel is being prepared (prepared for delivery, in transit, at delivery / seen by the courier).

Title - describes at what stage the parcel is within the main status (if it is on the road, then where exactly).

Subtitle - additional information and possible actions.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FSvc7ykDmeSTK3JAiHZk5Y56XIGC2%2Fvzv7fV9a5Zb3VfNu9JVk%2Fd2c2eda6-d490-43fb-8888-cbd75e80d4a6.png?alt=media&token=333ddbd2-06eb-4674-a644-a7ca8f79346e","id":"d2c2eda6-d490-43fb-8888-cbd75e80d4a6","width":2586,"height":378,"filename":"Screenshot 2022-11-05 at 14.17.33.png","type":"image/png","caption":"","border":false}]}
```

### Visual status structure

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FSvc7ykDmeSTK3JAiHZk5Y56XIGC2%2Fvzv7fV9a5Zb3VfNu9JVk%2F82b94b00-ac30-496c-a294-48334e8b6f2c.png?alt=media&token=df8f6efa-1de6-4bc5-9541-4c05bd9e90db","id":"82b94b00-ac30-496c-a294-48334e8b6f2c","width":3757,"height":1679,"filename":"Frame 1.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FSvc7ykDmeSTK3JAiHZk5Y56XIGC2%2Fvzv7fV9a5Zb3VfNu9JVk%2F6f422268-a914-4015-8c87-8a55cdce08b3.png?alt=media&token=3f08f3a6-f649-493b-869f-ced5b5eaf17e","id":"6f422268-a914-4015-8c87-8a55cdce08b3","width":1694,"height":1408,"filename":"Screenshot 2022-11-05 at 14.23.54.png","type":"image/png","caption":"","border":false}]}
```

### Corner cases

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FSvc7ykDmeSTK3JAiHZk5Y56XIGC2%2Fvzv7fV9a5Zb3VfNu9JVk%2Fa8e2bad8-8bc6-4317-a8ab-b4a9098488d3.png?alt=media&token=c65e7fed-71a9-436a-a342-9a503ee6d249","id":"a8e2bad8-8bc6-4317-a8ab-b4a9098488d3","width":1952,"height":1342,"filename":"Screenshot 2022-11-05 at 14.25.18.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FSvc7ykDmeSTK3JAiHZk5Y56XIGC2%2Fvzv7fV9a5Zb3VfNu9JVk%2Fa736ccc3-a5c3-478d-9d25-2acffe24c820.png?alt=media&token=20994372-77e2-440a-beb1-d10073d3f51d","id":"a736ccc3-a5c3-478d-9d25-2acffe24c820","width":1952,"height":1342,"filename":"Screenshot 2022-11-05 at 14.25.20.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FSvc7ykDmeSTK3JAiHZk5Y56XIGC2%2Fvzv7fV9a5Zb3VfNu9JVk%2F5fc27251-f20b-4558-aa96-2311d89f7316.png?alt=media&token=07e5afba-cdb1-423c-8860-934556f8d585","id":"5fc27251-f20b-4558-aa96-2311d89f7316","width":1952,"height":1342,"filename":"Screenshot 2022-11-05 at 14.25.23.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FSvc7ykDmeSTK3JAiHZk5Y56XIGC2%2Fvzv7fV9a5Zb3VfNu9JVk%2F8c3e5669-20f1-4a28-8b3b-4cdf3ce08d32.png?alt=media&token=c71c139e-d7ac-4afc-a485-20e99c21dee2","id":"8c3e5669-20f1-4a28-8b3b-4cdf3ce08d32","width":1952,"height":1342,"filename":"Screenshot 2022-11-05 at 14.25.26.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FSvc7ykDmeSTK3JAiHZk5Y56XIGC2%2Fvzv7fV9a5Zb3VfNu9JVk%2F1204bcbf-57da-47c7-bcf2-c78e4b7b1651.png?alt=media&token=3d7e7024-0429-4d2d-86f3-a3d4f2b3c7d5","id":"1204bcbf-57da-47c7-bcf2-c78e4b7b1651","width":1952,"height":1342,"filename":"Screenshot 2022-11-05 at 14.25.28.png","type":"image/png","caption":"","border":false}]}
```

### Bonus: find your parcel on map concept

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FSvc7ykDmeSTK3JAiHZk5Y56XIGC2%2Fvzv7fV9a5Zb3VfNu9JVk%2F63ece436-6712-47cc-9234-823804912f85.mp4?alt=media&token=b5a84110-ad8a-4051-b4f0-7ab1fe5a8489","id":"63ece436-6712-47cc-9234-823804912f85","width":1921,"height":1080,"filename":"Untitled.mp4","type":"video/mp4","caption":"","border":false}]}
```

## Results

> 🚦 We got buy-in and budgeting from owners and board of directors
>
> 👨🏻‍💻 Mapped statuses to be ready for engineering handoff
>
> 🚀 Launched MVP for website and mobile app
>
> 📈 Call center parcel tracking calls dropped 30% ➡️ 25%, website tracking page adoption increased

Ivan Dankov

2022