The Nimble Press

An app like experience on the web

Overview

The Nimble Press is a direct to consumer company who wanted a fun and interactive way for customers to shop and customise their juices online. It is important to provide a smooth native app like experience for mobile users on the web platform.

My Role

  • Branding
  • Wed Design
  • Illustration
  • Interaction Design
  • Front-end Development

Tools/Technologies

  • Sketch
  • Principle
  • SCSS
  • Javascript
  • Vue.js
  • Anime.js
  • Hammer.js
  • Git

Project Goals

  • 1 Allow users to choose from pre-made juices and customise their own recipes.
  • 2 Create a native app like experience that lives on the web with the future goal of turning it into a progressive web app that can be downloaded to a users home screen.
  • 3 Use the principles of animation to bring the app to life and build an affinity between the users and the product.
  • 4 Provide a fluid and interactive experience that gives users confidence in the product and stands out in their memory.

Visual Design Language

The visual design takes inspiration from cartoons and mobile games to create a fun interface that feels cute and playful. Utilising clean vector art with the illusion of depth created by the shadows and highlights helps communicate the hierarchy as well as draw the user in for a more immersive experience.

Colour Palette

#fd7020
#50dbbb
#9c75c5
#ffffff
#1e1e1e

Interactive Prototyping

Using Principle for this step allowed for a quick way to test interactions and pinpoint the most valuable areas to apply fine tuned motion.

Personality Through Motion

Fulfilling the product vision meant utilising a combination of CSS, SVG and Javascript powered animation in a way that creates natural feeling momentum that makes sense and illustrates the flow of data to the user. Paying close attention to the animation principles such as anticipation, follow through and inertia combined with careful attention to timing was key in achieving this.

Challenges and Lessons Learned

  • 1 Due to the heavy use of SVG encountered several issues such as confilcting ID’s in the SVG defs element and different types of SVG Bezeir curves not tweening correctly during animations. The solution was to study the SVG specifications in more detail and utlise tools such as BoxySVG and the code editor to acheive a finer control over the SVG shapes.
  • 2 As this was my first project using Vue.js I had an initial slow point getting up and running. The solution was simply to continue learning as well as refactoring my codebase as my knowledge increased.
  • 3 Working with Vue single file components is a great way of seperating concerns and helps keep a complex project easy to work with. However it does have the additional overhead of either repeating some functions and styles several times or deciding which parts should live in a global context and only be referenced in the indivdual components.