Y Suites

Y Suites

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 payments
Main screens for homepage, groups, network, events, bookings, marketplace, support, and payments
image

Business 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.
β€£
Features
πŸ’¬
Social Feed

Students can post and discuss ongoing activities and topics within Y Suites.

β˜•
Network

Students can view profiles of their fellow residents and connect with them.

πŸ‹πŸ»β€β™‚οΈ
Bookings

Students can conveniently book communal facilities such as study rooms or gym time slots directly through the app.

πŸ› 
Support

Students can submit maintenance requests for their accommodation and track the status of these tickets.

πŸ‚πŸ»
Groups

Students can form and join groups based on shared interests.

🎭
Events

Students can either host their own events or participate in those organized by others.

πŸ›οΈ
Marketplace

Students can purchase necessities and engage in buying and selling items amongst themselves.

πŸ’³
Payments

Allows for the easy and secure processing of rental payments through the app.

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.

 Screenshots of payment apps used as inspiration for the payments page
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.

image
🧠

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.

image
🧠

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.

Custom components in the Pulse Design System
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.

image
🧠

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
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.
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:
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

image
image
image
image
image
image
image
image
image
image
image
image
image
image

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.