Some Key Highlights
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.
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,
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.
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.
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.
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.