foreground-image

Design Tshirts Store graniph

We helped one of Japan’s hottest fashion retailers reach a growing mobile customer base.

Download the app
  • design-icon Created with Sketch.

    Design - Mobile app UI / UX design.

  • research-icon Created with Sketch.

    Research - Usability testing, feature validation.

  • development-icon Created with Sketch.

    Development - iOS and Android app, Ruby on Rails web service with API.

  • Support - On-demand support relationship spanning 7 years.

background-image background-image
  • design-icon Created with Sketch.

    Design - Mobile app UI / UX design.

  • research-icon Created with Sketch.

    Research - Usability testing, feature validation.

  • development-icon Created with Sketch.

    Development - iOS and Android app, Ruby on Rails web service with API.

  • Support - On-demand support relationship spanning 7 years.

Download the app
graniph-screens

graniph (lower-case ‘g’) is Japan’s art apparel pioneer, with over 100 stores in Japan and the Asia-pacific region.

They wanted a way to showcase their super-fast-fashion to the always-mobile Tokyo shopper, in the process driving customers to their online and physical stores.

Tacchi worked closely with graniph’s in-house online services team and third-party e-commerce provider to create iOS and Android apps and web service which integrate with the existing e-commerce system to display daily new releases, real-time per-store stock levels, news and promotions, and a GPS-enabled store locator.

The result was one of the first apps from a nationwide apparel brand in Japan and a marked increase in customer engagement and online sales.

The relationship with graniph continued for over seven years, during which we continued to update the apps and maintain the system integrations. In 2017 they were acquired by a private equity firm who brought maintenance of the apps in-house.

iOS and Android App Design and Development

graniph envisioned their customers coming back to the mobile apps every day to check the new product releases. We knew that to achieve this would require us to design a UI that provided immediate access to the new products as a quick effortless microinteraction, without compromising the deeper, slower interaction of browsing the extensive catalog of products. Therefore, with graniph's team, we moved quickly from static designs to rapidly iterated on-device prototypes to ensure we were able to test new ideas in real-world use and make necessary improvements to the design.

graniph-ios-and-android-t-shirt-search-screens pointing-hand-with-red-manicure
graniph-app-usability-testing-interview-conducted-at-graniph-store
Our research specialist conducting an interview

We take the differences in native UI between mobile platforms very seriously at Tacchi, and so another core focus of our design process was on providing a native-feeling experience for both iOS and Android users, staying true to each platforms' design ethos and UI guidelines while maintaining graniph's visual brand identity.

To ensure the performance of the design was optimal, we conducted feature validation and usability testing at various points both pre-and-post release. This enabled us to ensure that we were providing features that were useful to customers, and that they were able to carry out a variety of tasks with the app without trouble.

Key features

  • Quick access to daily new product releases.

    graniph-ios-app-screen-access-to-product

  • Category based browsing of entire product catalog.

    With swipable images, sizing, real-time store-specific stock checker enabling customers to check that their desired design and size are available in their chosen graniph branch.

    pointing-hand-with-red-manicure graniph-ios-app-screen-category-based-browsing

  • Passthrough to online store for purchase of products.

    graniph-ios-app-screen-passthrough-to-online-store

  • A GPS-enabled store locator with Google maps integration.

    Including display of the closest store with walking distance display and directions.

    graniph-ios-app-screen-gbs-enabled-store-locator

  • Favourite product list management.

    graniph-ios-app-screen-favorite-product-list

  • Product search based on keyword, color, and design style.

    graniph-ios-app-color-select graniph-t-shirt-design graniph-ios-app-search-bar

  • News article list and display.

    graniph-ios-app-screen-news-article

  • Push notifications for distribution of coupons and news updates.

    graniph-ios-app-screen-push-notifications

  • Bilingual interface for Japanese and English.

    graniph-ios-app-screen-english-japanese-interface

Web Service and System integrations

In order to provide a fast stream of data and images to the apps without overcomplicating the existing service operated by graniph's e-commerce partner, we decided it was necessary to build a web micro-service. This was built using Ruby on Rails.

graniph-app-system-integration-diagram

Key features

  • graniph-ecommerce-system-to-web-service-icon

    Integration with EC service to gather product, stock, store, news etc data automatically.

  • web-service-to-app-icon

    Provision of data for the apps via a JSON based RESTful API.

  • management-of-user-sessions-icon

    Management of user sessions for storage of favourite products, stores, push notification preferences and more.

  • caching-and-optimization-of-product-images-icon

    Caching and optimization of product images for display on mobile devices, ensuring fast display of images and low bandwidth use.

  • sending-of-push-notifications-icon

    Sending of push notifications to interested users through Apple Push Notification Service and Google Cloud Messaging.

Ongoing support

Building close and long term relationships with our brand partners is hugely important to Tacchi. For over seven years we maintained and supported the apps and web service, and collaborated with graniph to improve them. We also consulted for them on a wider range of technology and design issues, enabling them to plan for the future, before handing the projects over to their internal team upon their acquisition by a private equity firm in 2017.

Check out some of our
other projects

Let's talk about working together!

Tell us a little about your business and what you'd like to achieve. We'll be in touch to follow up as soon as we can!