BAY 02 / Grocery shopping
Dujis
Grocery shopping for students: a web shop, a React Native shop app and rider app for iOS and Android, and the order desk behind them, built by PED in Accra.
- Client
- Dujis
- Type
- Websites, Mobile apps, Operations software
- Sector
- Grocery shopping
- Role
- Brand and product design, ecommerce, web shop, React Native shop app and rider app
- Stack
- Laravel, MySQL, Livewire, Alpine.js, Tailwind CSS, React Native
01 / THE JOB
Who it was for.
Dujis is a grocery shop for students, who order from their residence instead of queuing. PED built the web shop, a React Native shop app and rider app for iOS and Android, 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 a React Native app for iOS and Android: 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 React Native app, for iOS and Android. 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 in one place, with a cart and an order confirmation shown 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 screens show the shop app. The tablet with the map is the rider still we have. The laptops show the public shop, and another tablet shows 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
- React Native
What we did
06 / OUTCOME
What exists now.
Dujis has a web shop, a shop app and a rider app built in React Native for iOS and Android, and the order desk behind them, for students who order from their residence instead of queuing.
No order counts or delivery times are claimed here.
07 / RELATED SERVICES
Stations this job went through.
The service pages that describe the kind of work above.
