Redesign interface for an O2O marketing solution application

Recreated the mobile app experience and UI system for iShapon

While the iShapon team was improving their IoT device, I redesigned their app experience and created a new UI system.

Linctronix is an Internet of Things (IoT) software solution provider, and iShapon is their mobile app product that provides an O2O marketing solution by connecting the app to their Bluetooth code reader. By placing mobile phones near the reader, users are able to earn and redeem reward points or coupons in-store. In 2017, while the iShapon team was improving the device itself, they reached out to us and hope to enhance their app experience and create a UI system.

My Role

As the UX/UI designer in this project, 

  • I worked closely with the product manager and the iShapon’s engineer team to define and solve the current issues in terms of iShapon’s app experience.

  • I also led the design team to create app pages and define the app design system.

TEAMS

Product Manager, Designers, Developers & Engineers

CLIENT

Linctronix Ltd.

Pre-creation

Looked into problems of the existing app

Since the iShapon team wanted to add features, I also looked into the existing app experience. We eventually found some significant issues in the information architecture.

old-ishapon-app-pages

Key Improvements 01

Reorganized information under the hot event page

There were many features under the hot event that users do not expect to be there. To be specific, it doesn’t make sense that stores and setting pages can only be found under the hot event page. Thus, I proposed that store and profile setting to be individual doorways.

Key Improvements 02

Added filters instead of putting items into different pages

People usually don’t remember the status of all events. So that means users won’t expect to find an item on the expired page while they have no context of an exact expired date.

New information architecture —

More doorways on Level 1, less information on Level 2 &3

IA-final

App interface

Recognizable card design

I've created various shapes of cards to differentiate item types. So that when users toggle between pages, they can easily recognize items.

additional-info-1

Page transitions

Highlighted page hierarchy with z-axis transitions

I had level 2 & 3 contents on top of level 1 as an overlay so that users can always go back to leave one by clicking the close button.

additional-info-2

other transitions

Applied transitions to smooth the app experience

Following the material design methodology, I applied motion transitions to help users orient themselves in the app and aware of system status.

Animation whenever the app starts

Loading transitions when the system is loading items

Parent-child transitions for the filter feature