BAY 02 / Grocery shopping
Dujis
Grocery shopping for students. A shop app, a rider app, a web shop, and the order desk behind them.
- Client
- Dujis
- Type
- Websites, Mobile apps, Operations software
- Sector
- Grocery shopping
- Role
- Brand and product design, ecommerce, web shop, shop app, rider app
- Stack
- Laravel, MySQL, Livewire, Alpine.js, Tailwind CSS, Flutter
01 / THE JOB
Who it was for.
Dujis is grocery shopping for students, from the residence rather than the queue. PED built the web shop, a shop app, and a rider app, plus the order desk that takes the orders.
PED also did the brand and product design for it, and the ecommerce underneath.
02 / THE CHALLENGE
What the job asked for.
Students shop from the residence, not from the queue. Dujis needed a grocery shop that works on a phone and on the web, a way for a rider to find the address, and a desk that takes the orders and deals with refunds.
03 / WHAT PED BUILT
Built in order.
Each part, with the screen that shows it. Click any picture to enlarge.
01 of 5
WEB / SHOP
The web shop
The public shop runs on laptops and tablets: a breakfast section, the grocery catalogue, and product pages that include a map.
The web shop on two laptops Product pages over a laptop with a map 02 of 5
APP / SHOP
The shop app
On the phone the shop is an app: browse groceries, fill a cart, follow orders, pick food bundles, sign in. The same catalogue shows on a phone and a tablet side by side.
The shop app, five screens The catalogue on a phone and a tablet 03 of 5
APP / RIDER
The rider app
The rider side is its own app. The still we have is a map and a delivery address on a tablet.
A map and a delivery address, rider side 04 of 5
DESK / ORDER DESK
The order desk
Behind the shop is the order desk: the admin dashboard, refunds, and checkout on one board, and a cart with an order confirmation on two monitors.
Admin dashboard, refunds, and checkout A cart and an order confirmation 05 of 5
APP / SUPPORT
Support in the app
A customer-support screen asks “How can we help you?”, sends the message by WhatsApp, and carries a list of frequently asked questions underneath.
The customer-support screen
04 / EVERY SCREEN
The full set.
All 8 pictures we have for this job, uncropped. Open one, then use the arrow keys.
How to read the picturesThe phone boards are the shop app. The tablet with the map is the rider still we have. The laptops are the public shop and another tablet is the support desk. The grey laptop and the two iMacs are the order desk. Prices printed on those screens belong to the mockup. They are not results we are claiming.
05 / STACK, AS BUILT
What it runs on.
- Laravel
- MySQL
- Livewire
- Alpine.js
- Tailwind CSS
- Flutter
What we did
06 / OUTCOME
What exists now.
Dujis has a web shop, a shop app, a rider app, and the order desk behind them: grocery shopping for students, from the residence rather than the queue.
No order counts or delivery times are claimed here.
07 / RELATED SERVICES
Stations this job runs through.
The service pages that describe the kind of work above.
