PRODUCT
Short-term rental app
ROLE
UI/UX | Product Designer
Remote
COMPANY
Stay Inc. – Startup
Toronto, ON
Stay is a peer to peer accommodation platform similar to Airbnb and VRBO involving HGTV host and co-founder, Scott McGillivray.
Stay enables property owners to list their available spaces for free and earn extra income with plans to provide long-term leasing in the future.
Background
- Prior to the founders assembling an in-house team, they had outsourced the project to an agency. Not being the right agency partners, the agency failed to ideate, develop, and implement the project from start to finish.
- Failing stipulated goals, founders departed ways with the agency and built an in-house team of designers and developers and formulated a plan to approach implementation by adding resources where needed.
Shortly after I joined the company as their first in-house designer, where I largely worked at creating missing screens and assets left out by the agency, a design lead was brought on board to work cross-functionally between design and business.
Homepage design I led
Discovery
and process
The design team collaborated with stakeholders and engineers from the beginning to develop a shared understanding and vision for the product with ongoing conversations about users, problems, ideas, solutions, and story mapping.
The UX team conducted market research by doing a comprehensive analysis of direct and indirect competitor products and features in a comparable way. The analysis helped the team understand industry standards and assisted in identifying opportunities for the product.
We leveraged Scott and his network, and those of our stakeholders, to gain new insights through remote user interviews. Host and guest side proto personas were created to catalogue the teams existing knowledge of who our users were and what problems to solve.
Discovery and process
We made sense of the data collected by drawing insights where we could. Capturing and organizing what users think, want and need, helping inform UX to understand the “why”, shifting the focus to the user from the product.
Traveller and host journey maps were created to visualize the process a user goes through when looking for, or hosting, a short-term or long-term rental. The journey maps pinpointed pain points and potential UX opportunities for the team to leverage upon.
Discovery and process
User and UX flows were created for each user story focusing on paths and actions necessary for a user to complete a task, making it easy to validate when a solution and processes were complete.
The flows were a great collaboration tool as well, giving stakeholders and engineers an understanding of the user experience and architecture of the product. They also made it easy to identify things like potential error states and when to trigger a toast and push notification etc.
Design system implementation
The design lead and I implemented a robust design system to provide a single source of components, patterns, and styles for design (and development) in order to maintain visual consistency across the product on both web and mobile.
Making sure we met WCAG 2.1 accessibility requirements, the design system was built and maintained entirely in Figma, using its advanced features such as auto layout and component prop variants. We started with atomic components: typography, colours, styles, and then molecules and patterns: buttons, inputs, cards, date pickers, and other essential core UI components.
Each component was given a name, description, attributes, and states, with documentation and usage guidelines. Pattern libraries consisted of UI elements groupings and layouts and were just as thorough and high-level.
The design system was maintained by myself and a fellow UX designer. Together we ensured the design system was never out-dated or over-crowded with redundant entries and submissions with audits.
Stay app design system
Desktop and
Mobile Search
Searching for homes is the primary mechanism guests use to find a place to stay on the platform. As a core experience in how Stay functions, it was crucial that I got search right on both desktop and mobile.
A typical booking starts with the guest issuing a search query for available homes in a particular location. The task of search is to respond to the guest with an ordered list of listings available. I knew from research that it is common for guests to do multiple searches, clicking through some of the listings to view their details page and applying filters to further narrow down results, so I designed search to be a flexible, browse based experience.
Desktop search component
Search implementation
According to Jakob's law, users expect your site to work similarly to others, so it was essential that the search component behave like other travel sites users already know and use. It was crucial to not reinvent the wheel here.
I led the design of the new search, search results page, and filtering, by focusing on existing user mental models with modern and lightweight UX patterns and UI for users to complete their task at hand.
BOOKING & CONTACT
One challenge with mobile search was in creating a seamless visual and UX flow. The goal was to make search always accessible and just a tap away, but also on how the experience would feel and function.
We discovered through research that it was best that the mobile app follow iOS HIG, and Android Material guidelines in order to be intuitive for users and follow similar functionality native to their devices. Doing so also meant less research and development time, user testing UI, and future maintenance. It also meant that we could release the app sooner with UI and functionality users already know and understand over fully custom UI patterns.
We started by understanding fundamental device characteristics and patterns that distinguish each platform to inform design decisions where it made sense to incorporate. We did this by using best practices and patterns such as navigations and bottom sheets to help the design feel more at home on either iOS or Android.
After several weeks of sketching, iterations, testing and concept work in Figma, we expanded search to include adding dates and filters in a seamless way. Upon tapping the search bar, a user has the ability to search by location, then add dates and guests in a two step process. Inline filtering allows quick access to the most important filters with the ability to also edit dates, guests, and search a new destination by tapping the back button.
Homepage, search component
Search results page
Search
Map view, map fab triggered
Date and guest picker
Property
detail page
We knew from research that users expect large photos and appreciate detail with property descriptions, sleeping arrangements, amenities, check-in and check-out times etc. We accomplished this without cluttering the page or make it difficult to scan with the use of icons and boldly highlighting sections with plenty of space between each.
We also learnt that users expect full and transparent price details before without having to reach the final booking stage. We achieved this with transparent pricing details right in the booking component with a full list of fees and charges once a user adds dates and guests so there were no surprises later.
Property detail page
Host
Dashboard
The host experience is quite different from a guest in that guests are travellers, whereas hosts are running a business. They need a way to track earnings, payouts, bookings, manage requests, and so forth.
The goal was to design a dashboard that would allow hosts and landlords to use our tools despite the size of their business. Through research, we discovered it was best if we consolidated interfaces into a single UI.
I led the dashboard design to be representative to that of a calendar, with emphasis on highlighting day-to-day activities, tracking, and be quick and digestible. With groupings and displaying same day or upcoming events and activities, the intent was to keep hosts informed of day-to-day ongoings in a simple UI.
During the research stage, we considered every type of information a host might seek out and translated them into sets of modules. These modules included everything from booking requests to calendars to reviews, to surface information a host may need at a glance. Our testers appreciated the modules and layouts which they found easy to scan and summarize.
A challenge with the dashboard was that it was essentially, in a way, its own product, requiring a lot of time and resources to develop and implement. We had invested much time and resources to the dashboard, but with product ship dates approaching, sacrifices were made and a third party channel manager was utilized in its place.
Host dashboard iteration
Memories
Memories is a feature I led the design on that allows users to create photo albums of their stays with the ability to manage albums, play slideshows, and share albums with others, including to host property pages.
Creating an album is simple: create an album, choose a past stay, upload photos, get a sharable link. In my research, people said we would be crossing a boundary if we didn’t provide them with full privacy controls and options. There needed to be a way for a user to set album and individual photo privacies for photos they might prefer others not see. To meet that need, I designed a set of preferences to empower users and put them in control of their experience with privacy controls at the album and individual photo level.
In addition to privacy, users were able to title albums and caption photos. Albums were designed with justified width layout grids to preserve the aspect ratio of each photo, grids were scrubbable and load near instantly as the user scrolls.
Despite being feasible by our engineers, it was decided that due to pressing technical debt in other areas, the feature was put on hold.
Admin Centre
I led the design on an admin help-desk to serve as a full customer service solution for our customer support team to manage user requests from various communication channels. Through research, we discovered the best way to consistently provide our users with quick and effective responses and manage it all was with the use of a ticketing system similar to other modern CRM systems.
The ticketing system was designed to document and track customer issues and interactions, making it easier for our customer service team and manager to manage support cases. Agents could tag, categorize, and keep tabs on active requests with streamlined communication between agents and end-users. The ticketing system would monitor customer communication across email, IM, social media, chat, etc and create a ticket for every support interaction before being assigned to an agent who would help the customer resolve their issue.
The ticketing system would log all communication in a single thread with agents also able add internal notes about the issue for future reference, or assign the ticket to another agent or manager.
After researching and design iterations, stakeholders quickly realized that it would be an immense undertaking and require a lot of resources to develop such a system from scratch. With heightened pressure to ship other priority features, and a hefty backlog from engineering, the admin centre was compromised and a third party solution was to be used in its place.
Project challenges
and reflection
One of the more challenging parts of the work was retrofitting new design to work into code architecture inherited from the former agency. Over time, this led to crushing problems of accumulating technical and UX debt, tight deadlines, and impractical constraints for design and engineering.
Despite challenges, I am grateful for the experience, the opportunity, and for the learnings. I developed a deep understanding of a product from start to end in many different key areas. User’s needs mainly, but also in how design works within business, engineering, and the product development process as a whole.
I performed from a high product and user experience level while executing within a team at pace where I created impactful solutions across UX, interaction, and UI design, always with the end-user in mind.