Outcomes
- Project: Hireace Trailer Mobile App (ported to iOS and Android as a responsive web app)
- Client: I built this while working at Phosphor Essence in Auckland – We also created an on-site kiosk for Z locations
- Product type: Consumer
- Service improvement: Service improvement: Customers get the ability to book trailers online at their convenience
- Service improvement: Improved efficiency in fault reporting and maintenance tracking
- Team size: 10
- Tech: Dotnet, Responsive Design, HTML5, CSS3, JavaScript, jQuery, Foundation 6
Product Screens
Brief
Hireace had an internal application already built that, once it got a few tweaks (a basic API) could be ported out to a website as a web application. The web app needed to be on brand, be performant, and aware of the user’s location. It needed to be sensitive to inventory accuracy and allow the user to contact support if needed.
The Team
My lovely team at Phosphor Essence in Auckland did most of the back end heavy lifting, I was responsible for the design and front end development.
Scope and Constraints
Using the Foundation framework and jQuery (button slider component as well as AJAX connection to the API) I built a UI that was flexible and responsive, using Mobile-First, to create an app that could be used on small mobiles up to large desktop screens.
I had constant contact with the client regarding requirements as the API needed tweaking and after some user testing they performed they realised tweaks were needed.
We had some constraints around optimising the API performance but once we sorted that we were able to quickly port the data to the application. The front end was quite fast as the product images were optimised for each use, thumbnails only until the user needed to see the entire trailer.
My Process and Role
Due to time constraints we quickly wireframed the first few screens and mapped out the user journey, once this was done we moved to high fidelity, full colour, mockups then code.
For high fidelity designs I went with the brand colours, blue and yellow and then proceeded to create each screen, starting from the home page and working my way through the user journey, which we had discussed with their Product Manager.
From there we scheduled design deliverables and pretty much stuck to that schedule. Once each screen was approved then I could code it up and get my helpful back end devs to provide me with the proper API endpoints.
The Hireace app has been in use since 2015 and it’s still going today!