Syzl

Listing Availability and Rate Redesign

Duration

April 2023 - May 2023

Tools

Useberry

Maze

Figma

Deliverables

High-Fidelity Prototype

Updated Style Guide

Context

Syzl is an online platform where Kitchen Owners/Management list underused Commercial Kitchen spaces for rent. When we first met the Syzl team, they expressed their interest in mitigating cancellations made by Hosts on their platform. To address the issue, we proposed a redesign of the listing process, with the primary focus on the Availability and Rates section. All deliverables expanded on Syzl's current branding and UI.

Syz Default Rate
Syzl Availability Popup

Research and Findings

Heuristic Analysis
Visibility and System Status

When users set hourly rates for a day, the previously selected day would temporarily collapse, concealing it.

Match Between Systems and the Real World

The rate and availability layout differed significantly from a traditional calendar view.

User Control and Freedom

Modifying default or daily rates overwrote unavailable time slots without warning.

Consistency and Standards

Copying rates from day to day did not align with common methods used for copying and pasting over input field data. The UI layout for availability differed from those in similar digital products.

Usability Testing

The usability test assessed users' ability to complete a simple onboarding and listing. After each task, users provided feedback through an optional Likert scale and open-ended questions. Users faced the most difficulty with setting and editing rates and availability. They either skipped or took the longest time to complete these tasks.

"Setting up the rates and availability was waaaaaaay too difficult so I gave up and tried to submit the listing, but then the site wouldn't let me submit until I added the information in the other tabs, but I couldn't remember all of the information I needed to add it. This was not fun at all."

“I don’t want to update the information because it was already too much of a hassle the first attempt.”
User Interviews

I made an interview guide and spoke with kitchen professionals about Syzl's listing issues. After, we used affinity mapping to gain insights, especially from kitchen rental novices.

Calendar View

Kitchen managers used a variety of scheduling tools, all of which typically used traditional calendar views.

Issues with scheduling

Managers planned ahead but the nature of the industry meant that unexpected situations often arose, leading to scheduling conflicts.

Solution

We leveraged our research and Syzl's existing UX identity to formulate concepts. Our designs centered around these primary goals:

  • Visually streamline the Availability and Rates section, revealing necessary input elements only when needed
  • Incorporate a traditional calendar view and copy-paste feature found in comparable digital products.
  • Offer a flexible approach to setting availability, as scheduling in the kitchen industry is unpredictable

Low Fidelity Wireframe Concepts
Mi-Fidelity Wireframes

Updated Design System
  • All elements in the style guide were designed to mirror Syzl’s current branding.
  • Introduce an 8px Grid for scalability
  • Design elements for warnings, errors, and destructive actions were also included.
  • Syzl’s existing availability procedure was streamlined to boost intuitiveness and reduce clutter, displaying input bars only when necessary.
  • Hover states played a key role in this design language, indicating to users which elements were interactive.

Syzl Branding including Colour and Typography
Syzl Style Guide

Prototype User Acceptance Testing

We created a series of tasks in Maze, based on a simple listing creation user journey. The heatmaps, average time per task, and success rates showed that our 11 testers completed the journey with relative ease compared to the usability test conducted on the original listing creation process.

“The icons and calls to action matched what I use on other sites, so the familiarity helped me navigate pretty seamlessly.”

“When I deleted the May 24th availability by clicking the trash can icon, I didn’t think I’d have to click again to apply. Clicking the icon should have been enough to complete the task.”
Response for How satisfied were you with the overall availability and rate management experience
Syzl HeatMap for copying Fridays information to Saturday
Heatmap for opening copy dropdown feature

Going Forward

Recommendations for using the Prototype and Style Guide for further development:

  • Incorporate a monospaced font into the Style Guide, which complements Poppins, for use with numbers and calendar text.
  • Ensure consistent UI elements and their states throughout the site.
  • Implement a vacation toggle feature accessible either through the profile page or during the edit/add listings process.
  • Introduce a summary page before users submit their listing information.
  • Categorize similar information during the Add Listing process into individual steps to create a more predictable user flow.
  • Explore the idea of deleting a single time slot in one step.
Syzl Prototype
Syzl Prototype with date expanded