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 used Slack for seamless dialogue and quick-fire solutions

Marvel was used for fast iterative prototyping and refinement

We used Adobe Creative Cloud for designing 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 →

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

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

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

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

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

Enrich

Comprehensive design for a large ecommerce platform, powering millions of sales every month.

  • Services
    Branding, UI/UX, Information Architecture
  • Date
    2015—
  • Client
    Enrich/So Brands

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

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

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

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

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

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