Jitjatjo is a tech start-up based in NYC providing on demand staffing in the hospitality industry. I worked with them from May 2019 to September 2020 as the Lead Product Designer on their Ondemand product.
Jitjatjo Design System
Overview
Jitjatjo has three major products: Ondemand, an app for businesses to post jobs; Flex, an app for hospitality talent to accept and manage jobs they’ve been assigned to; and Dash, an internal web-based tool used by Jitjatjo’s admin staff.
Each product used to follow its own visual styling, there was a lack of consistency. There were also inconsistencies across different platforms, iOS and Android.
As the company went through a major rebrand in mid 2019 and the design team was tasked with rebranding the apps, we saw that as an opportunity to create a cohesive visual language that could be used across all products to maintain a consistent style.
The primary solution was to come up with a design system guided by the new brand values and principles.
Our approach
To tackle this challenge I worked closely with the Head of Design at Jitjatjo. We made the decision to put all projects on hold to focus solely on creating a new design system and rebranding all products.
We also chose to initially focus on the customer facing apps Ondemand and Flex. Once we got them right, we applied the same principles to the web product.
The first step was to review the existing apps and list all components that needed to be redesigned and shared across both apps. We didn’t want to necessarily redesign the apps as time was short, but rather just redesign individual components for a fresher look.
Laying the foundations
The primary colour palette which was supplied by the brand agency was extremely limited. Through lots of trial-and-error we were able to come up with a supporting colour palette that would help elevate our designs.
We then looked at the brand values and did our best to apply those to the new design system. Since Jitjatjo is a human powered company, this is the message we wanted to convey with the new brand. And to translate that concept through our designs we used the following approach:
Lots of white space: the hospitality industry is chaotic. By removing clutter and unnecessary elements we give our users more space to breath and focus on the important things.
Using the primary brand colour, the Jitjatjo purple, to inspire action. It is a strong colour, therefore we chose to use it sparingly, where attention is important.
Photography: we wanted to hero our actual talent, rather than using stock imagery. The app rotates through the talent imagery, showing a different photo each time the user logs in.
Atomic Design System
Our design system was largely based on the principles of atomic design. The idea behind this methodology is that small, independent - atomic - parts can be combined into larger molecular structures.
We created a unified design system built of reusable components, ensuring that the specification of those components have a single source of truth. And we also carried this same principle through the development of the app, meaning if a component needs to be updated in one place, it updates everywhere.
Since we had already been using Zeplin as the source of truth for designs we chose to use it to document our component library as well, keeping everything design-related in one place.
The final result
The redesigned components were then applied to all screens in both apps creating a much nicer and modern look and feel.
Designing Ondemand Web
The problem
Ondemand by Jitjatjo started as a mobile-first product. The app allows businesses to create hospitality jobs on demand, and an AI platform matches staff with jobs. The mobile app is great for smaller businesses. For example, a small cafe or restaurant owner who needs to hire a barista for a day can easily do that on the go through his/her phone.
As Jitjatjo grew they started attracting larger customers. A lot of these customers have multiple units and would need to manage multiple jobs daily, which isn’t a great experience in the mobile app. Therefore the need for a web-based tool emerged.
Research and understanding the problem
Before moving to solution mode it was important to speak with a few customers to understand their needs and pain points. With the help of the Jitjatjo customer service team in New York I organised 5 user interviews through video conferencing. Those customers were mainly larger organisations which manage multiple venues and catering companies which organise daily events.
I also looked at what some of our competitors were doing in this space, looking at their strengths and weaknesses which helped us identify some opportunity areas for our product.
Main research insights
Placing job bookings through the mobile app was time consuming, especially when creating multiple bookings per day.
Viewing/managing multiple jobs in the mobile app wasn’t a great experience.
Ability to view who’s assigned to the job and how many positions are fulfilled is extremely important.
Oftentimes the manager placing the booking would not be present at the job site.
Design process
After gathering insights from the research I began creating user flows and initial concepts.
From a flow perspective we wanted to maintain a concise experience between mobile and web. And all the existing features in mobile needed to also exist in web.
I started with low-fi concept sketches on paper and worked with the product manager to make sure all project goals were met.
Once we agreed on a structure for the web app I moved on to higher fidelity designs using our existing Design System, creating new components as needed.
First round of designs and usability testing
Since placing bookings and being able to easily view active and future bookings was the most important thing for most users I decided to focus on that initially to create a great experience on web.
In the mobile app users need to go through multiple screens to create a booking. And creating a multi-day booking can be very time-consuming.
I designed the web booking flow in such a way that the user can easily see all the details that need to be provided at a glance. Each section can easily be edited separately.
I then set up a quick prototype in Invision, identified the areas of the design I wanted to validate and ran usability testing sessions with users remotely using a tool called Lookback.
However, the initial designs were not well received after testing them with users. Most liked the ability to see all the booking components in one view but having to click on each section to enter and edit details felt time consuming. Most participants had trouble with the “what do you need” section, and couldn’t figure out how to edit staffing details, or to navigate to a different date on multi-day bookings.
Final designs
I adjusted the designs based on the feedback from usability testing. I simplified the booking flow by allowing users to enter all the details on the same page, creating a more dynamic experience. Even though the page can get quite long specially when creating multi-day bookings, this design was received positively by users.
On the mobile app there is no “home” screen. But I felt that we needed one for web, a sort of dashboard that users can see as soon as they log in. Based on the information I gathered from the initial research I came up with a dashboard design where we display information about upcoming bookings, a calendar view where users can easily check future bookings, and a recent activity feed related to bookings.
