Ecommerce UI Enhancement

Overview:

I had the opportunity to work on the enhancement of an underperforming e-commerce website, addressing critical usability issues and introducing new functionalities to improve the overall user experience and operational efficiency.

Challenges:

The original website had numerous functionality gaps and caused significant user frustration due to frequent errors and a lack of essential features. These issues led to a high bounce rate and low conversion rates, impacting the business’s revenue.

OLD DESIGN

GAME LOBBY

NEW DESIGN

Problems:

Here is a list of the pain points found in the old design:

  1. INCONSISTENT NAMING CONVENTION

    The current naming does not align with the Explore, Elite, and Enhanced package naming convention.

  2. LACK OF CONTENT UPDATE NOTIFICATIONS

    Customers are not notified when new content is added, or existing content is updated.

  3. FILTER ACCESSIBILITY ISSUE

    Filters are not open by default, causing customers to spend excessive time opening them while browsing.

  4. LIMITED DROP-DOWN LISTS

    As contents grows, the drop-down lists for Game Themes and Types need to expand accordingly.

  5. UNCLEAR PLATFORM SUPPORT INFORMATION

    There is no mention of which platform is supported.

  6. NO FILE UPLOAD CONFIRMATION OR GUIDELINES

    Customers do not receive confirmation that files have been uploaded successfully, and there are no instructions or restrictions about file types or sizes.

  7. LACK OF SORTING OPTIONS

    Users cannot sort games by popular choices, alphabetical order (A-Z), etc.

  8. EXHAUSTING INFINITE SCROLLING

    Infinite scrolling exhausts users and hampers their browsing experience.

Solutions:

  1. HERO/ MASTHEAD

    Introduced an area to the experience where the client can see new and exciting gaming content that would link them directly to the game showcased.

  2. RENAMING OF THE TABS

    Removed “lobby list” from each of the tabs to be concise and shortened.

  3. FILTER

    Sorting and narrowing down content based on specific criteria has been enhanced for greater precision. The filter has been optimized to address more specific categories, and the filter section has been redesigned for increased prominence. Additionally, a “Clear All” button has been introduced, providing users with the convenience of clearing all selections with a single click. The fixed filter design allows users to seamlessly browse without the need to click a separate filter button.

  4. SORT BY FILTER

    The “Sort By” filter has been introduced, providing users with a convenient way to easily navigate and organize content within their desired categories.

  5. UNLIMITED/ PREMIUM/ BASE NAME ENHANCEMENT

    Names of these three packages have been updated to relate it to the current naming convention.

  6. PAGINATION

    A visible count displaying the number of games presented has been implemented for improved user experience in the interface.

  7. MODULE ADD ONS

    Introduced an area to the experience where the client can purchase additional enhancement that relates to the promotional content.

  8. GAME ICONS

    Game icons have been positioned to signify the supported platform for each game.

  9. BANNER

    The banner has been revamped with a refreshed design, now featuring a refreshed look and additional options, including sections for new releases and upcoming content.

  10. BREADCRUMBS

    Introduce a section for breadcrumbs after selecting filters. Users can easily review their choices and individually remove them for a clear and intuitive experience.

  11. SCROLL TO TOP BUTTON

    Introduced a scroll to top button for users to quickly return to the top of the page without having to manually scroll, reducing effort and time.

GAME DETAIL PAGE

Problems:

  1. NEED FOR ADJUSTED INFORMATION HIERARCHY

    The current information hierarchy needs to be improved for better organization and clarity.

  2. UNCLEAR ICON

    Icon is ambiguous, making it unclear what they symbolize or where they lead.

  3. UNCLEAR PLATFORM SUPPORT INFORMATION

    There is no mention of which platform is supported.

OLD DESIGN

NEW DESIGN

Solutions:

  1. TABS

    The sections for Categories, Game Themes, Genre, and Tags have been redesigned with tabs, facilitating easy navigation and viewing relevant pill-type information.

  2. DOWNLOAD

    Section for downloadable information has been introduced.

  3. REVIEWS

    Rating has been removed and reviews has been Introduced to users to share comments and feedback about the game.

  4. GAME ICONS

    Game icons have been positioned to signify the supported platform.

MY GAMES

Problems:

  1. UNCLEAR ICON

    Icon is ambiguous, making it unclear what they symbolize or where they lead.

  2. UNCLEAR PLATFORM SUPPORT INFORMATION

    There is no mention of which platform is supported.

  3. LACK OF CONTENT UPDATE NOTIFICATIONS

    Customers are not notified when new content is added, or existing content is updated.

OLD DESIGN

NEW DESIGN

Solutions:

  1. DOWNLOAD AND ARCHIVE BUTTON

    New buttons have been added to maintain consistency with the icons used in the lobby. The Archive button is represented by its own distinct icon, allowing users to archive games for future reference. Clear indication of the icons on hover.

  2. NEW UPDATE NOTIFICATION

    Added a notification system to alert users about added content or game updates.

  3. PAGINATION

    A visible count displaying the number of games presented has been implemented for improved user experience in the interface.

UPLOADING SCREEN

Problems:

  1. LACK OF UPLOAD FEEDBACK

    Users are not provided with confirmation that their files have been successfully uploaded, leading to potential confusion and uncertainty.

  2. UNDEFINED FILE REQUIREMENTS

    There are no clear instructions or restrictions regarding acceptable file types or size limits, leaving users unsure about upload compatibility.

OLD DESIGN

NEW DESIGN

Solutions:

  1. DETAIL MESSAGE

    The message has been relocated to a different position, clearly specifying the necessary information for a successful upload.

  2. PROGRESS BAR

    A progress indicator has been introduced to visually communicate the upload status, keeping users informed about the ongoing process.

  3. ERROR MESSAGE

    Once the upload has failed, an error message will guide users to return and complete the necessary steps for a successful upload.

  4. SUCCESS MESSAGE

    Once the upload has successfully uploaded, users will receive a success message notification.

  5. THUMBNAIL IMAGE

    The image of the particular game is displayed to provide a clear visual representation on what game is being uploaded.