OTAKUCHAN

How to build the fastest and the most SEO friendly eCommerce for Anime fans.

Objective

To Migrate from WordPress and Release a New Look and User Interface For an Online Anime Retail Store.

Services provided

About the client

Otakuchan logo

In short, Otakuchan.com is a retail experience created for fans of Anime, Games, Comics and Cartoons.

Otakuchan brands

Otakuchan.com was started to create one spot for all otakus that are fans of any type of art from Anime, Games, Comics or Cartoons, and they can find it all in one website.

Delivery

Otakuchan wanted to move away from WordPress and use modern web technology to achieve a truly outstanding speed and SEO results, which is extremely important in the highly competitive eCommerce world.

In order to give it a performance and user experience boost, they decided to use GatsbyJS on top of their Shopify web shop.

Beside that, they also wanted to give it a new look and feel, that will enable a few new functionalities to make the buying experience even more pleasant and effective.

Our plan for the whole app update was to:

  • Reframe the Interface

  • Boost Page Performance

  • Enhance User Experience With New Design

  • Add New Features and Functionalities

Step 1 Reframe the Interface

At the beginning we had to prepare the User Interface for new functionalities and improvements, like sorting and filtering. We were also updating the entire Header section in both web and mobile versions.

Step 2 Improve the App Performance

We decided to do all the sorting (by product add date, title, price, etc.) on the Client Side, so all the information gathered from the server (product data, etc.) was appearing in a flash.

Then we built, one by one, pages for each and every filter, category, and product.

Step 3 Enhance User Experience With New Design

Otakuchan is working on Shopify, and all the frontend customization was a double challenge, as Shopify prefers clients to use their internal solutions.

After Receiving new look and feel designs from Otakuchan, Daniel - our Gatsby developer - has been working on the entire interface rebuild. Designs were also prepared with further app scalability and improvements in minds, and that led to the final step.

Step 4 Add New Functionalities

As a last step, we’ve built and added a few new functionalities, for example:

  • Registration
  • Login & Orders History
  • New Mobile Menu
  • Sorting & Filtering
  • Web and Mobile Header Update

One of the “standing out” functionalities was the Cart. Instead of making it on a separate page, we made it sliding from the right, so you could walk around the shop, add products, and see what's going on in the cart in “live” mode.

Outcome

After all the improvements from the UI reframe, through designs into scaling the app with new functionalities, we’ve arrived with the brand new website ready to be used by the first anime fans.

Thanks to Netlify Deployment we could save additional costs.

https:// www.otakuchan.com
Otakuchan
https:// www.otakuchan.com
Otakuchan
https:// www.otakuchan.com
Otakuchan
https:// www.otakuchan.com
Otakuchan

Technologies used

  • Gatsby JS
  • Headless Shopify
  • Netlify
  • React Router
  • React Toastify
  • JAM Stack eCommerce

Quote from a client:

The way they get things done is unique. Everything works excellent so far and the website is much faster and beautiful than before.

Francisco Pena
Francisco Pena. Founder & CEO