Skurt is a Los Angeles-based rental car delivery startup, which has raised over $10 million in Series A funding.
They approached me to design a web application that would be distributed to their partner vendors(including clients such as Hertz, Avis & Enterprise) and allow them to receive reservations from Skurt’s customers in real time. Skurt would then collect the vehicle from the vendor and deliver it directly to the customer and collect it once they were done.
Through the app, the vendor needed to be able to see where their vehicles were at all times, recall them if necessary, view the vehicles rental history, as well as perform various other actions like track issues with the vehicle and request maintenance. On top of this, the vendors could also request the transfer of a vehicle or multiple at once, from one location to another.
The Challenge
With the main requirement for the app already outlined, I started sketching different user journeys on paper and exploring different potential layouts that would allow me to cater for each of the main requirements of the app.
The main challenge was to design an interface that could facilitate relatively detailed and complex actions, such as being able to select multiple vehicles on a map and move all those vehicles to another selected location on the map. This required some complex interactions and I needed to make sure I planned the basic layout well enough to accommodate for these interactions.
I completed a competitor analysis of other applications which had requirements to carry out complex interactions on maps and relied heavily on a visual map layout. I continued to sketch ideas on paper exploring a variety of layouts and getting an idea of how it might come together before settling on any one particular layout.
Fig 1. A rather messy early sketch to explore some basic layouts and potential user journeys
Once I’d arrived at a layout I felt could accommodate the main requirements of the application, I started to create some rough wireframes for each of the views within the application with a list of requirements for each. I was then able to plan the overall IA(information architecture) for the application and communicate it back to the team at Skurt and get some feedback and create a dialogue with the product team there.
Fig 2. Early wireframes indicating the intended layout and IA for a version 1.
Fig 3. A very early wireframe for the main view(the vehicle list) outlining each of the requirements for the view.
Once the layout and IA had been discussed with the team at Skurt I then started to work on more detailed wireframes that would include every interaction that was necessary within a view as outlined alongside the screen above and started to work on more detailed interactions for each of the components within the layout.
Fig 4. The initial layout with more detailed work done to each component within the view, how a vehicle component my be shown for example and how you would interact with it.
Fig 5. Going from the vehicle list view above, to a single vehicle view with nested actions(inspections shown here) and then how to navigate back.
I focussed on how a vehicle list would look, how a vehicle itself would work and how they would appear on the map. I then worked on individual features like the Vehicle Transfer feature which would allow users to transfer multiple vehicles from one location to another using Skurt’s drivers. This feature required some detailed user journeys and this could be initiated from multiple ways within the app. The screens below show how this feature took shape after the final visual style was applied to it.
Fig 6. Selecting a vehicle to be transported
Fig 7.
Fig 8. Confirming quote for vehicle transport
Once the flows had been designed, I started to focus more on the visual side of things and giving the app some polish. Anyone who is familiar with Skurt’s mobile app will know how much of a joy it is to use from both a UX and UI perspective. While Skurt have a mobile app, they did not yet have a desktop app, so I was enlisted with the task of creating a design system that could be used for all of their desktop applications and sit nicely alongside their suite of mobile apps.
Fig 9. A UI color palette and the beginnings of a styleguide.
The result
Fig 10. Main dashboard
Fig 11. Initiating the transportation of a vehicle.
Fig 12. Viewing the history of a vehicle
Fig 13. Reservations Request, Active & Upcoming Reservations that need to be seen at a glance with access to Past Reservations.
Fig 14. Accepting a Reservation Request.
Fig 15. Some vehicle transportation web UI components.
Fig 16. Initial mini branding concept
--
Thanks for reading and I look forward to sharing more case studies delving deeper into the work I’ve done for Skurt and other clients. Keep an eye out on ciaran.design for updates. If you’d like to get in touch about this project you can reach me at justciaranhanrahan@gmail.com :)
Designing a Vehicle Fleet Management App