UXUI Transformation
iShopChangi
Role
Lead Designer
Discovery & Research
High-fidelity Visual Design
QA Testing & Validation
Tools Used
Sketch, Adobe Photoshop,
InVision, Jira, Miro
Brief
Digital transformation of iShopChangi.com of revamping their entire user experience to visual design for responsive web, to cater the needs of busy travelers and non-travelers. To implement a future-ready omnichannel shopping experience to provide flexibility and scalability.
Awards
-
Gold - Best use of UI/UX Design
Asia eCommerce Award 2020 -
Gold - Best use of UI/UX Design
The Digies Digital Award 2020
The Process (Involved throughout)
Discovery
-
Site Audit
-
Competitor Landscape
-
Goals & Ambitions
-
User Journey
-
Creative Exploration
Delivery
-
Wireframe
-
Visual Design
-
UAT
-
Style Guide
The Problem
Changi Airport Group (CAG), the world's leading airport wants to design an online experience similar to their unique experiences they co-create with brands. An omnichannel experience which provides the best of both worlds, enhancing the sensory experience in-stores and providing convenience online.
​
How might we create a seamless and user-friendly browsing experience, allowing travelers or even non-travelers to easily explore a diverse range of duty-free products personalised to their preference?
Discovery
Goals & Ambitions
​
We gather stakeholders from various department related to marketplace to have a whiteboard session to pen down their 'likes' and 'dislikes' from the key pages of the current site. Based on their thoughts, we categorised into various focus areas such as "Photography", "Font", "Look & Feel", "Unique Selling Points", "Navigation", "Search", "Speed", "Localisation", "Personalisation", and many more.
​
This was an effective session to identity pain points, areas which are doing well and areas we should enhance on.
Site Audit & Competitor Landscape
​
We study their current website to evaluate their performance and user experience based on guiding principles to help us address what are the areas we should improve on to help iShopChangi achieve their goals. We also looked into competitor/industry landscape to see how are they providing satisfying shopping experience.
​
The key takeaway we gathered from the site audit:
-
Slow page load across the brand sites
-
Inconsistency look & feel throughout the pages
-
Lack of mobile responsive experience
-
iShopChangi's branding essence gets diluted with the individual brand sites
Snapshot of site audit
On-Site Walkthrough​
​
We went on-site into the dutyfree area to learn and observe how their operations work. The entire process of the shop receiving an order, to packing and pick up. This session was crucial for us to learn their current process and pain point and how we can elevate the experience online.
Ideation
Wireframing Process
​
After a week of intense discovery session, digesting all the knowledge we gathered and we huddle together to start the brainstorming session on ideas for the homepage wireframe.
Paper Prototyping & Sketches
​
With the summarised positive exploration, we are able to use key information to proceed with the first draft of the homepage wireframes in sketches which encourages experimentation and exploration with ease.
Creative Digital Exploration & Direction
Building the design system language from scratch
Key Templates
Designing from ground up approach using modules to make the site scalable.
Homepage for Returning Customers
Serving up personalised recommendations of products and promotions based on customer's browsing behaviour.
Homepage for New Customers
Provide concise and proper onboarding to inform customers on fulfilment expectations and serving enticing deals.
Product Details Page
Dissecting the key requirements from various stakeholders and piecing it together to make it consumer friendly.
Shopping Bag
Transforming complex promotion deals with different pick up points for fulfilment to ensure a smooth transaction.
Check Out
Ensuring each check out steps is easy to consume for customers without much thinking for them to do.
