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

ABOUT THE CLIENT
In short, Otakuchan.com is a retail experience created for fans of Anime, Games, Comics and Cartoons. 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.