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 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, 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, Nielsen Norman Group
- Design Systems 101, Nielsen Norman Group
