Role: UX/UI Designer (50% UX, 50% UI)
Responsive website
Tools: Sketch, Invision, Proto.io, Pen & paper
Time: 2.5 weeks
Overview
Jumpship entertainment is a boutique board game design company. Their aim is to craft award winning board games that can be played across all continents.
The Challenge
Funnel users to the kickstarter page in order to make a pledge to Jumpship’s new board game “Penny Wars”.
Promote awareness for Jumpship games and excite
new users.
Allow users to apply as a beta tester for Jumpship's upcoming board games.
UX Solutions
In order to funnel users to the kickstarter page, I needed to make sure that the call to action was clear and visible on each page. Using the one page one task rule to guide my users. I also added a static CTA on the sticky nav, this followed users down a page ensuring the CTA was never out of site.
Each page flowed smoothly and the contact form was fun and engaging. The contact page (below) portrays a letter being slipped into a glass bottle, and sent off to sea. The client was adamant about having a fun contact page. When users clicked the next button, it triggered an animation of a letter being put into the glass bottle. This added a sense of delight to a task that can often be boring for the user.
Allow users to sign up as beta testers for Jumpship’s upcoming board games by having a clear “sign up for beta testing” button which lead the users to a form.
Contact form with fun interactions. The bottle would bob up and down in the water as if the user is looking through a porthole in a ship.
UI
Our client wanted the site to be fun, exciting and unique for a wide range of users. As the name is Jumpship, the client wanted the visuals to be nautical.
UI inception sheet for Jumpship
My style tiles for Jumpship.
The client really liked the idea of having a nautical theme. When researching colours, I found that bright blue and deep blue are associated with confidence, positivity, professionalism and have a nautical feel. I really liked a play on the sea theme and as the sea is ever changing in colour, I wanted to have a gradient of minimal white into blues.
After presenting these two style tiles, the client chose style tile on the right. This was also my favourite, it’s playful, the buttons are rounded and has three solid colours.
The font used here is avenir which is a sans serif, keeping the text clean and simple.
My illustrations for Jumpship
I created unique illustrations for this project,. Small, delightful animations appear throughout the site. From a small swaying boat, to air bubbles coming from my "Scuba Steve." Staying true to the nautical theme. The illustrations invite the user to continue exploring the deep sea of Jumpship.