RAY UX Case Study
Redesigning & Improving the Mobile App’s UX
Project overview
RAY is a property management SaaS platform with a web platform for property managers, and a mobile app for tenants. Tenants can use the app to pay their rent/bills, submit and track maintenance requests, book facilities, order food, subscribe to services, and much more. The app can be white-labeled with client branding.
2020
The current mobile app is quite frustrating for users.
Redesign the app’s UX and revamp its UI to make it a modern user-friendly app.
UI/UX Design Lead
User research, competitor research, user flow mapping, wireframing, UI/UX design, interactive prototyping, usability testing, dev handover, onboard & lead juniors
Double Diamond Design Thinking: Discover, Define, Develop, Deliver
Discovery Phase
User Research & Persona
I interviewed users of the app to gather their feedback about the app. I also gathered feedback that the team had previously received from users.
Current App UI/UX Audit
I preformed a UI/UX audit and heuristic analysis on the current app to identify its flaws.
Summary of UI/UX Flaws in Current App
- Layout, sizing and spacing can be optimized
- UI color palette used is diverse and might contradict with client branding/guidelines
- Client assets should not be used as UI elements
- The nav bar can be better optimized to include important features
- Users might not easily find features
- Content is hidden 1 layer deeper in the app. A user cannot quickly browse through the app and directly find things; they have to purposefully visit an intended section (Ex. To read a news article, you have to click news, and then select the news article).
Some Competitor Apps
I researched competitor tenant apps to get inspired, see what works, and what doesn’t…
Trend Setter Apps
I researched some big trend setter apps to see what the current UI/UX trends were…
Design Phase
Before I started wireframing and exploring, I needed to redesign the informational architecture of the app.
Informational Hierarchy
The current app, all the features were jumbled into 1 screen with non-optimal hierarchy and grouping.
I listed all features of the app and logically grouped them into groups that made sense. I also took the wording/UX writing into consideration.
Exploring Options
Next I started exploring different ways of approaching the home screen, and different groupings of features based on my previous step. I also explored and tested different nav bar groupings and options.
The New Design
New App Header & Navigation:
• Replaced the “bot” button with notifications since it’s more common and intuitive.
• Moved profile & client logo to more common locations
• Made better use of the nav bar to group the most important things into 4 main screens: Activity | Services | Billing | More
Activity Screen:
• Activity will show up to 4 current/upcoming activity items.
• Combined Highlights, News, Events, and Community posts into 1 feed/timeline
Services Screen:
• Improved grouping and hierarchy:
Essential services and custom on-demand services on top, followed by Restaurant/shops, Bookables, Subscriptions, & Property Marketplace
• Chose to directly show a glimpse of what’s in each section/feature by listing contents directly instead of just having buttons with icons. This will entice users to explore and purchase these services.
Billing Screen:
Made a comprehensive billing screen with overviews of balance/dues, followed by active lease, active subscriptions, and recent receipts.
More Screen:
The more screen includes elements related to the client/domain, as well as settings and additional items if needed.
Here’s the new design…
Testing Phase
Usability Testing
We now needed to test and validate our new design with users, so I created an interactive prototype to test with my user sample.
User Sample
We conducted 4 rounds of usability testing sessions with 20 users.
Most users were aged between 23-39, with a few users over 50.
Starting Questions Asked
- What would you expect this app to do?
- You’ve downloaded this app for the first time, what would you do or check out first?
Scenarios Tested
Users were asked to do the below tasks on an interactive prototype. We noted down if they were successful, and took notes on how they behaved or reacted.
Ending Questions Asked
- If you’re bored and you want to explore, what would you check out first?
- Do you have any other comments or feedback about the app?
Findings
After testing, we realised that the location of some features needed to be changed.
Refining The Design
The Fixes
Based on the testing and feedback, I made the following fixes:
- Moved all individual features’ settings to a unified dedicated settings section in the “More” screen
- Made the “More” screen more functional by adding a profile shortcut and an ID QR code to it
- Highlighted the essential services buttons by giving them solid color icons and a title (“Requests”) in the “Services” screen
- Added a “Highlights” title to announcements and separated them from the rest of the feed to differentiate them.
- Restyled the tabs of the feed
Below are screenshots of the improved design…
Final Result
Going Forward
Impact
We tested the new design to validate it, and the testing results were mostly successful and positive, with users saying that the app is now user-friendly.
Next Steps
There’s always room for improvement. I suggest exploring adding a shortcuts section on the home screen so that users can quickly access their most frequently used features. I also recommend basing decisions on user analytics… so for example if analytics show that users aren’t using a specific feature, let’s remove that feature in order to declutter the app, or if such a feature is major then let’s reconsider its placement.