NVIDIA 
GEFORCE iCAFE

Category:
UX/UI, Branding, International Collaboration

My Role: 
Lead Designer - UX/UI, Design Research

Overview

NVIDIA GeForce iCafe is the largest internet cafe community around the world. As the GPUs of NVIDIA are powering the latest AI technology and GeForce is leading the gaming industry, to be a certified iCafe and identified as our premium partner is the most outstanding approach to  attracting gamers and potential stakeholders.

This project aims to demonstrate how to facilitate the design process between marketing team and creative team as well as the iCafe owners, in order to have the best solution for the business that many multinational corporations may encounter in different departments and countries. 

DESIGN PROCESS

DESIGN PROCESS

icafe design-process-b-2

Step 1

Since NVIDIA GeForce iCafe is becoming a phenomenon, more and more internet cafe (iCafe) owers requested an official channel for joining the global community in which places have one of the advantages of being the venue for holding eSports events.

However, there are a few obvious issues on the previous iCafe website: Barely fits in the NVIDIA visual style, Difficult for our users to find out useful information, lack of maintenance, etc., as you can see from the screenshots below. 

In order to associate with our growing gaming business, to rebuild up a new website that meets the requirements are in great demand from the iCafe owners and NVIDIA marketing team.

Therefore, the objective of this project is to optimise the old web content and create an up-to-date website which depicts the advantages of being our partner, and smoothly navigates the correct path for the users to join the GeForce iCafe community.

Previous Website

GeForce iCafe

old home page (unclear info for iCafe)

GeForce iCafe Starter Program

old join page (wordy and unavailable links)

Step 2 - 5

Site Flow

After reviewing the previous website, a few problems were found and the most obvious issue is there is no clear structure and factors for achieving our goal.  So I initiated the project from updating the site flow:

The old site map shows a fairly flat website which resulted in non-connected pages and disorganised flow. Therefore, the intention of the new site flow is to divide pages into sections and create the interconnectivity. 

iCafe – Sitemap
Lo-fi Wireframe

Same as many corporate companies may encounter amongst different departments, our marketing team requested the creative team to create a new website without offering comprehensive information and useful assets because of not knowing what materials are necessary for proceeding with the design process.

To resolve such a situation, firstly I used the lo-fi wireframe showing our marketing team the possible structure of the new pages, so they can visually understand what we have to illustrate on the website and indicate designer to the information structure according to the business requirements.

Lo-Fi Wireframe v1
Lo-Fi Wireframe v2
Hi-Fi Wireframe
The iCafe Map

The next question we met was how to navigate gamers the most efficient way to the nearest certified iCafes around them, moreover to show the iCafe owners who are not yet our partner how fascinating it will be once they join the community.

The functions and features of Lists, Dropdown menus and Tabs on maps were tested based on the various iCafe systems in the APAC countries.

Through the tests and experiments by the NVIDIA marketers, designers and developers on our target markets, it turned out the best approaches were utilising Tab functions with Google Maps in East and Southeast Asian nations which user can intuitively tap/click on the tabs to see the surrounding iCafes with ranks as it works accurately and is able to show the location, photos, comments and street views in great details.

On the other hand, the combination of the Google Maps API with dropdown and tab functions produce the best solution for the China market due to its coverage of vast areas and the limited GPS system which Step 1: zoom into a specific city via dropdown menu (still covers a large area; Step2: click on the tabs/levels -PLATINUM, GOLD, SILVER to find out the iCafes around them.

0. ICAFE HOME – ROAP – Map-01

iCafe Community

By following the market research and design process, we discovered that there is an online platform that has been providing every feature we aimed to develop for the iCafe community as follows:

  1. Make an impact: By sharing reviews, photos and knowledge about the places around you, you can help inform millions of people.

  2. Join forces: Meet people who share your passions by visiting our Local Guides Connect forum and attending meet-ups near you.

  3. Be recognised: Unlock a Local Guides badge and perks as you earn points for your contributions and reach higher levels of the programme.

    — Google

Based on our research and the key features offered on the platform, we decided to apply this service onto our website which will significantly decrease the budget and save time for developing the exact same functions to facilitate the relationship and increase the exposure for the iCafe community .

iPad Pro 2018 – 1

OUTCOME

OUTCOME

Since NVIDIA introduced the GEFORCE iCafe website 2.0, the number of online applications keep surging in Taiwan, Thailand, Philippines, Vietnam, Indonesia, Malaysia, India, etc. Also, the iCafe Communities in the APAC countries are successfully expanding as the Google Local Guides platform provides the features as the results from our research.

icafe-home-page-mockup-1
icafe-home-page-mockup-2
icafe-certified-page-mockup
icafe-certified-page-mockup-form

Selected Works

AdventsureUX/UI, Branding, Graphic Design

NVIDIA iCAFEUX/UI, International Collaboration

Performing SculptureUX/UI, Motion Graphics, Exhibition

HTC SupportUX/UI, Branding, Graphic Design

Vivid LIVEUI, Digital Marketing, Graphic Design

Hi!

   

All rights reserved © Christopher Hsueh