UI/UX Design
Graphic Design
Habitat
Track payments, join community decisions, request services, view financial allocations, and more.
Role
UX/UI Product Designer, Graphic Designer
Duration
3 weeks
Platform
iOS & Android
Client
Dinero
Problem
With people’s schedules busier than ever, managing residential complex matters can be time-consuming and demanding. The Habitat mobile app makes the process smoother by delivering the right information at the right time, enabling users to make and track payments, vote on decisions, receive news, and more.
Tracking Payments
Keeping up with all the money movement of the entire complex and your debt is hard.
Vote on Decisions
Your apartment complex may decide things without your opinion on it. Democracy please!
Receiving News
It's hard to follow up with all the updates, but you need to know when the water will be out.
Meet: Gizem
Age: 27
Education: Bachelors degree
Status: Married
Occupation: Sales Manager
Location: Ankara
“I am used to online service, and I usually do my online shopping from Instagram.”
Bio
She currently lives in Ankara with her husband and 2 cats. She is currently working as a sales manager and like to go out with friends. She likes quite times in the evening.
Core Needs
- Needs to reach out to the manager because of the apartment complex hardware problems.
- View where her fees go, that she pays to the manager.
- Pay fees and manage debt in one place.
Frustrations
- Manager is not being transparent.
- Currently, she needs to reach the manager, but they are not answering the phone or cannot be found in the office.
- Not much of a say in the residential complex problems.
Ideation
Hi-Fi Prototype
Refine
After mapping out the full user flow, I created wireframes for the key screens. Then I applied the brand identity and filled the gaps between key screens. After creating the edge case screens, I received a peer review that I value a lot. Since this project was a 3-week sprint, there was no time to meet with users to test wireframes and the flow.
Edit
After my peer review, I decided to create additional pages for the same functionality, allowing me to reveal information in layers. My initial design was relying more on the mental capacities of the user and therefore creating a lot of load for such an everyday app. So the advice I received to reveal info in deeper layers was a great idea.
Moving forward
After the UI designs are finalized, the development team started to work on the app. However, if I were the project manager for this project, I would move forward with a user test first.
I would also organize a user testing session after finishing the wireframes so that we could make sure the application was user-friendly.
This project could use a lot of back-end rework so that some of the functionality could speak a real user language. For example, the payment types were divided into 2, which were one-time and installments. However, since this app is managing monthly payments for the residential complex fees, a separate monthly fee category was needed.
What I learned
This project is extremely valuable for me because in the final week of the UI designs, I had the opportunity to work with our front-end engineer, who gave me great insights about how the developers use Flutter. He made me realize the value of great documentation and working closely with the developers from the very beginning.
I learned that early follow-ups with teammates make the process much smoother. The product manager I was working with for this project created a very detailed documentation for the website panel that I could easily create my deliverables list. She then checked in on me whenever I reached out to her, making me feel like I’m on the right path from the beginning to the end.
I also learned how to make LottieLab animations.
