Launched in 2015 and was one of the most important product launches for the business and its 17,000 member organisations. I was Senior Designer on this project from its inception and for three years in total (2013-2016).
Following in-depth feedback and discussions with our users, we carefully crafted, designed and engineered Visionfta from the ground up.
Research, wireframe, prototype, repeat
- As a UX team of one, my role on the project was to own the design and ensure the experience was fully consistent across all platforms.
- I spent much of the early days talking with users, sketching, wireframing, and prototyping ideas and directions for Visionfta.
- As work began on defining the product, discussions internally had never been more exciting. I had regular workshops with product owners and the development team to discuss and sketch ideas and concepts.
Day detail (above): Users are able to see an overview of a particular day, their driving activities and any infringements that have occurred. The ability to edit/delete an entry was required, in addition to adding comments for the day and real-time reports for download.
- We worked in an agile environment, which resulted in rapid, iterative design and development. Working in this manner is popular with developers but challenging for designers and I soon discovered I needed to be at least one step ahead of the sprint. In other words, do my research and design work outside of the current sprint, almost laying down the tracks for the team.
- I ran workshops to collaboratively sketch out optimal user journeys and designs, and when development was ready to begin, made sure the devs had a smooth handover and the assets they needed.
- I created clickable prototypes as a way to demonstrate ideas and also to reduce heavy documentation.
- My design process consisted of wireframing in Balsamiq, which was a perfect tool for generating ideas and discovering solutions.
- Visionfta was designed entirely using Sketch.
- For prototyping I was comfortable hand coding my designs in HTML and CSS, saving time for the developers in the process.
- Marvel was also a valuable tool for turning my mockups into interactive prototypes and gather feedback from Product Owners, and within Team Foundation Server (TFS).
- I created an internal style guide that covered everything from colour, iconography, type styles, buttons, and reusable components. Laying that foundation allowed us to move together in unison and allowed me to keep the design consistent.
Validating each idea
- Throughout the process we carried out numerous rounds of user testing to ensure the journeys and interactions were beneficial to users
- Continued monitoring and optimising based on customer feedback post go-live.
- Having validated each idea, the interface had to be logically structured, clean and intuitive. Things that people used the most should be the most readily accessible, with usability essential.
- I had to meet and exceed the desired customer experience, measured by customer satisfaction and customer success of managing, controlling and analysing their tachograph data. I primarily used Hotjar, Google Analytics, and customer feedback for measuring.
Manage my drivers
Driver calendar: a four weekly calendar layout for drivers to view their activities and infringements. A summary of their driving and rest periods are clearly displayed and multiple days are selectable.
Performance: benchmarking and comparing driver performance metrics over a 12-month rolling period
Visionfta main menu
Profiles: designed individual profiles for both drivers and vehicles. Help screens were always available to guide the user if necessary.
Manage my vehicles: real-time vehicle search allowing the user to cut through the data to pinpoint a particular location or vehicle.
Speed report: a clear graphical chart for displaying speed data, including average speed.
Audits and Inspections: users can search and view their audit and inspection reports online, tailoring the search options as required.
Inspection reports: clear and concise inspection report design for customers to download and comprehend. Videos are also available to view online.
Email notifications: users are notified via email of new reports.
Alerts and notifications: designed real-time alerts and notifications into Visionfta for users to easily see the items they need to action.
Driver debrief: UI for listing driver infringements still to be debriefed – a three step wizard to make this process simple and easy to use.
Impact and results