Manzel Express - Property management web and mobile app
“
Repairs, rent and visitor passes for a whole compound in one app.
Manzel Express
Web and mobile app, 2017-2018
About the project
Manzel Express is a Jordanian startup that makes cloud software for running residential compounds. Its system was built for Retal Residence, a compound in Al Khobar, Saudi Arabia, so the resident app carries the Retal Residence name. Between October 2017 and May 2018 we planned the system, designed the resident web app, the mobile app and the admin back office, and then built them.
Project
Manzel Express Platform
Industry
Property Management
Location
Al Khobar, Saudi Arabia
Date
2017-2018
“
Client Request
Manzel Express wanted to rebuild its system as two connected parts, an admin interface for managers and staff and an app for residents, both fast, secure and usable on any device.
Manzel Express
Project RFP, October 2017
Design Pillars
Core UX Principles
Maintenance, housekeeping, payments, visitors and compound services all start from the same Submit a Request button.
The current balance sits in the header, and each due payment has its own card with the amount, due date and a pay button.
The resident portal is responsive and the app wraps it with push notifications, so a request works the same way in a browser or on a phone.
Who Uses It
One Compound, Three Kinds of User
Residents
Report a repair, pay rent, add a car or authorize a visitor without calling the management office.
Staff
Maintenance and housekeeping teams get tickets, tasks and shifts, and residents rate each job once it is done.
Managers
Dashboards show occupancy, revenue, team efficiency and resident ratings for the whole compound.
The Challenge
Problem Statement
The Main Goal: Run a Compound from One System
The RFP asked for leases, maintenance, housekeeping, amenities, visitor security, vehicles, inventory, accounting and reports on the admin side, plus a resident app for requests, payments and events. The user stories covered 13 roles, from owner and accountant to security and resident. The servers had to handle 500 to 1,000 users at once, with pages loading in under five seconds.
“
Develop fast, secure and integrated solution that can be accessible from anywhere, any device.
Manzel Express Project RFP
Manzel Express, October 2017
Our Approach
Solution
A Resident App and a Back Office
Information architecture, wireframes, a responsive resident web app, iOS and Android apps, an admin back office and the code behind all of it. It is an example of our Mobile App Design work.
01 - Structure and Wireframes
We mapped the modules and user flows, then wireframed the resident portal in November 2017.
02 - Final Screens
Resident screens for web and phone, plus 91 admin screens, were ready by January 2018.
03 - Build
We built the back office, the resident site and the iOS and Android apps between December 2017 and May 2018.
Before & After
The Blueprint & Evolution
First Pass to Final Design
The request picker changed a lot between the first UI pass and the final design.
Before: the November 2017 picker, with the same notepad icon on most tiles.
After: the January 2018 picker, with a custom gold icon for each request type.
Design
Key Features
Requests with Photos
Residents pick a category and type, describe the problem, choose a preferred visit time and attach photos of what needs fixing.
Payments and Receipts
Rent and service fees show up as cards with a pay button, and every past payment keeps its invoice and receipt.
Design System
Visual Identity
Typography
A light sans serif for headings and the uppercase welcome line, with semibold weights for labels and amounts.
Color Palette
Retal Residence gold for buttons, icons and the request picker, on white cards and a pale gray page.
UI Logic
Each ticket shows its status and gets a star rating when the job is done. Residents can register up to two vehicles, and a visitor pass is valid for one visit or several.
Impact
From Wireframes to Working Apps
Results for Manzel Express
By May 2018 we had delivered the resident web portal, the Retal Residence app for iOS and Android and a back office for requests, staff, visitors and reports.
Manzel Express
Result
By the Numbers
91 Admin Screens
Dashboards, tickets, tasks, shifts, visitors, vehicles, reports and settings.
13 User Roles
From owner and manager to security, accountant and resident.
20 Custom Icons
Gold line icons for request types and compound services.
Process
Planned Around Roles
13 Roles and 13 Modules
The project’s user stories set out 13 roles and 13 modules, among them leases, payments, maintenance, housekeeping, amenities, vehicles and visitors. We used them to plan the information architecture and user flows before wireframing the resident portal and the admin screens. You can see some of the results below.
Final Showcase
The Manzel Express Screens
