jason-coudriet-dc80wb2nRHk-unsplash.jpg

explore our services

Journeys, flows & wires

 
 

Before every successful execution, there is a well thought out strategy. This includes outlining user journeys, drafting flows to capture all possible scenarios and instances in wireframes. Together, these sets of documentations tell the story not only of the business and its offerings, but also of its users goals and how they achieve them online.


User journeys

A user journey is a series of steps which represent a path a user may take on your website. 

They can be used for two main things:

  • Demonstrating the way users currently interact with the service / website / product

  • Demonstrating the way users could interact with the service / website / product

Drafting the journey helps to visually connect with the path and discover potential areas of improvement. Looking at the path, UX designers may discover roadblocks that can be opened up, a way to save steps on processes, and forks in the road that were not considered previously. Nothing is as straightforward as it may seem when we first build out a process and as our users change, so are their needs. Though analytics, we can revisit journeys and revise to match up to the users needs. 

 
yellowbrickroad.jpg
 

Wireframes - an integral part of the process

Wireframes must express design ideas and should not miss any important parts. A wireframe is like a channel that helps team members understand their projects better, consider all use cases and plan ahead prior to design and build phase. More often than not, seeing a visual representation of a page brings up questions and helps designers streamline experiences even further than what was previously done in a user flow phase of the project. When we see the paths we put together in front of us, we tend to empathize with the user and  put ourselves in their shoes, a step that allows us to really “walk in their footsteps” and review the elements properly. 

 
mobilewireframes.jpg
 

Separating wireframes from branding and design phases

One of the main reasons wireframes are handled separately from design or branding phases, is to allow designers (and clients) to concentrate on the meat of the job: the journey.  Once design is added (colors, spaces, fonts) it is difficult to ignore it and time is wasted on feedback that is premature to the process. While UI design is an integral part of any website application, it is meant to support the journey. Therefore, creating wireframes in grayscale format, allows concentrating on key features, paths, placement of elements etc, before adding a life to them with colors.