Logo –°reation

Logo –°reation 01.

The old logo Bonzai.jp had a certain feel to it but also was quite outdated, it had to go and open possibilities for new design.

Task

The new logo had to be modern, fun and playful, light. It was strongly requested to feature only text, no icons. The new lighthearted logo was supposed to easily fit the light and clean design that we were planing.

Decision

After lots of sketches and concepts we ended up choosing an awesome playful font, manually adjusted it slightly and gave it a striking red color which was defined as main brand color.

STARTING POINT

STARTING POINT 02.

The Bonzai.jp is a well established brand with a pretty big audience which allowed them to gather some statistics and choose the approach.

Mobile first

Since the majority of users are browsing from their smartphones, it was apparent that the only right approach to take was mobile first.

Mobile: 60%
Desktop: 27%
Tablet: 13%
Colors & Fonts

Colors & Fonts 03.

#f20000
R : 242
G : 0
B : 0
C : 0
M : 00
Y : 100
K : 0
#5e5e5e
R : 94
G : 94
B : 94
C : 62
M : 54
Y : 53
K : 25
#bcbcbc
R : 188
G : 188
B : 188
C : 27
M : 21
Y : 22
K : 0
#ffffff
R : 255
G : 255
B : 255
C : 0
M : 0
Y : 0
K : 0

Open Sans

Aa
Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Aa
Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Aa
Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Structure

Structure 04.

Clear Navigation

User Experience was a big concern so we started with preparing a sitemap that would show the general structure and define all the pages that are to be created.

This step is crucial, allows to save tons of time and avoid unexpected changes in scope or waste of resources later on.

Interface

Interface 05.

We had some constraints with the existing back-end, so most of the functionality was pre-defined but had some improvements to do on the UX part though our biggest task was to make the UI appealing and clean. Functionality and ease of use was top priority, the design had to be nice but subtle to keep the focus on the products.

Filters

Well organized and clean filtering allows to easily and quickly refine your search results.

Card

Product cards are very subtle and light, all the important info is neatly displayed but the key focus is on the product itself.

Shipping Calculator

Enter any weight or use a pre-populated product's weight, pick a country and a shipping method and get a detailed breakdown of the price.

The bid will be placed 5-6 minutes before the auction ends (if auto-extension of the auction is enabled) and 1-2 minutes before the auction ends (if auto-extension is disabled)

Place a bid

Place a Bid

Bidding is straightforward and quick - just enter an amount, check the breakdown, pick the type and place it!

Video Presentation

mobile design

mobile design 06.

The key version of the design is it's mobile version. The general approach here was to prioritize functionality and keep the design muted and subtle, use as much screen estate as possible. It was also requested to make it look like a native app.

Extensive Research

We've carefully examined the competitors, biggest auctions and marketplaces, as well as worldwide online shops to create the most effective design.

Card

The screen is packed with content but it's still easy to pick up every little detail and take actions.

Filters

All the filtering options are hidden in the side menu for quick access, also we made it very consistent with the desktop.

Menu

The side menu let's you navigate to various settings and info pages, add funds, log in/out, all the necessary stuff.

View money

You can not only see your current balance and top it up but also see it converted in each of the 3 available currencies.

Add Funds

It's super easy to fund your account - just enter an amount and do the rest securely through PayPal.

Other Screens

Want a website awesome like this?

Get in touch and let us know about your project.

Contact us