## **Gorgias Chat in customers' websites**

As of January 2024

Gorgias Chat Redesign

## **Design Sprint**

### **Setting the stage**

To prepare for the design sprint, we gathered to define a schedule and team, which was composed by me as the designer and co-facilitator, a facilitator, a front-end engineer, a back-end engineer and a product manager.\
\
The big challenge was to enable our users to **track planned routes and deliveries in real time**.\
\
With the challenge in mind, we raised questions we needed answers to and outlined technical constraints, which would guide our expert interviews and help us define the problem and pick a target to work on.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FaVNe1Q2XESbnW3pLkkQGnlShSom2%2FQ63n0Y33gvrt4eCJGe37%2F34d5f880-5fa4-45aa-9d2a-82da7b244818.png?alt=media&token=5b4ab5fe-be39-43aa-bbd1-84330d960960","id":"34d5f880-5fa4-45aa-9d2a-82da7b244818","width":1640,"height":2200,"filename":"set-the-stage.png","type":"image/png","caption":"","border":false}]}
```

### **User journey**

By conducting lightning talks with stakeholders (Cobli's sales consultants, customer success managers and product managers) we aimed to gain insight on what were the our users' needs and the challenges they met to map the user journey, which turned out like this:

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FaVNe1Q2XESbnW3pLkkQGnlShSom2%2FQ63n0Y33gvrt4eCJGe37%2Fc19496db-9a61-44fb-9518-97abc5bfc566.png?alt=media&token=51cf2d96-d06a-4045-90b0-45bb09b32afb","id":"c19496db-9a61-44fb-9518-97abc5bfc566","width":3596,"height":1622,"filename":"user-journey.png","type":"image/png","caption":"","border":false}]}
```

### **Discovery**

Since we wouldn't be able to have users coming over for lightning talks due to their busy schedules, we ran a quick discovery process, in which I was responsible for conducting user interviews while my teammates would gather industry and analogous benchmarks and user feedback from Product Board.

#### **User interviews**

I focused mainly on discovering how users currently planned and tracked routes and deliveries and the problems they faced in these processes.

Some of the guiding questions were:

1. Could you tell me about the logistical process you go through, step by step, from receiving a new order to it being delivered?

2. While routes are being executed during the day, what are the activities/tasks you do to track them and guarantee deliveries are being made in time?

3. What are the main problems you face while tracking planned routes?

Below are the key findings from the interviews:

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FaVNe1Q2XESbnW3pLkkQGnlShSom2%2FQ63n0Y33gvrt4eCJGe37%2Fdecbc0f5-8fb7-4efb-9a26-5fa833e0d6f6.png?alt=media&token=9e49bb5a-839d-44ff-b0d6-780d661e95bf","id":"decbc0f5-8fb7-4efb-9a26-5fa833e0d6f6","width":2639,"height":1714,"filename":"insights.png","type":"image/png","caption":"","border":false}]}
```

### **Problem & target**

From the user journey and insights, we were able to pinpoint our targets:

1. How might we show in detail which deliveries were made and which ones were still pending?

2. How might we make it easier for fleet managers to check the whole fleet route progress?

> * **No visibility of delivery status**
>
> * **Needs to check vehicle's trip by trip to get an idea of route completion**

### **Solution**

We then sketched multiple solutions and created storyboards to vote and decide which ones would make it to the prototype.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FaVNe1Q2XESbnW3pLkkQGnlShSom2%2FQ63n0Y33gvrt4eCJGe37%2F2eb800c9-bd20-482f-8e47-ed0571562080.png?alt=media&token=9a7c6f75-8e05-4505-ae27-e22fcb395ed7","id":"2eb800c9-bd20-482f-8e47-ed0571562080","width":2000,"height":1640,"filename":"remix-sketch.png","type":"image/png","caption":"","border":false}]}
```

There were two technical constraints: (1) we couldn't depend on driver input to update delivery status since the driver app adoption and engagement were very low at the moment and this could limit the potential value of the solution and (2) routes needed to have drivers assigned to them so we could track progress, as temporary geofences would be created and delivery status would be updated when the vehicle entered them.\
\
We then decided the prototype would contemplate:

* Displaying an overall route progress on the Monitoring tab (product's most used feature)

* A section to show each route's progress and delivery status

* Showing individual vehicle's route progress

Below are the prototype key interfaces:

*Note: the first prototype screen was designed by Nathalia and we paired on the second. Third and fourth were designed by me.*

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FaVNe1Q2XESbnW3pLkkQGnlShSom2%2FQ63n0Y33gvrt4eCJGe37%2F132b8a73-9f14-4799-95d7-17aee1784fdb.png?alt=media&token=a10b7261-2039-4fe6-b07f-583c1e6a791d","id":"132b8a73-9f14-4799-95d7-17aee1784fdb","width":3080,"height":2248,"filename":"prototype-monitoring.png","type":"image/png","caption":"Card displaying overall route progress on monitoring tab","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FaVNe1Q2XESbnW3pLkkQGnlShSom2%2FQ63n0Y33gvrt4eCJGe37%2F7f169af2-e141-4d59-b590-a021d7e3c577.png?alt=media&token=8923bc4c-f56c-47b9-9478-b06ed9a2cc09","id":"7f169af2-e141-4d59-b590-a021d7e3c577","width":3080,"height":2248,"filename":"prototype-monitoring-track.png","type":"image/png","caption":"Individual vehicle progress shown on map","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FaVNe1Q2XESbnW3pLkkQGnlShSom2%2FQ63n0Y33gvrt4eCJGe37%2Fc496aac0-8b9c-473e-8851-0c1d828413eb.png?alt=media&token=d6da08f3-376f-47aa-803b-bbd0d65d6f80","id":"c496aac0-8b9c-473e-8851-0c1d828413eb","width":3080,"height":2248,"filename":"prototype-track-routes.png","type":"image/png","caption":"Track routes tab, showing every route planned for the day and","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FaVNe1Q2XESbnW3pLkkQGnlShSom2%2FQ63n0Y33gvrt4eCJGe37%2F30020657-b808-4a8e-a234-4d98fda54c65.png?alt=media&token=3bcc0182-e6ec-42b1-a92d-c9653476645e","id":"30020657-b808-4a8e-a234-4d98fda54c65","width":3080,"height":2248,"filename":"prototype-track-routes-detail.png","type":"image/png","caption":"Route progress detail","border":false}]}
```

### **Usability tests**

Four usability tests were conducted with users, and the main takeaways were:

* Progress card on monitoring works when the fleet manager needs an overall route status update; Information should be clearer though

* Makes sense to find the track routes section inside the "Routes" menu and it's easy to find route details, but route information (estimated duration, mileage) is not relevant in this context

* All users tried to find the individual vehicle progress shown on map by going to the Trips feature instead of clicking the button "Acompanhar" (track) on the vehicle list.

From these insights, I refined the solution that went to production.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FaVNe1Q2XESbnW3pLkkQGnlShSom2%2FQ63n0Y33gvrt4eCJGe37%2Fe0270362-9d22-4c41-a57f-7f2b7e292c58.png?alt=media&token=a13bc8e9-cc76-4c03-b3c8-52a3af0eafbd","id":"e0270362-9d22-4c41-a57f-7f2b7e292c58","width":1580,"height":2324,"filename":"usability-test-takeaway.png","type":"image/png","caption":"","border":false}]}
```

### **Refined solution**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FaVNe1Q2XESbnW3pLkkQGnlShSom2%2FQ63n0Y33gvrt4eCJGe37%2F931242d9-7e6f-4a5e-8636-4700bf9592f2.png?alt=media&token=5a424af6-022e-40ef-8fbd-34e2a64a5305","id":"931242d9-7e6f-4a5e-8636-4700bf9592f2","width":2760,"height":2248,"filename":"ui-track-routes.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FaVNe1Q2XESbnW3pLkkQGnlShSom2%2FQ63n0Y33gvrt4eCJGe37%2Fd26ef53f-6d69-4820-8c9b-687ac362b8f7.png?alt=media&token=da7b8a25-1c2f-488f-a58c-7de431df5d2f","id":"d26ef53f-6d69-4820-8c9b-687ac362b8f7","width":2760,"height":2248,"filename":"ui-track-routes-row-hover.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FaVNe1Q2XESbnW3pLkkQGnlShSom2%2FQ63n0Y33gvrt4eCJGe37%2Fbb84b017-a5b7-4f41-844b-e96f6c014f0c.png?alt=media&token=5d33df2c-54e9-4b9e-8713-0568de5dacda","id":"bb84b017-a5b7-4f41-844b-e96f6c014f0c","width":2760,"height":2248,"filename":"ui-track-routes-details.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FaVNe1Q2XESbnW3pLkkQGnlShSom2%2FQ63n0Y33gvrt4eCJGe37%2F9460877d-87fb-4004-ab37-311fe1587100.png?alt=media&token=ce4d9c14-770d-4638-902b-ea505b8df9ca","id":"9460877d-87fb-4004-ab37-311fe1587100","width":2760,"height":2248,"filename":"ui-card-day.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FaVNe1Q2XESbnW3pLkkQGnlShSom2%2FQ63n0Y33gvrt4eCJGe37%2Fc6f17a50-96fc-4938-a35e-37e767fc44a5.png?alt=media&token=cb7075ad-6578-4560-b0f4-659186d8c90f","id":"c6f17a50-96fc-4938-a35e-37e767fc44a5","width":2760,"height":2248,"filename":"ui-card-night.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FaVNe1Q2XESbnW3pLkkQGnlShSom2%2FQ63n0Y33gvrt4eCJGe37%2F26730f74-570e-4d0f-87be-178126581834.png?alt=media&token=77b8e037-e5be-41d9-8ebd-aecf392eddd8","id":"26730f74-570e-4d0f-87be-178126581834","width":2760,"height":2248,"filename":"ui-card-completed-routes.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FaVNe1Q2XESbnW3pLkkQGnlShSom2%2FQ63n0Y33gvrt4eCJGe37%2Ff2dd5d28-9657-49c6-8e93-06836670f9aa.png?alt=media&token=abb6adb8-5905-49a6-bccf-ba20b9b1489b","id":"f2dd5d28-9657-49c6-8e93-06836670f9aa","width":2760,"height":2248,"filename":"ui-card-no-routes.png","type":"image/png","caption":"","border":false}]}
```

Route Tracking

## **Sign in flow enhancement**

### **Problem**

A common user feedback was that it was too cumbersome for drivers to sign in to the app, as the fleet manager had to generate an access code for each driver and share it with them, being too time consuming. The code expired after 2 weeks, so fleet managers would have to regularly repeat this whole process.Also, the code was a 6-character random sequence of letters and numbers, which was hard for drivers to remember, so they had to constantly check the message sent by the fleet manager to retrieve it. This was causing a drop in the app's adoption rates since the whole process took too much time and effort to simply to log in to the app.

> 1. **Too much time and effort to generate and share codes**
>
> 2. **Code was hard to remember**
>
> 3. **Repeat the whole process every two weeks**

### **Solution**

While revamping the sign in flow, I had to make sure the solution would contemplate three constraints:

1. Driver needs to be associated to the fleet in some way, for security reasons

2. Log in information must be easy to remember

3. Fleet manager must be able to remove a driver's access if needed

So the proposed enhanced flow would:

* Associate driver <> fleet through a mobile phone number

* Drivers would be able to set a password and log in with their phone numbers

* Fleet managers would be able to switch the access on or off

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FaVNe1Q2XESbnW3pLkkQGnlShSom2%2FVq78To9SlTFYcvn4gPrX%2F9db0887d-d24f-489a-9805-e607c2f98fbd.png?alt=media&token=dffc6e47-6222-4ab0-b1cf-6d375c19b7c6","id":"9db0887d-d24f-489a-9805-e607c2f98fbd","width":2880,"height":1400,"filename":"user-journey.png","type":"image/png","caption":"","border":true}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FaVNe1Q2XESbnW3pLkkQGnlShSom2%2FVq78To9SlTFYcvn4gPrX%2F4e24b85d-390b-4dac-92de-6edf698651cb.png?alt=media&token=7f556f4f-cc99-48af-a8ce-c33c43b047f0","id":"4e24b85d-390b-4dac-92de-6edf698651cb","width":2760,"height":2248,"filename":"1-drivers.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FaVNe1Q2XESbnW3pLkkQGnlShSom2%2FVq78To9SlTFYcvn4gPrX%2F31ae37f5-6bc0-442d-845c-6b648e21dbc0.png?alt=media&token=0fddaac6-ddb5-4b5f-a5ae-19f1a9834368","id":"31ae37f5-6bc0-442d-845c-6b648e21dbc0","width":2760,"height":2248,"filename":"2-new-driver.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FaVNe1Q2XESbnW3pLkkQGnlShSom2%2FVq78To9SlTFYcvn4gPrX%2F0ae2a1f8-64cc-4936-979f-2a62db2af500.png?alt=media&token=3184b986-7fc4-42aa-ac2b-8b04ad9bc1d1","id":"0ae2a1f8-64cc-4936-979f-2a62db2af500","width":2760,"height":2248,"filename":"3-access-granted.png","type":"image/png","caption":"","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FaVNe1Q2XESbnW3pLkkQGnlShSom2%2Fcobli-driver-app%2Fade5df7d-868e-4c39-a4e0-084715579770.png?alt=media&token=5276a0b5-e551-4f7c-a0a8-ceae613ac53d","id":"ade5df7d-868e-4c39-a4e0-084715579770","width":560,"height":1212,"filename":"1-phone.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FaVNe1Q2XESbnW3pLkkQGnlShSom2%2Fcobli-driver-app%2F8fde33f3-b0f4-4a5e-ac17-c9030609f10c.png?alt=media&token=2451d530-75b4-4009-ab2b-2a9d50d574b1","id":"8fde33f3-b0f4-4a5e-ac17-c9030609f10c","width":560,"height":1212,"filename":"2-code.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FaVNe1Q2XESbnW3pLkkQGnlShSom2%2Fcobli-driver-app%2F79f12a5b-c41a-43d8-93bb-b723f86a5a18.png?alt=media&token=b287631d-7656-40aa-9382-c1308db6bb5a","id":"79f12a5b-c41a-43d8-93bb-b723f86a5a18","width":560,"height":1212,"filename":"3-password.png","type":"image/png","caption":"","border":false}]}
```

---

## **Freemium tracking app**

### **Problem**

The service Cobli provides depends on a device (OBD) to get data from vehicles and transform them into information and insights available on the dashboard, a web application.\
\
Many leads asked for a free trial, which could only be offered to potential clients with over a determinate amount of vehicles because of the costs involved, mainly: device cost, shipping and the operations team work to send and retrieve (in case the lead didn't convert to customer) devices.\
\
As a way potentialize the go-to-market strategy, the company decided to develop a freemium product – so leads could easily test the web application without the costs and operations team overhead and vehicle's downtime caused by installing hardware.

> 1. **Free trial not available for every lead**
>
> 2. **Vehicle downtime due to hardware installation**
>
> 3. **Operational cost to provide free trial**

### **Solution**

The proposed freemium product was a Tracking App, which would track the vehicle position through a smartphone's GPS and limited features on the web dashboard. Users would be able to upgrade to the premium product and gain access to all product features.\
\
The MVP would be tested with a few lost leads (for budget or needs reasons) that would be contacted by the Customer Success team with an offer to test the freemium product and a private link to create an account and download the app.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FaVNe1Q2XESbnW3pLkkQGnlShSom2%2Fcobli-driver-app%2F0284884d-e1d0-4e52-9be3-3057ea1995bd.png?alt=media&token=1c9dea51-3407-4c68-8438-1d83759ee3a7","id":"0284884d-e1d0-4e52-9be3-3057ea1995bd","width":2880,"height":1328,"filename":"solution-flow.png","type":"image/png","caption":"","border":true}]}
```

On the web application end, we would show the premium features as "locked", with hint popups shown on hover briefly explaining the feature's purpose and value with a CTA to upgrade. The driver mobile app would serve only to activate and deactive tracking in the first release.\
\
This showcase presents the UI designed for the mobile app:

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FaVNe1Q2XESbnW3pLkkQGnlShSom2%2Fcobli-driver-app%2Ffb82cb6b-a1d8-412d-a492-52de52f8c4bd.png?alt=media&token=28e00a60-f04d-427b-89de-24e806d61305","id":"fb82cb6b-a1d8-412d-a492-52de52f8c4bd","width":560,"height":1212,"filename":"1.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FaVNe1Q2XESbnW3pLkkQGnlShSom2%2Fcobli-driver-app%2Fbfa6de5d-769b-4f1c-9015-4b1f6da7c0dd.png?alt=media&token=67a0e5c8-b3aa-4465-80b0-6b6d1b5ff16c","id":"bfa6de5d-769b-4f1c-9015-4b1f6da7c0dd","width":560,"height":1212,"filename":"2.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FaVNe1Q2XESbnW3pLkkQGnlShSom2%2Fcobli-driver-app%2F754c6dac-fc1b-448d-923b-944be446775f.png?alt=media&token=8ba91ee7-6a08-4374-b3d2-36adc704ec69","id":"754c6dac-fc1b-448d-923b-944be446775f","width":560,"height":1212,"filename":"3.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FaVNe1Q2XESbnW3pLkkQGnlShSom2%2Fcobli-driver-app%2F38fbdc6a-6372-4bfc-bb5a-0209faedf896.png?alt=media&token=f1369c0f-e6a0-47ce-b291-71b7006b214a","id":"38fbdc6a-6372-4bfc-bb5a-0209faedf896","width":560,"height":1212,"filename":"4.png","type":"image/png","caption":"","border":false}]}
```

These solutions were not shipped to production due to deprioritization of both projects.

Driver App

We're hiring @ Qonto! Check our open positions https://refer.hellotrusty.io/AmkvgZguPC

Expert Product Designer

Ongoing UX Certification from Nielsen Norman Group.

* Application Design for Web and Desktop
* Becoming a UX Strategist

Developing a route tracking feature had been a great challenge for Cobli for so long. It had been prioritized then deprioritized over and over again through the years, mostly due to technical constraints and for being a complex feature that would take a lot of time and effort to develop.

In Q1 2020, once again the time had come to reassess the viability of the feature. But this time, we approached it differently: through a design sprint.

Thanks to Nathalia Albar, Nicolau Tahan, Rafael Liziero and Rafael Melo – this design sprint dream team.

Shopper-facing visual redesign of Gorgias Chat, aiming to enable its growth and development based on 4 main drivers of the vision for this product: empower merchants to brand their chat and create a seamless experience with their website; enhance online shopping experiences by acting as a virtual assistant; optimized for mobile experience; chat is its own plug and play platform, allowing for 3rd-party integrations that cater to each merchant's needs.

Chat Redesign

The Driver App is a tool for drivers and field agents to communicate with fleet managers by updating which vehicle they're driving and receiving and following planned routes. Information shared by the driver is shown on the web dashboard fleet managers access.

This showcase presents an enhanced Sign In flow and a Freemium Tracking App home screen proposal.

Vanessa Yumi

Contact

Work Experience

Education

Projects