Case Study: Can a Brand Website Redesign Effectively Provide for both B2B and B2C at the Same Time?
--
Note: Project under NDA
As a project still under NDA, I maintain our client’s anonymity and do not share sensitive intellectual property in this case study. Images of deliverables are deliberately limited and may have sensitive information obscured.
The tl;dr
This is going to be a long form case study, so here’s the scoop before I dig in.
Project objectives: Core brand website redesign and digital ecosystem strategy to drive brand engagement and increase conversion in the professional hair and beauty sector. Our client brand commands a third of the global market with a $5bn+ annual turnover.
Conclusion: Provided a design solution that simplified user journeys around a central hub website while providing a personalised experience for two distinct yet interdependent user groups; Hair Professionals and End-Consumers. Leveraged user generated content to provide a platform connecting the professional hair community with their End-Consumers, offering them value in exchange for brand engagement, conversion, loyalty ultimately increasing basket size. Utilised user research and developed a partnership with SEO specialists to create a dynamic intent Information Architecture model that increased findability performance by 600%.
My roles: UX Designer owning user research, information architecture, UX strategy & design, content strategy and workshop facilitator roles
Now to the more nuanced questions of why and how…
The Full Story
Business Goals
After 135 years in existence as a household name, the client brand had decided that, and I quote the MD, “it was time to transition into a consumer facing company”. The transformation was to be embodied in the restructuring their brand ecosystem and through the redesign of their core website .
The sales model was unusual; B2B2C with many stakeholders split into two primary target audiences: Hair Professionals (Stylists and Salon Owners) and End-Consumers (salon clients).
Business goals were to convert more salons, independent Hair Stylists and End-Consumers to the brand, increase brand awareness as the authority on hair color, while increasing the number of salon services and the average value of each service.
Project Vision
The team were challenged to create a core brand website that functioned as a central digital hub flowing out to meaningful journey closes over various channels within the brand’s digital ecosystem, with recommendation on strategy over the entire ecosystem.
The client hypothesised that business goals would be achieved by identifying, targeting and serving target user groups with personalised journeys and content.
Challenges & Constraints
The brand’s digital ecosystem of websites presented a fragmented web presence over multiple domains, all without a consistent url structure. While the brief was to recommend a restructuring of the ecosystem, some websites were to remain separate urls and distinct design projects beyond the scope of this project presenting a challenge for us to provide smooth user journeys between them.
Process
My process was based on Dan Nessler’s double diamond revamped blueprint. Dan took the Design Council’s classic design process and worked into it to provide a more detailed, versatile and very practical design process model.
Learn Early, Learn Broadly and Keep Learning
Kick-off Workshop
A good kick off can establish the essential bedrock that underpins subsequent project developments. For this project I facilitated a 3 hour workshop at the client’s Geneva offices with seventeen client stakeholders, largely global VPs and Directors. The aim was to gathering brand wide team inputs and combine expertise to define a shared project vision within the broader business context. A lively Q&A session was followed by group breakout when teams ideated solutions to key user and business problems embodied in two problem statements. The problem solving exercises were generate any solutions that might limit the value of the subsequent discovery phase, but instead share domain knowledge across stakeholders, facilitating communication between otherwise disparate factions around the core aims.
It was the first time that many of the stakeholders had met each other and the result was a degree of alignment around the project within an expanded business context that would have not otherwise been possible, surfacing numerous relevant business critical findings in the project’s relationship to various other simultaneous brand initiatives. We gathered assumptions and identified questions that my subsequent user research should answer.
The workshop received exceptional feedback and the client was vocal in their assertion that my facilitation solidified their trust in my team to provide excellent project outcomes.
Research
Triangulation between qualitative and quantitative: stories before data
UX Researcher colleagues carried out a jobs-to-be-done research piece analysing user needs for hair professionals and end-consumers where a total of 31 needs were evaluated by 1575 survey respondents in the USA and UK. These findings were triangulated with bespoke qualitative research carried out by myself:
a) Semi-structured voice of the consumer interviews conducted remote and in-person with customers of the brand and its competitors
b) Contextual ethnographic research with London users
c) Semi-structured voice of the consumer interviews with brand loyal hair professionals at the brand’s world standard professional hair school in London
Research goals were to gain and understanding of the struggles, behaviours, expectations and motivations of the two user groups around professional hair brand websites; to find out why and how users interact with them, and to answer further questions raised during the stakeholder kick-off workshop.
UX benchmarking
During the research phase the usability of the existing website was benchmarked through moderated task analysis and a ‘quick and dirty’ (time and budget for benchmarking was limited) system usability score was aggregated. For the latter I eschewed the traditional SUS score for the first time in favour of the more reliable Supr-Q method.
Business research
A granular understanding of business goals and state-of-play over wide range of related initiatives and the brand’s ecosystem of sub-brands, both in-house and with contributing creative agencies was achieved through extensive interviews in Geneva and remote with owners of key business nodes within brand’s digital ecosystem, as well as contributing content generating creative agencies.
Key findings:
- Both user groups primarily use hair pro hair brand websites to assist product judgement and to keep abreast of developments in the field. For discerning End Consumers this how they meet their specific individual hair needs, for Hair Professionals this is crucial to best provide for client requests to maintain and grow their careers
- Hair professionals mostly work for themselves, often renting a chair in a salon, so maintaining and developing their client base is a daily concern. Sharing their work on social media is crucial to maintain and grow Hair Professionals’ businesses and individual careers, and they consider the advocacy of their work by respected brands on social media a huge asset.
- Discerning End-Consumers using pro-grade products looked to the Professional Hair community online and in-person for advice and on products’ suitability for their individual hair needs.
- User generated content was performing 500% better than professionally generated content
- Product details pages were where the majority of users landed, and received more than half of all page views
HMW
So, how might we help hair professionals maintain and grow their practice and assist them in their goal to help end consumers to look and feel the way they want?
Information Architecture
Content audits of hundreds of pages, as well as an SEO audit were carried out by external specialists Performics and by our in house SEO wiz Myrto Paraschaki. A high percentage of near duplicate and archival pages were found. Definitely time to do some weeding in this garden!
Talking of gardening, card sorting was carried out using Optimal Workshop’s Treejack in moderated interviews to get the stories behind users’ taxonomic decisions.
While some clear areas of taxonomy emerged, the results posed a challenge…
Problem: Users exhibited diverse mental models
Solution: Multiple mental model navigation IA model
Users navigate through diverse mental models, which changed depending on their contextual needs. A professional searching for colour mixing ratios to achieve a specific look for a client who is waiting in the chair has very different needs to a consumer seeking a permanent hair colour product that will work on her particular hair type.
My solution was to offer users with differing mental models journeys to their goals via a semantic search intent site navigation model. This afforded users multiple routes to their destinations with minimal click depth; various routes to fit their various mental models. The taxonomy was informed by keyword search volume findings that was enriched and contextualised during qualitative research.
The IA solution was evaluated in moderated remote and in-person testing using Treejack with excellent results giving an a 600% success rate increase over the existing site benchmarks.
Ideation: Problems and Solutions
I dug further into the problem space to find intersections between user problems and business goals, generating further solutions. These features were devised in paper sketching sessions with my UI Designer colleague Rita Fox, developed a little further in the digital realm then mapped by technical effort over user value by the cross-functional team in feature prioritisation workshops to define which of the potential challenges we would then work to realise.
Follows are a few design challenges and their solutions.
1. User generated content and professionally generated content share the stage
The Problems:
a) During a business research interview with one of the brand’s content creation agencies I discovered that user generated content (UGC) was performing 500% better than expensive professionally generated content (PGC).
b) Hair professionals want to align themselves with respected brands to validate and/or elevate their professional status to maintain and grow their client base and currently use social to do so. The brand already had a hugely popular and well curated Instagram feed with very high engagement and high brand hashtag equity. Hair Professionals were successfully hashtagging the brand in their posts to publicise their work and connect with clients and other pros.
The Solution:
The concept was to leverage this user engagement by presenting curated examples of the products in use high in the page hierarchy, particularly on product detail pages, generating an brand/user engagement cycle as hair pros publicise their inclusion on the brand website across their active social feeds, in turn driving traffic back to the .com site. This provided a balanced value exchange; professionals got valuable advocacy from the brand and the brand crucial advocacy from real users. This drove honest pro hair community engagement which in turn validated the products to End-Consumers far more effectively than review tools.
2. Provide search intent relevant content dynamically on webpages
The Problems:
a) The distinct user groups want content that is relevant to them and their search intent while some content is relevant to both groups
b) 100% dynamic content would trash SEO
The Solution:
Provide content that the user is most likely to find value in while driving organic search engine ranking by providing dynamic editorial content that is cross linked throughout the website, deployed via a CMS content tagging system. The dynamic content would be anchored by leading paragraphs of static text that was fully search crawlable optimising pages within search rankings.
3. Complete yet personalised brand offer from the product detail page
The Problems:
a) While the homepage is traditionally the part of a website that presents as full a brand offer as possible, our users weren’t landing on the homepage and rarely visiting it.
b) The two user groups have very different needs and goals
The Solution:
Personalised content for each user group on product detail pages perform two key functions; provide for the users’ product information needs while also presenting a brand offer that’s relevant to specific user groups.
Discovery: Through strategic page layout & content strategy SEO and UX can be best friends after all
To maximise page visits I collaborated with our SEO specialists to develop page layouts and provide the brand an SEO informed content strategy to provide high user value at the same time as giving webpages the best chances in search rankings, ultimately giving the most people possible the chance to benefit from the content.
Rising Challenges
A challenge that rose during feature scoping and prototyping was around the degree of personalisation that we should and could provide. The brand had the assumption that each user group wanted totally different content, without much overlap. It would have been prohibitively inefficient in terms of tech resource to simply build separate sites for each user group, or provide a dynamic IA, and there was the massive potential challenge to the brand’s content generators to provide equally for both user groups.
Presented with user research findings the client agreed that discerning End Consumers using pro grade products looked to editorial content aimed at hair pros, and therefore much content could be used for both user groups. To extend the economy of design, the multiple mental model navigation IA model provided for both user groups equally.
Conclusion
The final website is yet to go live (hence limited disclosure of information here) but given usability tests against benchmarking our new experience increased findability by 600% task success at 10 x the speed of the previous website experience. We hope that we get the chance to dig into live site behavioural analytics when it goes live but we feel that we answered user needs effectively and designed a website that provided for both B2B and B2C simultaneously.
Among all the hugely talented individuals and teams that I worked with on this project, a key learning opportunity for me during this project was provided through working closely with SEO specialists than I’ve had the chance to do so before. I thank them for teaching me how to both provide high user value at the same time as giving webpages the best chances in search rankings, ultimately giving the most people possible the chance to benefit from the content.
I’d like to thank my good buddy Ellie Walis for her adept and good humoured Delivery Management, the talented Rita Fox for consistently fun and productive design collaboration, Myrto Paraschaki for both applying her incisive SEO knowledge and teaching me how the UX and SEO can really help each other without compromise, and the Atomyc development team for incorporating the demands of this technically ambitious project into their workflow.