Anko Retail

My contribution

I worked with Anko as their primary e-commerce designer and developer for 11 months in 2018. Alongside considerable design and development work on the site, I transformed their blank-slate template into a high-performance e-commerce machine, running A/B tests and feeding analytics back into each new design.

I worked closely in Google Analytics and Google Optimize to decide where to take the site next, and reviewed recorded screen-share sessions from real shoppers on UserTesting to fold their feedback straight into the store.

*Anko closed all of its US based stores due to COVID-19.

Conversion funnel page redesigns

I designed, wrote and built 9 unique editorial and event pages, 14 unique category pages, the home, about, sustainability, factory transparency, careers, find-a-store, cart and checkout pages, the category and product templates, and custom components throughout. Here’s a selection:

About page transformation

When I started at Anko, their about page looked like it was made in 1990. I created a mobile-responsive design and layout that complemented their in-store signage and brand guidelines, sourced and edited most of the assets, and wrote much of the copy.

British English translator

Anko is an Australian brand, so its product database was full of British spellings (like colour or realise). I wrote this script to Americanize the spelling and units across their products.

function translateEnglish(fullText) {
    // preserve the original text to test against the updated string
    let newStr = fullText;

    // split all words into an array, discounting HTML tags
    let tagsToSpaces = fullText.replace(/(<([^>]+)>)/ig, " "),
        wordsToCheck = tagsToSpaces.split(' ');

    // check each word against the spelling-difference lookup table
    wordsToCheck.forEach(function (elem) {
        let formatted = elem.toLowerCase();
        formatted = formatted.replace(/[^a-zA-Z ]/g, "");

        if (spellingDifferences[formatted]) {
            let anythingRemoved = elem.replace(/[a-zA-Z ]/g, "");

            // AUS English word found: replace it (keeping any formatting around it)
            newStr = newStr.replace(elem, spellingDifferences[formatted] + anythingRemoved);

            if (debug) { console.log(elem + ' => ' + spellingDifferences[formatted] + anythingRemoved) }
        }
    });

    return newStr;
}
// trimmed excerpt