UX/UI mobile app, website Redesign Case Study
Tags: ux, design, ui, casestudy
Published: 2022-04-13 13:59:17

_This article was created by the UX/UI Designers Szymon Wiśniewski and Maria Krupskaya. Our UI/UX Designers are highly specialized in creating a unique user experience for any software. Seek the expertise of a [UI/UX design agency](https://profil-software.com/services/ui-ux-design-services/) and ensure the best quality of your product._

**About**

Tarot Routing uses state-of-the-art algorithms to plan more efficient last-mile driving routes faster than humans can.

**Customers reduce their driving time by 30% and, of course, reduce their CO2 emissions, petrol consumption, driver salaries, and maintenance costs.**

**Challenge**
Tarot Routing was in the MVP stage when **Profil Software**, an [outsourced development team](https://profil-software.com/blog/saas-build-and-grow/in-house-vs-outsourcing-software-development-teams-for-a-startup/), began working on it. They needed to develop substantial **new features** in order to create an offering sufficient for Enterprise clients. Additionally, as Tarot Routing’s user base increased, they needed to address platform resiliency and scalability more and more.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/60t6tupfc8hy4g1h8zxz.png)

**Solution**

Profil Software’s full-stack team has developed many substantial features in Tarot Routing, including** Map-Based Drag & Drop Route Adjustments, Websockets for real-time updates, Real-Time Driver Tracking, Cross-Platform Mobile App, and Frontend Unit Tests.**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ethj69gkvvnug7gsdtx5.png)

**UX Review**

The web service and the app Tarot Analytics lose the love of users, due to a myriad of reasons. **Along with the competition, one major factor for the losing users is a clumsy design.
**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gciqm2htuatb2r29pk9z.png)

- No trust through communication with the user
- Lack of connection with the real world
- No consistency within the product
- No error prevention whatsoever
- Ancient, inconsistent, hideous visuals
- Issues with compatibility and responsiveness


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/co6okpgnvruzmagq08dp.png)

**The goal was to deliver mobile-friendly, responsive design to create a seamless and attractive user experience across all devices.**

**Our Approach and process:**




**Context Study**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hyjrl4w1cbcmm4ehezpr.png)

Our client struggled with the outdated look and feel of his service. **Our task was to refresh the appearance and the experience.**
We had to remember about 2 user profiles — the drivers and the managing people. The drivers were supposed to use mainly the mobile application.

**Target Audience**
Using the results of the information given and the analysis, we created three personas that embody the traits of the target audience.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b01d54uz9uc199ddt8rp.png)

**Our workflow**

**Rebranding**
_Creating the Style Guide_

**The goal is to make people aware that our client updated his brand.**
We have developed a design system to establish the brand’s identity in the minds of users and product owners.



**2. Website redesign
Changing and updating the content, structure, format, and navigation of the service to improve performance.
**

_Timeline_


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zyf7ebxqw8znv05wa64g.png)

**This feature lets you Drag and Drop to reallocate or reorder your jobs.** Watch the map update automatically and see the impact on your ETAs. We made sure the user can choose their favorite timeline’s position.

_Tracking_

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o3pprvdcjzi0iwnlzroy.png)

**Tarot Analytics let its customers track the driver to the door, just like Uber.**
The customers also get real-time ETAs, and self-service PoD so they don’t have to call them 100x per day anymore.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/87yt6ufqn78h6py7n7nv.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/50i5hhorrvvmfluem6sk.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9u60rsdlxz8687eluqx4.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cbkexuj03txzcfb9y4zr.png)


**3. App Redesign
We applied all the rebranding decisions to keep the application up to date and make it look and feel fresh.**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1drlaunxo097p9lj9gi5.png)

**Themes**

_Light & Dark Mode_
The research carried out revealed **a frequent problem faced by drivers was the poor visibility and contrast** of the application due to their shifts.
To prevent this from happening, **we came out with a solution in the form of screen modes (Light & Dark).**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j2h6ld177bgj9uhsw0h4.png)