After gathering the insights from the user research, a driver-first approach to the user flows was necessary.

My process was rather easy, here are the flows explained in columns from left to right:

1. High-level of the task: User Story and a HMW
2. The current pages in the sitemap
3. The current user flow
4. The issues in the current flow
5. A new flow that addresses the issues, and answers the User Story and HMW

‍

The next challenge dealt with how to create wireframes for this flow. The mobile first approach brings with itself a few challenges, even if you know how flexbox works, and how to make responsive components.

All the existing endpoints on the component level had to be included in the screens.

‍

I also had to think about desktop layouts at the same time, I did some Crazy 8's to see what where some ways of doing that.

The top-right option ended up winning, because in the small freight company where user research was done there were 24 drivers, which means that many card components had to be organized for the screen to work.

Once all this was done and reviewed by the Team leader, and the Client. I got to work on the desktop version.

First designing for a flow that made sense.

Then designing for functionality.