Experience Design, Documentation

 

Using a visual languaGE

Problem: On very short notice a client asked us to concept a landing page for a social campaign and wanted to include features that would tie back to social content. The creative team had an initial layout that was approved by the client but requested my assistance with mobile. An added complexity was that the team had presented functionality to the client before consulting UX.

Solution: This functionality involved hover states and features that would not translate to mobile devices clearly. During discussions with the account lead, it was agreed to that the team could hold a second presentation as part of the mobile delivery. During this presentation UX would provide clarity on how navigation differed on mobile and where we had improved upon the original functionality that had been discussed.

Process: In order to reproduce the functionality that had been approved by the client on mobile, I looked to available data on how the brands targeted demographic interacted with mobile and proposed an engagement strategy that relied on native gestures that users in the demographic were already accustomed to.

After internal white board sessions we came up with an intuitive way to include the social content feed that we felt would drive engagement while maintaining the spirit of the materials presented to the client.

To assist the account lead and client with better understanding how the proposed page would work on mobile vs. desktop, I included annotations for each feature to provide clarity.

 
The iterative design process draws on the functional annotations to maintain the experience that was presented to the client as part of the original brief.

The iterative design process draws on the functional annotations to maintain the experience that was presented to the client as part of the original brief.

Incorporating client feedback and pulling through the visual styles as outlined in the brand style guide.

Incorporating client feedback and pulling through the visual styles as outlined in the brand style guide.

Notes provide high-level context on the product, annotations detail features and functionality for a technical audience.

Notes provide high-level context on the product, annotations detail features and functionality for a technical audience.

Each engagement poses different challenges for the creative team. In this use case, business requirements dictated a specific unbranded experience that aligned with the brand while adhering to pharmaceutical industry regulations.

The functional recommendations were presented to the client with the clear understanding that once approved they would remain the agency’s single source of truth for all parties.

Once the client approved the functional annotations, UX, Tech and Creative were free to iterate and refine. Once we were confident in our approach and designs, we reviewed with the client, referring back to the functional annotations as a guide to keep the discussion grounded in modern digital standards and best practices.