Tablewear , Tableware Marketplace for Thai Market

RESPONSIVE DESIGN

A few month ago, Tablewear approached us to redesign their website – a marketplace for the horeca industry (food and beverage). It is an aggregator of tableware and glassware products from different Thai manufacturers. Tablewear does not take any transactions from purchase done online. The platform is completely free to end consumers. Instead, in order to generate revenue, they plan on offering premium services to manufacturers to help them automate their sale processes and get insights from end consumers.

When they came to us, Tablewear was on their third design iteration and the conversion dramatically went down after the last version. They knew they needed external help from a professional to get them back on track and we took on this new challenge.

The problem

There were a few main issues with their website. First of all, users didn’t understand this was a marketplace and not just another e-commerce website. The other issue they were having is that they were expecting users to buy everything online and the platform was built for this. However, most users didn’t want to buy directly online. They wanted to be able to talk to them first to get product recommendations, get a quotation and review with their manager before going ahead with a purchase order.

What we did

For this project, we helped our client restructure the layout and flow to create a more intuitive navigation for users. We also helped them create and improved their marketing message to explain Tablewear is a marketplace and not just another E-Commerce website. And since Tablewear does not take any fees from transactions made on the website, it was also important to communicate this to users in different parts of the platform.

Finally, we helped them improve the branding and visuals to match with an older, more conservative and less tech-savvy target audience.

With their expertise and credibility, It didn’t take long for us to decide to work with Morphosis. They try to put themselves in our shoes to really understand our concerns and tried to solve the problem as their own problem. As a result, it was very easy to communicate and align with our plan. They were flexible with our work arrangement and they completed all the tasks in professional manner. Can’t wait to see the end results of our new UI/UX!!

Naoe Miyata – Consultant at TABLEWEAR

Our process

For this project, we decided to follow a simple but effective approach that worked well for us and our clients over the years starting by analyzing the market research and business model and goals. From these insights, we compiled together a customer journey and user flow chart which we used as a guide to develop our wireframes. Once we had a strong structure in place, we developed high fidelity concepts based on client’s new branding guidelines.

The target audience

TableWear is a B2B business, and currently targets low to middle Horeca industry customers between age 30 to 60 years old. Because large hotels and chain restaurants usually have people in charge to manage and restock their tableware, this platform was mostly targeted at smaller restaurants, hotels and coffee shop. These customers generally buy at lower volumes, and are generally unattractive to manufacturers individually. However, TableWear aims to aggregate & serve this segment to capture a market segment that is largely shifting its consumption habits online.

Customer Journey

To really understand the work flows of users while purchasing new tableware products for their business, we decided to create a customer journey that would illustrate the behaviors and actions of our target audience on the website and offline.

This research allowed us to discover that, while some users like to buy directly on the platform, most actually prefer to talk directly to Tablewear to receive a quotation or recommendations that can fit their needs. 

Summarized preview of the customer journey we conducted for our client.

Sitemap

Tablewear navigation follows a rather standard architecture. However, it differs slightly from regular e-commerce websites in that it we decided to have a trends & inspiration section for users to get inspiration and hopefully get them to buy more. Also, since this is a marketplace, it is was also important to let users browse by manufacturers and check their contact information.

Wireframes

For this phase, we had to keep a few considerations in mind. First, this platform is a wholesale platform, not retail. Which meant that different prices had to be displayed based on quantity.

Second consideration, this platform is an aggregator of tableware manufacturers. Users should be able to get manufacturer details and contact info and see all products under that manufacturer but also to make it clear to users this was not just another E-Commerce website.

Mobile Wireframes

User Testing

After designing the main screens for Tablewear, we created a prototype on InVision and tested our wireframes with a 5 users to validate the flow and usability.

Results were really positive. We only had to make very few minor changes to our designs. Client was also really happy with the results. They found it very useful to be able to get first hand user insights and they gained confidence that we were going in the right direction with this design.

Visual Design

For this project, we opted for a more traditional and professional design to match our target audience, while keeping a modern look. Design was stripped of all the unnecessary visuals in favor of a very minimalistic style to focus more on the quality of the products and allow users to complete tasks faster.

This simplicity of design was also reflected on the category page. Instead of choosing a boring and traditional filter sidebar like most E-Commerce websites, we decided to choose a simple horizontal bar on top of the search results, something very similar to Airbnb. This allowed us to put more focus on the product items and have larger images so users can appreciate the quality of the tableware and glassware.

Category page – Grid and list views

Since Tablewear is also a wholesale e-Commerce website on top of being an aggregator, it was important to allow customers to quickly see at a glance how much they would save based on volume as illustrated in the screens below:

Product Details Page

Cart and checkout pages follow a very standard layout. We didn’t want to confuse users by creating something too unique. Again, we were designing for an older audience. By following E-Commerce best practices, we are making it easy for users to understand where to go and what is expected from them.

Cart & Checkout pages

One of the key features of the Tablewear website is the Inspiration and Trends section to give users a place where they can get some inspiration and buy directly from this page in just a few clicks. This section is useful for users who wishes to open a new restaurant or need to upgrade their current tableware but aren’t sure what to get. 

Inspiration and Trends page

Mobile Translation

While working on the desktop version, we worked on the mobile design in parallel to ensure that design would resize gracefully on different devices.

Conclusion

After 2 months of hard work, our team finalized the designs and handed them over to the developers. Our designs were implemented using Magento CMS as the main E-Commerce platform.

Overall our client was really happy with the design. This gave them a good foundation to work on and go to the next stage of their business which will be to start creating a platform for Manufacturers and get insights from end consumers.

Let’s work together!

Are you ready for a creative collaboration that will transform your business?

CONTACT US