Website redesign for a challenger whisky brand.
Original role: Project management, wireframing, brief writing, workflow management, content management, liaising with stakeholders and client teams, copywriting, and handover documentation.
Revisited role: UX research, UX UI design
Context
The wider distillery group was moving from multiple legacy systems to a streamlined Magento 2 admin for all brands. This homogenized approach required a redesign using a set of built modules with customizations available inline with budget and timings.
The challenges
Implement the updated brand identity across digital assets and site styles
Repurpose existing content and reframe it within the new identity
Manage a team of designers, animators, and a freelance copywriter
Create handover documents for a waterfall development process
1
Gather goals and attitudes of stakeholders, client teams, and internal teams
Approach: Workshops and video calls to gather opinions on the functionality and prioritization of features and content for the new site.
Key findings:
Increasing revenue through the sale of high-value bottles over the standard range.
Space to include video and longer-form content about brand activations and events.
Increase email sign-ups to play into a larger ECRM strategy in development.
RESEARCH & ANALYSIS
2
Research competitor software and present the findings
Approach: Discuss features, structures, and content choices across brand competitors and drinks brands with parallel values.
Key findings:
Promotional space on the homepage for the latest release.
Tasting note videos are to be embedded on the site.
Link serves/cocktails to an opportunity to purchase a whisky.
3
Full audit of current site content and structure
Approach: Identify current issues with user journeys and site structure. Review existing content and site structure in line with the brand refresh. Mark content as a pass, requires development, or fail.
Key findings:
No CTA to link between the whisky products and the serving suggestion content.
Product collections mix whisky products with merch.
4
Define site navigation according to traffic data
Approach: Use Google Analytics to determine the most visited pages and most common user journeys through the site. Prioritise these in the ordering of the navigation.
Key findings:
The most visited page was the homepage, followed by the product page for the latest whisky release.
Large amounts of traffic came from paid social ads, directed to single product pages. At this point, the user dropped out.
DESIGN
5
Wireframe all page types across the site
Approach: Wireframe all page types following a module guide that placed restrictions on module usage across specific page types. Requiring a problem-solving approach. Where the built modules were unsuitable, cases were presented to stakeholders for custom-coded alternatives. Many iterations of wireframes were produced before sign-off from key stakeholders.
Key outcomes:
Flexibility key to homepage with promotional space at the header, link to news page, and direct feed from social. Ensures it is ever-changing.
The brand voice was a key part of the identity. Space for headlines and copy was imperative.
The homepage and product page (shown on the right) were two of the most complex pages. Requiring a balance of eccomerce, brand-driven, and lifestyle content.
6
Brief and manage creative workflow for a team of creatives
Approach: Manage a team of designers and animators to build a suite of over 130 digital assets.
Key outcomes:
Ensure the implementation of the brand refresh as per guidelines.
Create and present engaging briefs and support with creative feedback.
Ensure timings plans are kept to and the agency sign-off process is followed.
7
Brief and manage a freelance copywriter and individual involvement
Approach: Brief and manage a freelance copywriter new to the brand. Support in writing copy and microcopy, including product descriptions, forms and CTAs.
Key outcomes:
Create and present detailed, inspiring briefing packs for a remote working process.
Ensure all outputs adhere to alcohol guidelines, making edits where required.
HANDOVER
8
Ensure a smooth handover with thorough documents and organisation
Approach: Present detailed handover documents with thorough annotations as part of a waterfall development process to the client team.
Key outcomes:
Create a simple labeling system and content transfer for all digital assets and copy.
Work with the creative team to gather all required annotations.
TESTING
9
Audit the built site
Approach: Test links, journeys, content, and responsiveness on mobile and tablet. Record each issue within a collaborative document with the client team.
Key outcomes:
The planned ECRM strategy was behind schedule so temporary replacement copy for the sign-up page was required.
Banner dimensions were adjusted to improve the look on mobile.
ON REFLECTION…
Looking back at this project since becoming a UX designer, I am able to pinpoint the flaws with the project approach.
These are all based on the exclusion of the user.
Below I have followed a UX process to create several UX and UI design outputs that place the focus back on the target user.
The only user data made part of the research for the project was from Google Analytics traffic data. Although useful as a quantitative measurement, this data lacks depth. It doesn’t provide insight into the user goals or attitudes and therefore aided in a surface-level output.
Decisions about the UX of the redesign were based on internal and stakeholder goals and attitudes. The product is therefore flawed with bias until it has been validated by users.
Individual research artifacts were presented to the client rather than a wider view of the problems using an analysis tool. This could have aided in identifying patterns and onboarding stakeholders.
UX designers must educate stakeholders in the value of UX design. We can do this by framing the opportunities to achieve business goals through user-centric problem-solving, rather than dominating the page hierarchy.
APPLYING THE KNOWLEDGE
APPLYING THE KNOWLEDGE
Project scope
Through the implementation of user research and competitor analysis, this project will redefine the information architecture and the core whisky page for desktop and tablet.
The user
In the original process, the stakeholders and internal teams were often the ones guiding decision-making. For this project revisit, I recruited three whisky drinkers. Each performed an open card sort and usability test of the current site.
RESEARCH
Open card sort conducted with three whisky drinkers
Approach: Provide participants with cards of all content across the site and a stack of empty cards to add themselves. Users are asked to organise the content into categories and subcategories.
Key findings:
Participants had a negative view of premixed cans. They felt it portrayed bad-quality whisky. One participant placed these under a collaborations category, and the other two under news.
Each participant ordered the categories in different ways. Two placed whiskies first then shop. They said they wouldn’t be ready to buy a whisky until they knew more about the liquid.
Usability testing to gather feedback on the primary flow
Approach: Conduct usability testing of the purchase journey for new customers with three whisky-drinking participants.
Key findings:
Users can’t anticipate the difference between the 'Single malts’ page and the single malts shop page.
A user is unsure if the full range is on the single malts page.
Two users notice the sign-up offer banner after adding the product to their baskets. Once signed up, they said they’d, ‘…expect the code to be in my basket instantly. If not, I’d wait to make my purchase’.
All users are confused why a beanie hat has been automatically added to their basket. They feel like the promotion is being pushy, ‘Really it’s free marketing for them’.
Heuristic evaluation of new user purchase journey on competitor software.
Approach: Score the purchase journey of three competitor sites against UX and UI principles.
Key findings:
On the majority of software, the user must click on each individual listing to find product details.
If not already asked on-site load, age/confirmation of age asked on entry of shop. These require lots of scrolling for the user.
Banners above the top-level nav are conventionally used for promotions.
ANALYSIS
PAIN POINTS
There is often duplication of whisky products within a shop page and a content-rich page with more details about the liquid. This leaves users feeling unsure about where they should go to make a decision on their purchase and doubtful that they are viewing the full range of whiskies.
Users need to click into each individual product listing to guide their decision making.
Users feel negatively towards merch and premixed cans.
OPPORTUNITIES
Create a simple journey for users looking to purchase. A core page for all whisky products, with a link to the product pages to buy.
Product previews that include key details; taste, age, and strength.
Give context to secondary products (premixed cans, merch & barware) within the site architecture. Placing them alongside relevant content.
DESIGN
REDEFINING THE IA
Outcomes:
Simplified site architecture that saves the user time. Aiding the purchase journey by removing any duplication of whisky content.
Integrate secondary product categories (premixed cans, merch & barware) into relevant navigation items. Making for a smooth flow between brand-building content and eccomerce. Avoiding interruption of main purchase journey flow.
THE WHISKY PAGE
Outcomes:
Simplified interactive global and local navigation and footer with hover states.
Key decision-making information about each bottling is shown below the product image.
Hover states of images, buttons, and copy, to give focus and build brand personality.
Integration of sign-up information and input field after final product in the scroll.
Vertical scroll in line with desktop conventions and ease of use.
RESPONSIVE DESIGN
Outcomes:
Horizontal scroll of products and sign-up integration to aid with tablet ease of use. All other elements are fixed to aid with ease of navigation.
All hover states from the desktop design have been changed for usage on tablet. The required interaction is ‘whilst pressing’.
Interactive global and local navigation accessible as a hamburger menu.
Testing
I would next move onto a round of usability testing of my desktop and tablet prototypes. With these findings I can validate or invalidate aspects of my designs to continue the iterative design process described on the left.
Some particular points of interest are;
Testing the ease of the horizontal scroll on tablet.
The movement of secondary product categories (premixed cans, merch & barware) within areas of the site that aren’t eccomerce focused.
Integration of a sign up field within the page content rather than the navigation or footer.