Retail B2C Browse-flow Funnel Redesign

Content is King and collaboration essential

Discussions regarding content patterns occurred simultaneously with common UI design reviews.

Onsite whiteboard and collaboration sessions with the internal Dooney design and marketing teams helped to identify content constructs that would engage the Dooney customer. These whiteboard design sprints often comingled marketing goals with buyer trends.

Whiteboard to wireframes

Whenever whiteboard collaboration sessions seemed to settle on a preferred content pattern, I would then quickly translate those patterns to a more refined, low-fidelity wireframe mock-up. During this effort, content parts were lined up within a customized Bootstrap 3.0 grid system.

For the more complex pattern mashups, we would pause to conduct usability studies and iterate the design based on the feedback collected.

Wireframes to high-fidelity design comps

After inspecting the design elements (approximate size, spacing, etc.) between the various content parts in the wireframe review feedback sessions, I would then craft high-fidelity, pixel-perfect comps.  

Typography

On occasion, it was required to go further… beyond the high-fidelity comps and tweak key design elements further. Typography is often a candidate for this level of scrutiny.

As high-fidelity comps are QA’d across different breakpoints, typography typically demands adjustments.

Quality control

This project effort was essentially to refresh the existing Dooney.com (Salesforce) digital experience. The SOW did not explicitly indicate how lifestyle imagery should be handled in the new Dooney.com. However, product tiles were explicitly mentioned as an AS-IS item; to be ported over as-is from the original Dooney.com to the new design. This meant that the product tile was a keystone to the aspects of height and width for several content isotopes.

The combination of false assumptions and explicit SOW requirements would have caused some of the lifestyle imagery to skew and distort in ways not consistent with client expectations. We needed to adjust and change our approach in order to succeed.

The Challenge

The entire team needed to reconsider how image implementation would happen for several of the previously approved content isotopes. What course of action would cost the least to implement, yet still raise the bar of excellence to meet the client’s expectations?

The Solution

Several potential solutions were discussed including:

1. Produce several image assets per image container to better facilitate a diverse range of pixel densities, viewports and container sizes.
2. Reconsider how the image asset was being rendered altogether; use CSS/background (versus HTML <picture> element) to correct the issue.
3. Fit the content isotopes image containers to the new lifestyle imagery the client had been preparing to use and set new design standards for those isotopes. This would mean considering changes to the established product tile architecture (an out-of-scope component)  as well as reducing the max character length for some of the isotope’s supporting copy lines.

Ultimately, the client choose option 3 as it posed the path of least resistance while still raising the bar of excellence.