ICE CITY
A Winter Olympic-themed community experience that is as immersive as an on-site one.
This is an NFT trade creation platform combined with games and games, and a one-stop online community to experience and understand the Winter Olympics and winter ice and snow sports.
MEDIUM
Website
DURATION
4 weeks, Dec, 2021
MY ROLE
End-to-end UX Designer
UI Designer
TEAM
Ziyi Wang, UX Designer
Xiuge Zhang, UX Designer
OVERVIEW
· 1 problem statement
With the influence of the epidemic, the 2022 Beijing Winter Olympic Games will become a rare world-class sports event. As the counterpart of the community in the virtual world, the virtual community provides a gathering place for network users with the same hobbies. Winter sports enthusiasts who cannot attend can establish their own virtual community, communicate and share together, and even take this community as a daily life.
How might we keep the discussion and vitality of the Winter Olympics and Winter Sports after the Beijing Winter Olympics?
· 2 solution
We, a team of three designers, have conceived A new generation of winter Olympics community website design - with the addition of meta-universe and NFT concepts, ICE CITY provides an online community with centralized information, diversified gameplay and growth for ice and snow sports fans!
An ICE CITY resident has 4 main activities on a daily basis:
DAILY ACTIVITIES
Virtual image and personal space design
reminder of daily competition schedule
CREATION AND TRANSACTION
Create your own NFT art works
sell and purchase them on the virtual platform
SPECTATE GAMES
Choose your favorite seat
send comments to cheer for the athletes
SPORTS GAMES
Play sports games in the virtual ground
learn relevant knowledge
THE PROCESS
Define the UX design results required for the entire project:
Secondary research
Interview
Persona
Design goals
Brainstorm
Storyboard
Design conpect
Journey map
Ideate the concept
Define the design goals
User flow
Mid-fi prototype
Evaluation&Iterations
Design system
Final
design
HI-fi design
Refine the design
RESEARCH
· 1 INTERVIEW AND PERSONA
"I really want to have a special place to meet other winter sports enthusiasts！"
In order to better understand our target user group: winter sports enthusiasts, we analyzed the paper and conducted five in-depth interviews. Everyone believed that the establishment of virtual communities required free activities, equal exchanges, the establishment of autonomous rules and information sharing. In addition, they agreed that anonymous communication and a warm atmosphere were necessary conditions for an ideal community.
"I really need professional help with winter sports!"
Crowd profile:
Due to the popularity of the Winter Olympics, people who pay much more attention to the Winter Olympics, or people who have known about the Winter Olympics before but have no chance to experience it in person.
Needs:
People with ice and snow sports experience are required to introduce; I want to know something about the Winter Olympics.
Challenge:
How to make them fully engaged and maintain the long-term vitality of the website?
How to publicize highlights to attract more people？
How to maintain the long-term attraction of the website?
Ms. White
age：25
occupation：white-collar professionals
status：Amateur skier
Opportunity:
Provide diversified play methods, increase community functions, and constantly iterate to increase the long-term vitality of the website.
· 2 JOURNEY MAP
Compared with the ordinary live games, what is missing from the online sports community?
User description：
Winter sports enthusiast, who wants to try but doesn't know where to start.
Description of the scene：
Because of the hot topic of the Winter Olympics, many people who do not know much about ice and snow sports have become curious about these sports during this period and want to know about them
Goals and expectations：
They want to know the information of the Winter Olympic Games, grasp the news of the Winter Olympic Games as soon as possible, watch the live broadcast of the games, and learn about each sport in order to better understand the games.
Influenced by the Winter Olympics
Get ready to experience winter sports
It is difficult to learn winter sports from scratch alone, and it is easy to get injured without action guidance
Watching the game without the same fans to discuss and celebrate
The Winter Olympics are short and niche, hobbies don't stick
Want to know about winter sports, but they can only Google them
😍
😋
😔
😡
😩
😖
Curious
Expectant
Disappointed
Whiny
Snubbed
Oblivious
🥰
EMOTIONS
🤬
EXPERIENCE
PAST
Through the analysis of the journal map, we believe that winter sports enthusiasts lack a platform for free communication and learning, which is one of the reasons why winter sports fever is difficult to maintain for a long time; At the same time, as a hobby and competition, the popularity of winter sports should be full of fun. Therefore, we want to provide these potential winter sports fans with such an online community to meet the needs of users as much as possible.
· 3 SUMMARY
After gathering the information from research, including interview, personal and journal map, we think that the whole online community construction should be gradual, including 3 important processes:
1st: Collection and classification of basic information
2nd:Improvement of functions, such as information collection and retrieval, establishment of virtual model, establishment of community discussion area, etc
3rd:Establishment of community culture and atmosphere
There are 4 key components that contribute to an amazing online community experience, enabling us to achieve design goals:
Establishment of digital model
Build islands and sports grounds through low poly style models to increase users' visual experience
🥳
Discussion community
Join free discussion communities anytime and anywhere, such as stores, sports games and live broadcasts, to increase user freedom
🤐
Immersive atmosphere
Create a virtual image for users to really live in a virtual community
🥰
Increase interest
Increase interest in language and program design, and increase the fun of user experience
😋
IDEATION
· 1 BRAINSTORM
Brainstorm and give priority to the ideas most relevant to the design goals
Winter Olympics theme related
How can we let users know about the Winter Olympics and maintain their long-term enthusiasm for winter sports?
Match
Athletes
Tips on Winter Olympics
Play methods of related sports
Competition consultation
Information - time, place, contestant
Live broadcast
of the game
Find your winter snow sports hobby in the winter Olympic derivative community and cultivate it
Learn more about the Winter Olympics and maintain enthusiasm for winter sports
Virtual community related
How can we make the virtual community more cohesive and vital?
Watch the game vividly without being on the scene
Better substitution
Increase the virtual
image of users
More participation
See a football
Shout for the athletes
Can get rewards
Venue construction
Increase live interaction
Selective mechanism
Participated in the creation of second creation of Winter Olympics
You can also create your own gallery of works, and you can also get profits
Prioritized Features
· 2 STORY BOARD
Integrate priority ideas into the user journey
01 Ms.White was attracted by the Winter Olympics on TV, but she didn't know where to learn more.
02 Ms,White found ICE CITY when searching the Internet.
03 Ms,White became a little penguin in community, can change clothes. rooms, watch news.
04 She can go to the stadium, where can watch the real-time games together.
05 In the stadium, she can watch from favorite angle, distance and location, send real-time comments.
06 In a special market, which can use the tokens on the island for art transactions.
07 She can browse various NFT art works, and conduct personal collection and trade.
08 Everyone can create on this NFT platform. Comments bring more motivation.
09 In the special ice and snow sports venues, she experience various sports and learn basic knowledge.
10 There have relevant knowledge introduction when doing technical actions.
11 Novice athletes can also chat with other experienced ice and snow athletes.
12 Ms,White already knows enough about ice and snow sports. thanks to ICE CITY!
Through the analysis of the brainstorm and storyboard , we have determined the basic functional area arrangement of the online community and the solution to user needs, including website positioning and community planning. Next, we need to refine the information architecture and interface design of the website and then carry out repeated design iterations to ensure that it can really be implemented.
DESIGN & ITERATION
· 1 USER FLOW
After defining the overall user experience process and basic functions of the website.
In order to determine the affiliation and jump connection between pages at all levels, we used user flow to help us establish the website information structure.
Home
Main map
Stadium
Stereoscopic image of venue
NFT Store
Games
Spectate games
Select location
Game replay
Official Winter Olympics
Communication space
Blog (Social)
NFT creation
Function Bar
Navigation Bar
DIY Image
Auxiliary
News zone
Related history
Previous competitions
History of winter sports
Hall of fame
Animal species
Equipment & skin
Settings
Search
NFT Store
Customer service
Mailbox
Bulletin board
1st level page
General page
Page content
· 2 PROTOTYING
Mid-fi UIs & prototype for testing
Describe your image
Describe your image
Describe your image
Describe your image
· 3 DESIGN SYSTEM
The blue sky and white snow , embellished with the color of the Olympic rings
MOOD BOARD
#c14c2b
#d9cefe
#BEDFFF
#bada55
#1285ff
#323332
#324158
#FFE400
#39AC92
COLOR PALETTE
Primary
Secondary
#d9cefe
#aac5df
#1285ff
#bada55
#324158
Grayscale
#ffffff
#cacbc9
#979897
#656664
#323332
#bada55
#c14c2b
#186fca
UI COMPONENTS
Tabler Icons iconfont.cn
Icons
TYPOGRAPHY
Aa Raleway Semi Bold
Aa Roboto Bold
Headline 1
Raleway /Semi Bold/24
Headline 2
Raleway /Semi Bold/22
Headline 3
Raleway /Regular/19
Headline 4
Raleway /Semi Bold/17
Headline 5
Raleway /Semi Bold/15
Headline 6
Body 1
Raleway /Regular/14
Roboto /Bold/20
Body 2
Roboto /Bold/16
Body 3
Roboto /Bold/14
Body 4
Roboto /Bold/12
Subtitle
Tag
Raleway /Regular/10
Raleway /Semi Bold/12
· 4 EVALUATION & ITERATIONS
User testing process
Considering the goal of this iteration, I held a user feedback meeting with 7 users. They had different attitudes towards trying to learn new sports and different familiarity with the Winter Olympics and Winter Sports.
· Home page and comments page
In the home page and live page with mainly large pictures, most users want other text information not to take up too much visual area and to get the next guidance information quickly at a glance; the current page is a bit messy in terms of visual effect.
· Game and spectator pages
Also, for game pages and live pages, users want to be able to quickly navigate that interface and quickly understand the information. They want more freedom and novel graphics.
After repeated design iterations and detailed deliberation, we finally built an online community that we believe is real, reliable, interesting, and can promote winter sports and extend the life of the Winter Olympics:
FINAL DESIGN
Welcome to ICE CITY!
· PART 1
DAILY ACTIVITIES
Virtual image and personal space design,
Reminder of daily competition schedule.
CREATION AND TRANSACTION
Create your own NFT art works!
You can sell and purchase them on this virtual platform!
· PART 2
· PART 3
SPECTATE GAMES
Choose your favorite position and angle to watch the game, send real-time comments to discuss the game, and cheer for the athletes!
· PART 4
SPORTS GAMES
Participate in community games in the virtual playground, and learn about winter sports related knowledge and skills through games.
We believe that everyone can find their own ICE CITY lifestyle and play methods here. Come here to make new friends and explore the online sports community of the new era!
REFLECTION
Gains
· Collaborate with other designers through many different forms of discussions, sketches, documents, site maps, style guides, etc
· Thinking about the diversity and interest of community culture, increasing user stickiness and community vitality - think outside the box and shaping future experience
· Create domain knowledge of immersion
Further improvement
· Availability test
· More iterations
· Transaction mechanism settings of virtual community tokens
Future work
· Verify technical feasibility with engineers
· Explore possible business models such as community autonomy, economic culture and virtual currency