logo

Quick Information.

Office Address:Unit 3B ,108 - 110 Wellington Street, Central, Hong Kong


Contact Email:hello@turnright.hk

Online Marketplace UX/ UI Redesign

HKTDC’s Online Marketplace has been up and running since 2008. Having a focus on KPIs set in different eras and driven mainly by small functional enhancements in the past, the internal teams had found it increasingly difficult to run the platform - in terms of keeping the customers satisfied, acquiring new advertisers or chasing the KPI targets. Thus as part of the Digital Transformation HKTDC PEC (Publications & E-Commerce department) went through, a request has been raised about redesigning the old-fashioned interfaces and upgrading the user experience flows for the Online Marketplace.

Client
  • Hong Kong Trade Development Council

Sector
  • Semi-Government Organization

Year
  • 2018 Nov - 2020 Feb

Some Key Highlights

Facilitating Easy Discovery for Buyers

The Online Marketplace sets out as a typical e-commerce platform where products are the inventory to serve users' queries. In order to make an improvement, we first studied the old search mechanism and identified certain problems - search accuracy, filtering mechanism, information completeness..., etc.
The redesigned search & browse flows see clearly categorized filters on search result pages, prioritized information display according to users' reading needs and more. To facilitate the search accuracy, a cleansing and re-categorization exercise was suggested for the product pool too before launch.

single

A Platform for Suppliers to Shine

For a platform impressive like the Online Marketplace, we were very careful before suggesting any change ideas to the business unit. Through in-depth interviews, conversations and interactive workshops with HKTDC's targeted group of users, we identified some key difficulties from 'information providers' - the Suppliers.
The platform serves different industries, and suppliers in each industry want to market themselves differently - there's no one template that fits all. We thus designed a generic template that allows flexible editing; while also adding in sections that guide suppliers to input information that interests buyers most.

single

Data is important, to both you and me

In this age, data transparency is welcomed, and it's expected somehow. Although HKTDC's targeted pool of suppliers is not the group who we would classified as Innovators, Early Adopters or Early Majority in the technology adoption curve, but still insightful data would be useful to them - they can read, try to analyze, try to understand, and try to improve.
For the suppliers in the ecosystem, we suggested the Business Unit to open up and allow honest data to be reflected onto the carefully designed dashboards. For what data to display, we stepped into suppliers' shoes to understand what they need to know most. For the performance dashboards, we especially went through rounds of psychological measures, in order to come up with a 'showing insightful figures, but not too hard to read' balance.

single

Discovery

We started by understanding the business' vision, value proposition, and client's desired improvements. Market and competitor analysis were done, current product and work processes were also analyzed, these activities gave us an understanding of how the business ran, and the challenges/ difficulties on 'change'.

Activities Conducted

  • In-depth interviews with users, industry experts & business units
  • Field research (across 5 HKTDC exhibitions)
  • Behavior observations & analysis
  • Market & competitor analysis
  • Focus groups & facilitation workshops
  • Business model review with top management

Key findings

  • Manufacturing SMEs may find manipulating 'digital' or 'online' things hard, some platform processes may be too hard for them to catch up
  • Complicated workflows also added to internal staff's workload
  • Users were not sure about if online could help their businesses

User Profile Development

We believe in finding the product for users, not finding users for a product. Thus understanding what users want/ need would be an important job. We spent time onto understanding the users which HKTDC targeted - manufacturing SMEs in HK, and buyers from all around the world.

Develop User Personas

From in-depth interviews and careful observations, we analyzed the scattered data, consolidated features in common, and developed sets of User Personas.

single
single
single
single
single
single
single
single

Develop User Journey

Alongside crafting the personas, we also documented the activities these users would take in order to finish their jobs, the results are some detailed User Journey Maps,

single
single
single
single

Crafting the Service Blueprint

After identifying the technology and the user's needs, we were able to map out their journey through the application.

Mapping the Application

With transformation goals set, product direction confirmed, and User Personas & User Journey Maps released, we have also taken a holistic view on how the whole set of services shall run - in order to achieve product & operational success. After careful risk calculations and feasibility measures, 2 Service Blueprints were released.

single
single

Wireframe

Designing the wireframe allows us to focus on the basic structure of the site without the distraction of the aesthetic elements.

Wireframe Modules and Pages

Wireframes serve as a tool to communicate ideas with clients and users, they're commonly used to lay out content and functionalities on a page which takes into account user needs and user journeys. For each new interaction flows designed, we sketched the ideas on papers or with online tools, in order to present to product owners.

single

Setting Visual Elements

The Online Marketplace is hosted under the HKTDC corporate umbrella, thus there would be certain brand guidelines to follow. To refresh the Marketplace's image tho, small-yet-significant changes were made - colors were categorized, fonts were selected for viewing friendliness, alignments were made consistent to convey a professional 'look & feel'. With these visual elements confirmed (later written into a Design Guideline), BU, design team, developers, and testing teams all aligned and spoke the same language.

single
single
single
single

Mockup & Prototypes

Upon wireframes reviewed and low-fidelity prototypes agreed, we moved on to adding all the details to the high-fidelity prototypes.

Prototyping the pages

The interactive prototypes were delivered using Sketch and Figma. These high-fidelity pieces give product owners and business units a real sense of how the future product will look/ act like. They can also use the prototypes to give fellow operation team colleagues, selected group of high-value users, and the top management a sneak-peak too.

single
single