Retail B2C Browse-flow Funnel Redesign

Overhauling Browse Flow Experience Track

This project centered around the redesign of the browse flow track for Dooney.com with an improved, mobile-friendly and modernized user experience that enhanced the Dooney brand story throughout.

Competitive Analysis

Investigated and defined gaps, opportunities and distinguishing characteristics between competiting brands

As discussions on experience design happened, the team would review competitive implementations of similar and competing digital experiences. I tracked metrics around competitor language (tone), features, user reviews, wait/load times and overall design.

User Personas

Investigation and definition of key customer characteristics

Workshops, metrics and heuristic evaluations provided important understandings of the Dooney customer. These personas helped keep design decisions targeted and engaging.

Fourteen different persona classifications were defined. This workshop effort not only helped reveal important customer characteristics, but it also opened up internal dialog resulting in evidence-based empathy for the Dooney customer.

Millennial Mom

Meredith Burns

Age: Late 30’s

Occupation: Small Business Owner

Status: Married (with 2 children)

Location: Savannah, GA

Income: ~$75,000 / year

Fashion: Traditional values

  • Online Shopping 70% 70%
  • Mobile Apps 85% 85%
  • Social Networking 90% 90%

Affinity: She always wants to look up-to-date, but not so fashion forward that she’s out of place.

Technical Saavy: The internet and social media are nothing new to her.

Attribute: She always makes time to shop, and there’s a thrill to knowing she got the best deal.

Attribute: She buys what she likes, and while finding the best deal isn’t her habit, it sure does help.

Attribute: She’s part of the sandwhich generation – she’s not only looking after her closely approaching-adult children, but now she’s having to check-in on her parents.

 

Dooney Design System

Common UI parts (Atomic) design and pattern libraries

The internal Dooney design team was quite adept at design and fortunately, a fairly defined style guide had already been produced prior to my arrival. The internal team had no problem thinking and discussing user interface design from the very small… outwards; towards more complex design patterns.

This was a great advantage and the collaborations were fun and done efficiently. Daily design review sessions stimulated large amounts of design feedback and opinions; some of which matured and stimulated design iterations. I led the component UI design effort and the design review meetings while maintaining a variety design artifacts (documentation). These artifacts ultimately circulated around to the engineering teams for implementation.

Content Design

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.

 

Embracing Change

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?

Example of source imagery (and size dimensions) scheduled to be used for this content isotope’s image slot.

Example of source imagery (and size dimensions) scheduled to be used for this content isotope’s image slot.

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.

Recap & Outcome

I worked on the ILoveDooney.com and the iOS native build design projects. The redesign of Dooney.com was the first of the three project efforts and we did deep dives into various user-centered design topics like competitive analysis, user personas, affinity mapping and user journeys to learn more about the Dooney business and gain important empathy for the Dooney customer. I joined this project almost at mid-point and was able to realign some of the workflow and Agile challenges that the project had been suffering from prior to my arrival. I’m delighted to say that I played a major lead role in getting the project back on track just prior to the 2016-17 holiday season (the launch deadline). It was a delight to serve and work with the Dooney team.

Dooney & Bourke makes high-end handbags and accessories, mostly for women but also for men. Dooney products are sold in department stores, online and by catalog (Glassdoor.com).

Web:
dooney.com

Size:
51 – 200 employees

Headquarters:
Norwalk, CT

Industry:
Consumer Products Manufacturing

Competitors:
Brooks Brothers, Vineyard Vines, PacSun

Revenue:
$25 – 50 million (USD) per year

Methodology
Agile / Scrum

Back-end System
Salesforce

Front-end Framework
Bootstrap 3.0 (modified)

Development
Offshore

I worked on the ILoveDooney.com and the iOS native build design projects. The redesign of Dooney.com was the first of the three project efforts and we did deep dives into various user-centered design topics like competitve analysis, user personas, affinity mapping and user journeys to learn more about the Dooney business and gain important empathy for the Dooney customer. I joined this project almost at mid-point and was able to realign some of the workflow and Agile challenges that the project had been suffering from prior to my arrival. I’m delighted to say that I played a major lead role in getting the project back on track just prior to the 2016-17 holiday season (the launch deadline). It was a delight to serve and work with the Dooney team.

Dooney & Bourke makes high-end handbags and accessories, mostly for women but also for men. Dooney products are sold in department stores, online and by catalog (Glassdoor.com).

Web:
dooney.com

Size:
51 – 200 employees

Headquarters:
Norwalk, CT

Industry:
Consumer Products Manufacturing

Competitors:
Brooks Brothers, Vineyard Vines, PacSun

Revenue:
$25 – 50 million (USD) per year

Methodology
Agile / Scrum

Back-end System
Salesforce

Front-end Framework
Bootstrap 3.0 (modified)

Development
Offshore

Amir/Rooban,
I just wanted to send a quick note. Shawn has been amazing on this project. He can design. He has a strong technical background. And he knows how to manage us. He’s good at providing his perspective and pushing back. The project is coming along well, and it wouldn’t be here without him. I can’t wait to see the site live. It’s going to be stunning.

Peter B.

Brand Strategy, Marketing and E-commerce, Dooney & Bourke

"The more engaged users are... the more functionality an application can sustain."

-Jakob Nielsen