# One Journey, Two Products

> How designing the Deepal website and mobile app as a single journey, with one design system, turned two products into one consistent brand experience.

- **By**: [Mohamed Amin](https://aminuix.com)
- **Published**: May 19, 2026
- **Category**: Process

![Deepal electric car mobile app screens](https://aminuix.com/api/media/file/journal-one-journey-two-products-hq-1600x941.webp)

Many brands design their website and their app in separate projects, often with separate teams. The result is two products that look related but feel like strangers: different words, different buttons, different logic.

With Deepal, the electric car brand, we took the opposite approach at Pimula. We designed the website and the mobile app as one journey that follows the customer from the first visit to years of ownership.

Here is how that works, and why it paid off.

## Give Each Product a Clear Role

Nielsen Norman Group's research on [cross-channel experiences](https://www.nngroup.com/articles/available-cross-channel/) describes four qualities people expect: consistent, seamless, available and context-specific. Context-specific is the one teams forget. The website and the app should not do the same job. On Deepal, the website is for discovery: exploring models, technology and charging, building desire and driving purchases. The app is for ownership: real-time vehicle status, remote controls, service booking and a marketplace.

Once each product has a clear role, every feature has an obvious home, and the hand-off between them becomes a designed moment instead of an accident.

## One Design System Underneath

Both products share one system: Montserrat for type, a palette of Midnight Navy, Soft Aqua, White and Slate Gray, and responsive grids of 12 columns on desktop and 4 on mobile. Buttons, cards and icons behave the same way everywhere.

This is what makes the brand feel consistent, and it is also what makes the team fast. As NN/g explains in [Design Systems 101](https://www.nngroup.com/articles/design-systems-101/), premade components let teams replicate designs quickly instead of reinventing them. Decisions made once are reused across both products instead of being argued twice.

## Measure the Whole Journey

When products are designed together, they should be measured together too. For Deepal, the numbers that mattered crossed the boundary between them: a 60% conversion rate from website to app, 40% faster interaction with the owned car, and more than 4,000 new sales through the app and website.

Those results did not come from a single screen. They came from treating the website and the app as two chapters of the same story.

## Sources

- [Availability in the Cross-Channel User Experience](https://www.nngroup.com/articles/available-cross-channel/), Nielsen Norman Group
- [Design Systems 101](https://www.nngroup.com/articles/design-systems-101/), Nielsen Norman Group

## other articles

- [Designing a Luxury Concierge Website for Mykonos](https://aminuix.com/blog/designing-the-mykonos-concierge-website) (Oct 10, 2026, Design): How the Mykonos Hospitality Group website presents villas, yacht charters, private chefs and cars as one concierge: service cards, photos as the product, sliders guests control and one Book button.
- [Designing a Creative Agency Website That Wins Clients](https://aminuix.com/blog/designing-the-based-creative-agency-website) (Oct 10, 2026, Design): How the BASED creative studio website was designed to prove its taste in seconds: a headline that is the brand, the work first, a clear hierarchy and a journal that shows how the studio thinks.
- [Designing Trust: The NAL Lawyers Law Firm Website](https://aminuix.com/blog/designing-the-nal-lawyers-website) (Oct 10, 2026, Design): How the NAL Lawyers website was designed for people under pressure: plain Arabic instead of legal jargon, proof before promises, real people, and one clear next step.