To narrow the area of focus, we worked with the client to identify areas we had to tackle with this project. To achieve this, we did an affinity exercise that led to identifying what issues were critical, important, nice to have, or could be addressed later.
Another exercise performed with the client team was identifying words they wanted associated with the product. We used these terms as the focus for the design moving forward.
We came to the client with a few adjectives for how we were thinking the product should be defined, and asked them to vote about where they thought the product should be focused. This led into the strategy for moving the product forward.
Once we had a direction confirmed from the client, we worked to make sure our own ideas did not become part of groupthink when working with the client. We did this by:
Once we had established the business direction, we wanted to make sure we stayed on target with the user. So we went back to the research done in the field, and began to try to define a journey. After establishing a user type, I created a journey map to understand the interactions the user would have with the product.
Storyboards are an established UX practice. The most common way I like to implement them is thinking a bit about the interactions while working through them. This evolves into either comic book-like sketches or what is sometimes referred to as wireflows. Wireflows are wireframes combined with flows that capture the interactions that the storyboards are fleshing out.
The structure of the existing product was very complex. With an understanding of how the interaction could work, I needed to understand what was available for the interaction. This was critical for the strategy of the product, and went through several iterations.
Once the structure and high level interactions of the product are established, it's time to start building the design! We had to make sure it would be something that could grow and expand, and allow for different branding. So it had to be flexible, which was a challenge with the level of detailed information that would be displayed. I addressed this by keeping the design simple. To build the wireframes, I used Sketch, but would use Figma these days as I enjoy the prototyping capabilities.
Capturing an interaction flow followed by a prototype where the interaction can be seen is the best way to express an interaction. Here is a simple interaction flow I created, with the prototype eventually implemented with the visual design in place.
This project was considered successful because: