Introduction

AVASport is new business of Thegioididong, aimed at retailing sports equipment., Avasport based on current technology of other MWG's website (thegioididong.com, Dienmayxanh.com) and have a fresh look and feel to alight to sport industry.

Project type

UI, UX Design

Company

MWG

Deliverables

Design system, Brand guideline,
Desktop, mobile design

Research & Prepare

We have a lot of ideas and plans for the Avasport website, starting with studying competitors, users, and building a design system for the project.

Avasport is similar to other brands in the MWG, operating under the omni-channel model, catering to both online shopping customers and those who prefer to buy directly in the store.

Customer Group 1: Online shopper

Goal

The need to hunt for sales of genuine sports goods at good prices with full information, product images, transparent warranty and return policy

Challenges:

Lack of time to shop at the store,
Buying online - difficulties in searching, selecting products according to preferences and returning, warranty when issues arise

How can Avasport help?

Provide an online shopping website with detailed images, fully product information
Flexible delivery: payment methods, delivery time
Provide information about the store system for warranty, return

Customer Group 2: Online Viewer - In-store Shopper

Goal

Understand product information before buying, compare prices, features of the product and experience the actual product before buying.

Challenges:

Want to buy products after holding them in hand.
Want to save time by researching product information of interest before going to the store.

How can Avasport help?

Provide an online shopping website with comprehensive product images and information.
Provide information about store locations, directions, and opening hours for customers' convenience.
Allow online ordering with the option to pick up in-store to enjoy online benefits, ensuring customers can check the product in-store before receiving it.

Follow the MWG's UX principle

Mobile-first

Simplification
(Lúa hoá)

Check my presentation to know more about MWG's mobile first strategy

Product components

For sports products, images are a crucial factor leading to purchasing decisions. Avasport's product images must meet the following criteria:

Optimal size, displaying the full details of the product.
Modal images have to show 2/3 of the body
Easy to import from TGDD, ĐXM website's product (like smartwatch, bicycle…
Easy addition of promotional information.

Hot Deals Section

Collaborating with the purchasing team to identify the highest-selling categories in order to organize category tabs.

About Section

Avasport is a new brand, and we need to publish information about our stores and key selling points to help users make decisions more easily.

The "view more" button always displays the specific number, helping users visualize better.
Viewing nearby stores helps users conveniently visit the store if necessary.

Avasport is a new brand, and we need to publish information about our stores and key selling points to help users make decisions more easily.

The "view more" button always displays the specific number, helping users visualize better.
Viewing nearby stores helps users conveniently visit the store if necessary.

Type Testing

When reviewing with developers, we received feedback that the Inter font we selected (based on criteria: modern, good support for Vietnamese, clear digits) is not the default font of the MWG's website system, which could affect site loading time and project coding time. To come up with the best solution, I conducted AB testing with users.

Select 4 distinctive designs with 2 options each using the Inter and Arial fonts, respectively. (Do not disclose the font names to participants)

Participants are asked to choose the option that feels modern and youthful (based on the imagery criteria that Avasport aims for).

Testing result

The majority of users did not perceive the difference between the two options.

For screens with minimal text (1) (2), over 2/3 of the participants did not notice any difference.
For screens with more text (3) (4), the number of people choosing the Inter font option increased but not significantly.

This is different from our initial assumption. After considering the effectiveness and effort required, we have decided to use the default system font for the Avasport website.

Screen 1

Screen 2

Screen 3

Screen 4

Hand over the design to the developer for coding.

We use a Google Doc file to "communicate" with the developer. Google Doc is user-friendly for everyone, easy to edit, comment on, track edit history, and cloud-based.

Product image guide

Some product categories on the website need to import images that are already available from other websites. I have created a detailed description on how to import these images for the developer.

Banner guideline for marketing team

Some product categories on the website need to import images that are already available from other websites. I have created a detailed description on how to import these images for the developer.