Smart Transportation solution for companies
2020-2021
Client
Shiftlive
Skills
UX/UI | Web Design
The Challenge
Empower the User Experience
Shift has created a SaaS platform constructed of 3 complex systems for shuttle operators of large scale organizations.
The platform offers to optimize and automate the experience in order to reduce costs and increase efficiency. I was requested to improve UX aspects of new features to address a significant enterprise. As the system was already running, I designed within a slim and challenging design system and offered a gradual change towards an updated and engaging UI.
Initially I proposed the following phases:
1) Improve usability by reducing the cognitive overload and dividing the screens for clarity and orientation.
2) Re-branding to differentiate the 3 softwares.
​
01
Cost efficiency is a major consideration within the transportation domain. Consideration of number of passengers, vehicle type and capacity and length of route can change cost dramatically. Currently, all the information is condensed into one screen making it almost impossible to compare and comprehend, let alone the endless scrolling to gather all the data.
​
Initially, I mapped the relevant parameters and re-organized it to improve the usability and cognition as well as introducing icons for transportation options and status for availability.
.png)
Next, I had to consider all the possible options regarding vehicle types (from taxis to buses) different pricing methods, morning or night shift, etc and designed an UX wire-framed view.
In addition, I performed a qualitative research with the potential clients to define the pain points and reach a customised solution.
I offered an overview of all available vehicles but with a distinctive separation between them and an icon based vehicle display for better orientation. Tapping on any vehicle changed the display for prices and methods as featured in the mockup below.
_gif.gif)
Software Tutorial Panel
User research and overload on customer’s support staff regarding misunderstanding of features led to a need for specific page supports within the platform.
After discussing the options for icons or a symbol for support, I suggested simplifying the process and add to the top menu a question mark icon that when tapping, opens a specific window for orientation.
As each page was a little different, the menu was static, therefore appropriate for the tutorial icon.
The options for the window were either a pop up or rather a sliding window that kept the user in the desired page.
The users are mostly not tech-savvy and when presenting the options were more appreciative of the sliding window as presented and executed.
_gif.gif)
Getting Shift Done!
Passengers / Employees needed an easy registration with flexibility that matches different shifts in different locations and hours.
After mapping the list of possibilities within user research, I’ve constructed the flow and divided into 3 (where? when? and summary) that fulfills the diverse requests of the different personas.
_gif.gif)
The registration procedure needed to address the following:
- Multiple dates registrations
- Matching hours to customized working shifts
- Customized locations for pickup and drop-offs
- Simple and responsive - designed for desktop, mobile and tablet
- Based on design system to decrease overload for developers
_edited.jpg)
​
Branding Sprint and website
Transformation
As an experienced designer with a natural approach to branding, I initiated a quick update to the brand beginning with the logotype and providing specific notion to the need of separate theme to each of the 3 softwares that serve different customers and needs.
The Umbrella brand Shift is accompanied by 3 round Letter based icons symbolizing each of the tools.
The immediate connotations is of motion and wheels related to the domain of transportation
The letter reflects to the theme of each software;
C - Control, B - BI and the general H for the main platform.
The letters were built with the similar concept of a separation within the form.
Next was introducing an updated vivid colors palette , aimed to be implemented to the softwares and replace the grayscale design system that was kept as the secondary color palette.
Part of the Branding was interlaced while working on the design of the franchise’s website allowing me to construct a new language of icons, images and behaviour of the different UI elements.
Product Design Projects
_gif.gif)
Body Measurement
for the apparel business
_gif.gif)
Communication Assistive Technology Innovation
_gif.gif)
Fair Rent Exchange
mobile app
02