Syzl
Duration
April 2023 - May 2023
Tools
Useberry
Maze
Figma
Deliverables
High-Fidelity Prototype
Updated Style Guide
Team Members
Grace FisherAnna GenisNatalie GrahamJayden TrottContext
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.
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
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.
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.”
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.
