A Japanese stationery brand.
Personal Project / UI Refresh
Here is a link to process file on Figma: Ohto layouts

OHTO, a Japanese stationery company.

They Specialize in unique pens, mechanical pencils, 3-in-1 multi-pens, and various stationery items. I use their products daily. Most of my purchases have always been on third-party seller sites. At some point in my usage, I had never been to their company site. To my surprise, the site looks like it was from the early 2000s. I decided to give the site a refresh.


To begin this project, I did some UI research. The sites that I checked out were E-commerce sites that are in this realm.

Competitive Analysis

The first bit of research I did was a competitive analysis of 3 similar brands.

The competitive analysis shows that there are standard structures for most E-commerce sites. Several dated elements are on the sites — most specific, the search & icons.


I wanted to focus on to be on the hero image. Their items operate on a grand scale, so they should display that way. Also, I set my sights on making the technology the pens use of a feature too.


The flow and balance of the elements come together well from sketch to the layout of the Grayscale wireframes. Everything is base off of a 4px baseline grid.

Hi-Fi Composition

The layout of the hi-fi mock-ups follows the basic structure of the wireframes. The colors are referencing the current site. Everything came together well to bring the site to a contemporary style.

Next steps:

I will include updates to the color palette, exploring more attractive options. Also designs for  mobile and tablet layout options. Lastly, a clickable prototype of the rebuilt website.

Thank you!

Other Projects