Y Suites
Mobile / Interaction Design / Rapid Prototyping / Design System
💡
Role
Lead Product Designer
Team
Director, Product Manager, UX Researcher
Timeline
June - August 2022 (3 months)
Tools
Figma, Notion
💼
Company: Y Suites is a student accommodation provider in Australia with 8 buildings and over 25,000 beds.
🚨
Problem: Y Suites is experiencing revenue leaks and poor customer satisfaction.
⭐
Outcome: Designed a fully functional prototype of a multi-faceted student accommodation app; successfully pitched to leadership to obtain funding to kickstart development of the MVP.
Final design
Main screens for homepage, groups, network, events, bookings, marketplace, support, and paymentsBusiness Challenges
💸
Late payment and untimely eviction: Y Suites loses a significant amount of money annually due to non-payment and untimely evictions.
💻
Operational inefficiencies: The absence of a centralized system for property management, maintenance ticketing, and facilities booking led to redundancies and inefficiencies.
🙁
Subpar residential experience: Feedback from residents indicated they were not satisfied with their residential experience, particularly in the areas of community building and usage of the legacy web portal for managing residential services.
Insights from Past Research
💸
Confusing payment system“The online payment system is confusing and I often forget to pay my rent because there are no advance reminders.” - Dominic, Y Suites Resident
🔧
Lack of maintenance updates“When I submitted the maintenance form for my broken shower curtain, I did not get any updates on the repair.” - Chloe, Y Suites Resident
🙁
Lack of opportunities to make friends“It would be wonderful if there were more events where residents could mingle and get to know each other.” - Ayane, Y Suites Resident
Vision
🎯
A one-stop app for residential services and community building.
Design Process
Framework
I was given a list of feature requirements that I had to design a Hi-Fi prototype for in under 2 months. Under this time constraint, I had to leverage on a combination of top-down (pattern-oriented) and bottom-up (principle-oriented) design:
🧩
Common design patterns: I looked up existing design patterns of popular apps such as Instagram and twitter for the social functions, and Zendesk and Jira for maintenance ticketing, amongst others, and adapted them for our student accommodation use case.
⚙
Pulse Design System: Utilizing the Material Design System Figma file as a foundation, I tailored it to align with Y Suite’s brand guidelines, thereby creating an adapted design system that enables rapid prototyping of consistent and user-friendly designs (see below for design system slides).
🧠
Principles of interaction design: Principles such as visibility (making sure frequently used features are not hidden behind a hamburger menu), feedback (toast notifications), and affordance (use of appropriate icons).
Steps
🧠
1. Design Inspiration: I explored the design patterns of other apps to gather inspiration. By referencing established design patterns, I was able to leverage tried-and-tested solutions to common user interface challenges.
/w=3840,quality=90,fit=scale-down)
Screenshots of payment apps used as inspiration for the payments page🧠
2. Exploratory sketches: I sketched out and ideated various designs based on the list of requirements in the PRD.
🧠
3. Wireframes: I created wireframes to outline the basic structure and layout of the application. This early visualization helped to establish a clear and shared understanding among the team regarding the app's design direction.
🧠
4. Pulse Design System: Recognizing the distinct requirements of our application, I carefully designed and integrated custom components to complement those in the original Material Design System.
/w=3840,quality=90,fit=scale-down)
Custom components in the Pulse Design System🧠
5. Prototype: I constructed an interactive Figma prototype, allowing stakeholders and the design team to engage with the app’s flow and functionality firsthand. This interactive prototype helped illustrate complex interactions and validate design assumptions.
🧠
6. Feedback: During our bi-weekly design reviews, I would present my wireframes and prototypes to the team for feedback and make iterative refinements as needed.
Zoom meeting for design walkthrough🧠
7. Usability tests: After completing the initial version of the prototype, we conducted in-person usability tests with 10 Y Suites residents.
Two members of our research team were on site in Australia while others, including myself, zoomed in.🧠
8. Refinements: We synthesized insights from our usability tests and identified changes that needed to be made.
Rationale: Several users were confused by the function of the filter tabs, so we decided to hide them behind a filter drawer to prevent cognitive overload.Pulse Design System
Key Features
1. Overall Navigation
🔍
Wayfinding: Navigating an app with many components can be confusing. To assist users, I gave each component (groups, network, events, etc.) a large title at the top of its main page.
⚡
Quick links: Instead of a hamburger menu (poor visibility), quick links on the homepage allow users to navigate to often-used features conveniently. These include bookings, marketplace, support, resources, and payments.
2. Payments
🧠
Chunked information: At the top of the payment page, we introduced a prominent floating card that chunked the most crucial payment details.
🎯
Clear CTA: The floating card has two CTA buttons: pay all outstanding balances or the overdue amount.
🌱
Progressive disclosure: To prevent cognitive overload, a detailed breakdown of rent (according to local regulations) is hidden behind a dropdown.
💃🏻
Flexible: Users also have the flexibility to pay individual invoices, with an intuitive option to select multiple invoices simultaneously.
3. Support
👀
Status visibility: Users can quickly scan their support ticket status and unread messages through status tags and notification badges.
✅
Simplified filter: We streamlined the filter chips from three to two (open and close), aligning with users' jobs to be done.
😊
Reassurance: We provide users with an estimated time (e.g. 2 business days) for when their ticket will be assigned to a staff member.
Reflection
As a student, I found it fulfilling to work on a project that tackled the pain points that students encounter. Although working at a startup was challenging, it was also a great opportunity for me to learn and grow.
💬
Communicating design decisions: Communicating my design decisions to non-design stakeholders was especially hard. - I learned to leverage research findings, proven design patterns, and storytelling to convey my ideas.
⚡
Rapid prototyping: In a fast-paced startup environment, I had to make quick design decisions as there was limited time for extensive research or multiple design iterations. - This forced me to become more decisive, rely on my intuition, and effectively use the design tools at my disposal for quick prototyping and testing.
- Rather than striving for perfection right away, it was crucial to design something quickly, iterate, and continually enhance it.
🙇🏻
Sole designer: Working as the sole designer in a startup meant I had to wear multiple hats and be resourceful. - The project's wide scope, coupled with the creative freedom I enjoyed, allowed me to hone my UI and interaction design skills.
- However, having an external mentor critique my designs would have been beneficial.
/w=3840,quality=90,fit=scale-down)
