Background
After the release of HD360, Hastings Deering’s customer platform as a web application with responsive mobile we sought feedback from customers to find out what was working and what could be improved.
Research methods:
- 1 on 1 interviews
- in person
- via phone
- on site with customer
- in app feedback widget
One of the major feedback issues was that they wanted a mobile app version.
Why was that important?
- 68% of Hastings Deering’s customers are owner operators. If they weren’t operating the machines themselves they were traveling on the road between sites and did not have time to sit at a desk to use HD360.
- Being notified of time crucial parts deliveries was highly valued by the customers as it often meant they had a machine down and were losing money until they go their part.
My Role
I lead the end to end design of this project including the following;
- Lead UX/UI design: Including, user-flows, wireframing, prototyping, user testing iterations and final UI design.
- Facilitated workshops with cross functional team and stakeholders to elicit feedback and buy-in.
- Developer handoff: I worked closely with Technical lead, developers and QA team to ensure the development closely adhered to the UI design and the component in the design system.
- Monitor: Gather feedback back from CX teams, Customer support channels and follow up research to continuously improve the product.
Product Release
Design
Sitemap
I wanted to map out all the screens and interactions that were needed for the mobile app, to get an understanding of scope and to see how everything interconnected.
Staring with downloading the app from the app store and the flow the follow to get into the app.
User flows
Here I wanted to map out what the customer flow was from downloading the app form the app to to successfully logging in. What would be the blockers.
Even if the user was an existing Hastings Deering customer they still need to register a HD360 account.
Low fidelity wireframes
Once I knew what screens were needed I wireframed the app at low fidelity so that I could test with stakeholders and work out how each screen related to each other and what functionality we’d need.
Usability Testing
I created a prototype for testing with customers using moderated testing method and the Figma mobile app. We tested with 8 customers.
The customers were selected based on their business size, owner operators who picked up their parts from the parts centre.
Customers were given 3 tasks:
- Find a overdue invoice and request a copy
- Track the status of a specific parts order
- Find the warranty status of a specific machine in the fleet list
Findings
- Customers found the app easy to use and navigate however they found the data displayed in some features lacking.
- Customers wanted more information about backordered parts. This was added to the roadmap as it required and data and integration support.
- Customers wanted an ‘I’m on my way’ feature to tell the parts centre they were coming to pick up the part now so they did not have to waste time waiting around for staff to pack the parts.
Task example
Released UI
The UI designs were built in Figma and utilizing the design system. The first release of the app to the app store (iOS & Android) was based on the feature set of the web application as it existed at the time, with the exception of the addition of notifications.
Click on each section for larger view.
Notifications
With the addition of push notifications the business had a new channel to communicate with customers. Customers of commented they did not get emails or they went to spam folders or were lost in the noise of very other email they recieved.
With push notifications customers would never miss out of important comms, we also gave them options as to which sets of notifications they wanted, as not every user needed everything depending on their role in the company.
Adoption
- HD360 currently has 1,885 monthly users.
- 46% of traffic is from mobile app users
- User satisfaction rating: 7.9