Delivering Design

 Photo by  Igor Ovsyannykov  on  Unsplash

Explaining the UX process in delivery heavy environments by creating an introduction to UX and how it can work in these spaces.

There has been a current inefficiency in my working past with regards to the implementation of actual UX design work as opposed to a run of UI creation. UX and UI form two different parts of the design process and while it may be easy to say both are combined, the amount and nature of work involved in either of them is starkly different.

Let’s begin by discussing what UI work is, since it is actually the one piece most people are familiar with - it’s literally the interface you see. In a complete design process this is actually the final step. It is essentially the flesh on the body you have created during the product design process.

During this phase, a lot of visual work is completed which includes outlining visual standards for the products (styleguides, brand standards, etc) as well as creating high fidelity mockups of wireframes previously generated. These are the final screens and they are normally organized in the flows that have also been previously generated. A key thing to note here is that UI work is not the same as branding work. When a company is branded an established visual system is put in place for it that reflects the companys’ voice, style and overall public persona. This work is usually tasked to a larger team and usually done via a marketing agency.

So what then do we can be offered for the UI component in a delivery heavy design process?

This is fairly straightforward. We offer a series of high fidelity mockups that have taken into account an established styleguide/branding guideline. We are simply fleshing out wireframes we would have created in a way that is easy for development to understand as well as allow for presentable materials that stakeholders may want to use externally.

We may also develop prototypes using these screens that will allow allow developers, stakeholders and any other interested parties to better understand the interactivity and functionality of the product. From a design standpoint this is the delivery phase, and is therefore a culmination of the design process. Work may take place after this that is iterative but this work should not substantially change the nature of the product and should add value to the product.

So what then would the UX process involve?

UX refers to the overall user experience design process that occurs during a product's development. This is more than just how usable a product can be made.

UX involves taking into account the customer's journey when they engage with the product and looks at how they may interact with it as well as how the business will interact with them. It is the creation of a stream of communication between the business and the user and vice versa. 

The UX process can be summarized into a series of phases, that closely match the delivery process: Discover & Define- Design - Test & Deliver.

Let's look at what happens at each phase:

Discover and Define - Much like the work done by BA's and Delivery Managers, this is a phase where we discover the problem the business is actually trying to solve. For the UX designer, this is where we hold meetings with the stakeholders to asses their needs and what they are ideally looking for. Rough sketches can actually be done at this point to reflect ideas being generated as well as encourage stakeholder buy-in.

Overall this should terminate with a value proposition being created that will allow the designer to better understand what the product will actually look like (conceptually).

There may also be an element of research done here, this could be direct user research or competitive analysis and doing this will depend on the business needs and resources. It is key to note that a well researched product is a superior product and therefore this activity should be encouraged.

Key deliverables could include- Persona definition, Research analysis, experience and empathy maps

Design - This process begins by creating a few conceptual sketches that are used to capture ideas generated during brainstorming. It is key to have stakeholder involvement in this phase so that they feel involved in the product creation but also so that we are able to capture as many of ideas and needs as we can. This phase is usually iterative and can last a few days. It is important to have this phase fully completed so as to ensure ideas can be further refined during the wireframe stage.

Once the sketches have been reviewed and key functionality assessed, we can begin to create wireframes. These are low fidelity mockups that create basic user flows through the product. Each frame will contain key functionality that has been previously discussed and the wireframes overall should be a refinement of the ideas initially generated. The purpose of this phase is to ensure everyone is on board with how the product will function, feel and develop. This is NOT a visual phase and therefore it is key to note that subjective assessments of how artifacts look should be kept to a minimum.

With flows confirmed and functionality also reviewed, a prototype could potentially be created out of these wireframes to begin onboarding functionality and flow to other parties such as development. It is important to do this as it will allow for development to comment on what can/cannot be done as well as for the business to better asses time allocation on work to be done during development.

Once the wireframes are generated we can begin work on developing a visual style for the product. Preferably a style guide is presented by the business to allow for a carefully applied visual look on the overall product. If the guide is not available, a simple visual style application is applied that can be changed later when a complete branding guideline is produced. The end result of this process is a high fidelity mockup of the product. This is the most time consuming portion of the overall design process as artifacts have to be created and overall visuals refined for consistency. It is key to note that this phase does require a visual designer to be engaged in addition to a UX designer as per industry standards.

Key deliverables here might include - high fidelity mockups, design specifications (functionality outlines, user flows), a high fidelity prototype.

Test & Deliver - This is the final stage of the UX process and sets up where the UX process could go next. At this point the product in its first iteration is presented for testing by the general public. This could be through a launch or through an actual user testing session. Feedback will be received at this point and it is important to capture all of it. This will determine where the product goes next and what additional design sprints need to be added.

Now that we have understanding of UX from a delivery context, we can quickly discuss how to prep for the involvement of UX. This could be done by asking some primer questions at the preliminary stages of customer engagement that will better allow for design work to begin in an efficient and manageable manner. These might include:

  • What problem is the business trying to solve and how are they currently proposing to go about doing this?
  • What changes are they expecting in current customer behaviour? What do they intend to do to get to this point?
  • Who are their current customers/users? Who else are they looking to get as customers/users? What are the benefits the product is trying to impart to the users? What does the product do that other products don't already do?

    Based on these preliminary questions we can begin an ideation session with the customer to then onboard design.

The design process in delivery heavy environments should not prescriptive and should be more organic, following a series of best practices and adapting them to best suit the project and business needs. The above exploration should serve as a starter to begin the brainstorming around how this can be done more creatively and effectively in time.

Memorable Voices I

Learning and Teaching