Alexey Petyushkin's UX/UI Design Portfolio
Decoration

Vice Catalog

The marketplace of game products: everything from access codes and game currency to ammunition and clans.

Role:
Role:
concept, research, design, management
Tools:
Tools:
Figma, PS, AI
Duration:
Duration:
still in development
Vice Catalog

Problem

The use, sale and purchase of goods for computer and online games is an extremely unexplored area of our lives. There is a strong misunderstanding of the mechanisms of selling digital products and a poor knowledge of transaction security issues. And the more popular the computer gaming industry is, the more questions arise about this topic.

Goal

To create a positive and sustainable image of a hobby that is safe for teenagers and acceptable to adults using illustrative/game characters and interface elements.

Research

The computer game industry has been around for a long time, but the transition to online has begun quite recently. And such a transformation scares many users, creating a number of difficulties and inconveniences in obtaining services for gamers. People understand the prospects of online transactions, but they see obstacles on the way to mastering new opportunities.

What's critically important for the buyer of digital/gaming products?

On average, out of the total number of respondents.
30% consider the UI inconvenient and the usability isn't well developed.
52% say the security of the transaction is the most important.
18% rate the overall perception of gaming websites as difficult.

Key pain points

1
The gaming industry has an image of an unsafe hobby (especially online platforms).
2
People suffer from a severe misunderstanding of the prospects of online transactions.
3
The complexity of information perception.
4
User interface is often inconvenient, the usability isn't well developed.
Vasily
Age
17
Education
Unfinished school
Location
Moscow, Russia
Family
Parents
Occupation
Schoolboy
alt

Typical User Persona: Vasily

«I want to improve this world. The real world is better than the game.»
Vasily is in his final grade of high school in Moscow and is preparing to enter the university for a technical specialty. Since the age of 14, he's been interested in computer games: he runs a local game fan club, meets with other players, goes to competitions, and writes articles on the school's online gaming blog.
Goals
Goals
  • To develop his passion for games.
  • Hobbies shouldn't somehow harm life, studies and society.
  • To graduate from school (with jonor) and go to university.
Frustrations
Frustrations
  • Not everyone understands and approves of his hobby.
  • More security is expected on the gaming websites to increase adult trust.
  • It's hard to combine studying and playing games.

Wireframes

The stage of discussing key areas of possible project development and choosing a visualization concept brought a huge number of interesting ideas and hypotheses that required testing and thorough analysis.
85
paper and digital wireframes in total
Wireframes

Page types developed
The pages of the public part of the website and personal accounts.
admin account (58%)
store account (30%)
public website (12%)
Prototypes

Prototypes

Wireframing and prototyping stages are very important for the project and the final result. Special attention in analyzing the logical chains between the interface elements and testing the functionality of the future website was paid to the ease of perception of information on the public part of the website and the convenience of working with personal data in the accounts of the administrator and the store (the private part of the website).
Prototypes
lofi
hifi
alt
During the workflow, several different strategies were developed to create an approach to the user interface and administrative functionality. All ideas (from classical minimalism to cutting-edge abstraction) have been carefully considered to identify all the benefits and advantages for the end user.

Usability study: findings

These are the key results of the usability study.
1
The interface with game elements (illustrated characters and design parts) improves the engagement of the audience of buyers of gaming services.
2
A bright color palette increases the depth of the website's browsing experience.
3
The unusual geometric shapes, broken lines, non-standard solutions and illustrative style of the visual don't impair the quality of the user experience.
4
Funny hand-drawn characters make users smile, and it's worth a lot 🙂

Mockups

Having chosen the style and visual language of the entire project, it was the turn of designing mockups. And here every detail matters, every line is important, and every pixel plays a significant role. This is especially important when such a cartoon style is defined, where it's crucially to see and understand the fine line between infantilism and a businesslike tone.

Conclusions

This is an incredibly new and unusual experience for me. I've never worked with such a cartoon style before, considering it quite specific and even risky for serious large-scale business projects. This case marked an important milestone in my own professional development, allowing to expand my horizons and look at familiar things with a new perspective. Work on the project is still ongoing and I look forward to new amazing insights and great discoveries.
a Quote from user feedback
a Quote from user feedback
It's incomparably better than we expected!
Feedback