Designing a fleet management software solution focused on usability and user experience (Part 2)
Starting the Design Process
Wireframes
Once the initial desired functionalities for the MVP (minimum viable product) were validated by the client through user stories, we began to work on the visualisation and usability of the tool. The first thing we considered was navigation, since Strix has produced a solution that includes different embedded products, which the client contracts according to its needs. This means that a user, when logging in, can select which product to use and is able to switch between the products, if necessary.
The Design System
A design system is the single source of truth that groups together all the elements that will allow our team to design, realise and develop our product.
The fundamental purpose of this design system is to facilitate the work of our team. Once our target is defined and we have an initial idea of what is already in place in the company, it will be easier to know where to start. The first thing to keep in mind: design principles are so much more than just the visual aspect of a product. Design principles are the guidelines that help our team to achieve a product’s purpose. They will help us to make meaningful design decisions.
Aside from producing documentation directly related to the system, our team will also seek ways to ensure best practice. We will explore general best practices and extract the most relevant to the product and our team, which will help us form and develop our technical skills.
A design system is a full product that will help project stakeholders build other products. As with every good product, it will have its own backlog and will have to build itself in an iterative way, keeping its users (designers, developers, PO, etc) at the heart of its approach. The more integrated a system is into designers and developers’ workflows, the more effective it will be.
Spacing, layout grid, text styles and colours
Design components
Mock-up design
Once the final adjustments in the wireframes were made according to the required user stories, we began to test the user workflows on a higher quality screen. It is not only a black-and-white interface, but also based on the components designed according to our system. These screens also serve to make interactive prototypes for tests with users. The mock-ups include not just the main workflow screens, but also those that the client sees only very occasionally (eg change of profile photo, account reset, etc). Differences in device resolution are also taken into account, from desktop to mobile (responsiveness).
Example of responsiveness applied to a web page
User Settings pages
Fleet Management pages
Live Tracking pages
Iconography design
Marker design evolution
User Testing
User testing is at the core of prototyping; getting your prototype into the hands of real users (in this case, monitoring operators) who need your product is essential.
Priority topics
Value. We ensure our product has a real purpose. Does it solve the user’s problem? Does it help to fulfil a need? At that point we realised the target product could offer more value than the incumbent system used every day.
Usability. In today's world, products cannot just be functional. They must be intuitive, user-friendly. Typically, you test the Value and Usability at the same time.
We made sure our team could build the product. This is where the role of the cell was fundamental, since it was up to the client to understand how the user wanted to use the product. The role of the development team was also important, as it defined the technical development. Through testing, we found out what our users wanted to obtain from our product or app. The best results came from listening carefully to customers and seeing how our users tried to use our product prototypes. We asked them to use the product to achieve something specific. We analysed where they got stuck and what seemed unclear to them; we listened to their comments – what they were waiting for, what other functions they would like to see, what they found frustrating and why.
We used this feedback to create new versions of the prototype and retested with users. This cycle of rapidly building new prototypes and testing them with users was the key to effective product discovery and helping the team find the right product to build.
Final results: Pre-production graphic assets
Our final step was to develop all graphic and code assets needed by the development team: graphic assets in different formats (vector/svg, bitmaps, html code, css); and reference documents on platforms such as InVision (for interactive mock-up and presentations) and Zeplin (for more detailed specifications of each asset – size, distance between components, colours, transparency, state, etc).
And that’s all. Isn’t it?
Not really. After production/publishing, we must apply UX metrics, a set of quantitative data points used to measure, compare and track the user experience of a website or app over time. Key performance indicators – such as revenue growth, retention or increased user numbers – reflect the overall goals of your business. The metrics are focused on user satisfaction, recommendations, usability, rates and tasks.
But that will be described in Part 3...
Facundo Loza
UX - Lead
