Kenford Medical E-commerce

E-commerce Platform

The original e-commerce platform was intertwined with its corporate website, resulting in disorganized navigation. Furthermore, users are primarily middle-aged and elderly, many of whom are not familiar with digital practices. They are confused by the navigation pathways of the website, which reduces their likelihood of staying engaged and willingness to make online purchases.

To solve those identified pain points, information architecture (IA) analysis was conducted to separate the original platform into a corporate website and an e-commerce platform. This also means the corporate website and e-commerce platform are treated as two distinct projects and managed separately by stakeholders. This page focuses on the e-commerce project.

Information Architecture

The basic requirements of a front-end e-commerce platform include product information (product images and brief description for each product), shopping cart functionality, secure payment gateway.

Additionally, products are well organized following several discussions with the marketing team head. Their page names have also been rephrased with a marketing approach to enhance search engine optimization (SEO).

Sitemap of Kenford medical e-commerce

*Grey box refers to newly added page for new platform

Basic UX Flow of Purchase

Discover Product

  • Homepage
  • Product Lists
  • Search
arrow, pointing to the next step

Visit
Product List

arrow, pointing to the next step

Read
Product Detail Page

arrow, pointing to the next step

Add to Cart

arrow, pointing to the next step

Checkout

  • Order Review
  • Shipping Info
  • Payment
arrow, pointing to the next step

Receive
Order Confirmation

arrow, pointing to the next step

Post-Purchase Service

  • Order Tracking
  • Customer Support

Moodboard

Moodboard of Kenford medical e-commerce

Typography

Headings

Font style of headings Font style of headings

Content

Font style of content Font style of headings

Color Guide

Primary Color

#8CC63F
#FEB996
#333333
#666666
#999999

Secondary Color

#6AA21E
#FBE5DC
#DDDDDD

Copywriting

For this project, I was also responsible for writing FAQs, as well as the processes and methods of payment and delivery service information. After discussing with client and referring to other e-commerce platforms, common customer inquiries were identified while information about payment and delivery service aligned with Kenford Medical’s policies was also gathered.

The tone and manner of copywriting remain clear, concise and accurate. It aims to help customers make informed decisions and improves overall satisfaction with the shopping experience.

UI Design

Desktop - Homepage

Homepage of Kenford medical e-commerce

Product List

Product list of Kenford medical e-commerce

Product Details

Product details page of Kenford medical e-commerce

Vision and Belief

Vision and belief page of Kenford medical e-commerce

Mobile - Home Screen

Design Insights & Key Functions

Provide shortcuts to achieve objectives of user-centered design (UCD) in order to enhance user engagement.

Mobile interface of kenford medical e-commerce homepage

Design Insights & Key Functions

Provide shortcuts to achieve objectives of user-centered design (UCD) in order to enhance user engagement.

Promotional Banner Slider
Users can immediately see the seasonal limited offers and significant promotions upon entering the Kenford e-commerce platform.

Latest News Column
Users are aware of the latest promoted products and able to find the details.

Product Category Shortcuts
Allow users to find featured product category easily.

VIP Column
Maintain a good relationship with users by providing special promotional information to loyal customers.

Hot Products Column
Inform users about the trends in healthy product market

E-newsletter subscription
Keep in touch with users, and provide updated information from time to time.