Twitter Instagram Pinterest Books

Hopscotch

Branding, responsive ecommerce website, and printed collateral for a London based lifestyle brand.

  • Services
    Branding, Development, Print
  • Date
    2014—
  • Client
    Hopscotch

A design-led lifestyle brand. Hopscotch is focused on minimal simplicity, offering a curated range of homeware, beauty, jewellery, stationery and accessories.

Signature product ranges. Hopscotch has also developed a signature range of hand poured soy candles, 100% natural skincare, and minimal geometric jewellery.

Responsive ecommerce store. We designed and built an online platform for the brand. It offers a rich shopping experience on desktop and mobile, giving Hopscotch flexibility and powerful features.

sj-projects-hopscotch-logo2
brand development

Designing a distinctive minimal identity

We helped design a flexible identity that reflects the values of the Hopscotch lifestyle. It’s a curated, design-led aesthetic that puts product front and centre. The core identity is black and white, conveying a sense of luxury and quality. The branding is reductionist in style, with plenty of confident white space and focus on the qualities of materials.

sj-projects-hopscotch-business-cards2
print

Minimal, desirable packaging

Hopscotch has a wide collection of signature products that are made in their East London studio — from their flagship soy candles, to all natural beauty products, necklaces, and stationery. We designed the packaging so it fits the minimal and structured product design. Careful typography and considered layouts makes the packaging feel special, and reinforces the Hopscotch brand at every stage.

reductionist design

Part of what makes the products feel special is the attention to detail. Every line, dot, and piece of text has been carefully considered and placed. White space is another important element of the branding and packaging, which helps set the tone of voice and luxury appeal.

reductionist design
Designing with restrictions

Designing the labelling for Hopscotch’s signature range of beauty products highlighted a number of challenges: When approaching the design, we had to ensure all the necessary legal elements and requirements were met. Fitting all these details into a fixed small space meant we had to pay attention to the minutiae of typography and design. At the same time, the labelling still has to look beautiful, so customers are proud to have the products on their bathroom shelves.

Designing with restrictions
nail-varnish-hopscotch © hopscotchlondon.com
user experience

Making it easy to shop online

A crucial part of shopping online is making it easy. Reducing any friction within the user journey means less frustration and less abandonment. When designing and building Hopscotch’s online store, we made sure important information is clear and accessible, and key actions are highlighted throughout the site.

responsive design

Optimising the mobile experience

It’s increasingly common for users to shop on their mobiles. People are five times more likely to leave a site that’s not mobile friendly, so we used a number of strategies to optimise the mobile site for maximum engagement. This includes putting the primary shop navigation front and centre, and making images large and immersive. All photography is optimised for high definition Retina displays, so products look super sharp on all devices.

subscription model

Building a subscription service

This year Hopscotch launched a subscription service, giving customers the chance to get surprise products delivered each month. We designed and built a new section to the site, giving Hopscotch all the functionality to sell, process and automate subscription products. The subscription model demands a different way of thinking than a traditional retail model, and so requires a different approach to design. We combined an intuitive user experience with a layout and user interface optimised for conversion.

sj-projects-hopscotch-box2
Clear options

Presenting the two subscription tiers side-by-side allows users to compare and choose the option that's right for them. Having big badges or pointing arrows isn't right for the Hopscotch brand, so we've used white space and thoughtful photography to help encourage users to choose the premium option.

Clear options
time based engagement

There's a drive in subscription marketing in the lead up to the ordering deadline each month. For the primary call-to-action area of the page, once users have been persuaded by the great content, we've built a countdown timer that encourages completion. Clearly seeing time is running out creates a sense of scarcity and appeals to our natural instinct of loss aversion.

time based engagement
reducing anxiety

A big part of any brand is building trust with users — whether in store or online. Before signing up to an ongoing subscription service, it's natural for to users have lots of questions. We designed and built a very simple section to reduce the anxiety of customers by showing useful information presented clearly and transparently.

reducing anxiety
hopscotch-beauty-banner © hopscotchlondon.com
Targeted marketing

Part of the experience of buying from independent brands is having the personal touch — added value you wouldn't get from corporates. We designed and built a series of targeted email campaigns that automatically send Hopscotch customers personalised emails on their birthdays, which goes a long way to retaining customer loyalty and creating habitual behaviour.

Targeted marketing
collaborations

We've collaborated with Hopscotch, designing a series of two-colour riso prints on 240gsm Munken Polar. The designs are focused around our shared love of geometric simplicity, and are exclusively available to buy from Hopscotch.

collaborations
follow @hopscotchlondon
How we worked with the team

We use Slack for seamless dialogue with clients and developers

Marvel lets us prototype and refine, with contextual presentation

We use Adobe CC for designing and animating assets

We're always looking for new challenges and experiences. Whether you're a tech startup, one man band or large established agency, we'd love to hear from you. Get in touch →

Jaggu

Branding and digital design to help a machine learning company grow their already impressive client list.

  • Services
    Brand identity, UI/UX Design, Strategy
  • Date
    2017–2018
  • Client
    Jaggu

Lexigram

Branding and digital design for a Silicon Valley healthcare startup that manages data for over 50 million patients.

  • Services
    Branding, UI, UX
  • Date
    2016
  • Client
    Lexigram

Models Own

Responsive ecommerce website design and digital strategy for a cosmetics brand looking to expand.

  • Services
    UI/UX, Information Architecture, Strategy
  • Date
    2015—
  • Client
    Models Own / SoBrands

Augmint

Building a brand for the anti-Bitcoin; a new stable cryptocurrency that's changing the way we think about crypto.

  • Services
    Branding, UX/UI Design, Strategy
  • Date
    2018
  • Client
    Augmint

Tom D Morgan

Personal identity, website design/development, and printed collateral for a British photographer.

  • Services
    Branding, UI, UX, Development, Print
  • Date
    2015—
  • Client
    Tom D Morgan

Blanco

Strategy and responsive ecommerce design for the multi-national fashion brand based in Madrid.

  • Services
    UI, UX, Information Architecture, Digital Strategy
  • Date
    2015–2016
  • Client
    Blanco/SoBrands

Pharmica

Brand identity and responsive ecommerce website design for a London based digital pharmacy.

  • Services
    Branding, UI, UX, Consultation, Strategy
  • Date
    2015—
  • Client
    Pharmica

Intervention Architecture

Branding, responsive web design and printed collateral for an architecture practice based in Birmingham.

  • Services
    Branding, UI, UX, Development, Print
  • Date
    2014—
  • Client
    Intervention Architecture

Tom Beldam

Branding, responsive digital design, and build for a wildlife cinematographer that has a client list including BBC and Disney.

  • Services
    Branding, UI, UX, Development, Print
  • Date
    2017
  • Client
    Tom Beldam

Element.ly

Brand creation and responsive web design for a new digital cycling and gear magazine.

  • Services
    Branding, UI, UX, Strategy
  • Date
    2014
  • Client
    element.ly

MeFromTheStart

Brand identity, iOS app and responsive web design for a startup bringing privacy to shared memories.

  • Services
    Branding, UI, UX, Strategy
  • Date
    2015
  • Client
    SoBrands

High Life Tailored

Brand identity, responsive ecommerce website design, and printed collateral for a unique men's tailoring company.

  • Services
    Branding, UI/UX, Development, Print
  • Date
    2015
  • Client
    High Life Tailored

MedExpress

Responsive ecommerce website design and marketing for a digital doctor and pharmacy based in London.

  • Services
    UI, UX, Consultation, Marketing
  • Date
    2014—
  • Client
    MedExpress

Netball Scoop

Responsive web design for a global digital Netball community and magazine.

  • Services
    UI, UX, Information Architecture, Strategy
  • Date
    2014
  • Client
    Netball Scoop

The Invention Works™

Branding and printed collateral for a 3D printing startup based in London.

  • Services
    Branding, System Design, Strategy
  • Date
    2013–2014
  • Client
    The Invention Works

Pressto

Branding and responsive web design for a unique service that helps share content across multiple online channels.

  • Services
    Branding, UI, UX
  • Date
    2013—2014
  • Client
    Pressto

Full Fact

Responsive web design, consultation and printed collateral for a political fact checking not-for-profit.

  • Services
    UI, UX, Information Architecture, Consultation, Print
  • Date
    2013—
  • Client
    FullFact
Your next project?

We're always looking for new challenges and experiences. Whether you're a tech startup, one man band or large established agency, we'd love to hear from you.

hello@studiojubilee.com