VTKD is a game developed by Refract Technologies. All VTKD transactions and subscriptions are currently done through email and data are stored in an excel sheet.
Solution
Develop a B2B/B2C portal that allow potential customers to subscribe to VTKD without needing to contact Refract Customer Service.
My role
UI/UX Product Design
Goal
Design a B2B/B2C portal (4 months)
Core Features
Organization Dashboard 👥
Organization owners will gain access to organization dashboards, which provide them the tools to manage the users in their organizations. Owners can own multiple organizations.
User Management 🙋
Organization owners are able to create and manage accounts for game masters and players. If they are unavailable, game masters can do it for them instead.
Subscriptions 🧾
Organization owners will be able to manage their subscriptions to VTKD and make payment to Refract Technologies through Stripe.
Files Download 💾
Refract Technologies will be able to host the game files on the portal so that customers can download the latest files at all times.
Player Dashboard 📈
VTKD Players will be able to view their VTKD Tournament results (Ranking) and their stats (Number of kicks, Number of spin kicks and Number of punches etc) on their own dashboard.
Research
In order to determine how VTKD (Virtual Taekwondo) subscribers feel about the transaction process, I approached the company's Operations Team to link me up with some Dojang owners and athletes so that I can interview them about the current process and what they hope to see on the portal.
User and Stakeholder Interviews
We conducted in-depth interviews with 2 stakeholders from the company, 1 stakeholder from the World Taekwondo Federation and 3 customers. We were able to gain insights on how the transaction work between them and our company:
1. Customer emails our company with a request to purchase VTKD 2. Company will create an invoice and a code for the customer 3. Customer will do a bank transfer to the company 4. Upon receiving the money, the company will ship the motion capture device and the game to the customer
This process was impractical and proven to be flawed as stakeholders mentioned that several customers tried to do a charge back after they have received the products from the company.
What User Wants
After completing my interviews, I was able to consolidate what the stakeholders and customers want on the portal:
1. User Management Tool 2. Payment Gateway 3. Keeping track of their subscription 4. Organization/ Player Dashboard
In conclusion, the stakeholders want features to prevent scammers and customers want features to make payment easily and to always keep track of their subscriptions.
Constraints
While interviewing the stakeholders, several restrictions were also brought up by them to protect the company. Such restrictions involve not storing the emails of players due to privacy issues, which was a huge challenge to design for. Solutions for these will be covered in the Final Designs section.
Interaction Design
Sitemap
I identified the main features (Organization Dashboard, User Management, Subscriptions, Game Files Download, Player Dashboard) that were urgently needed for the launch of the MVP in the sitemap below.
Wireframing
After identifying the key features, I wireframed the screens to gain a rough understanding of key screens and their layouts.
The idea was to combine both the corporate site and the portal to provide information to customers before they purchase from us
User Management in list view to get an overview of the organization
User Management in grid view to enable efficient role assigning
UI Design
Design System
Due to a lack of Front end developers in the team and a tight timeline, I was instructed to modify Ant Design's component kit to suit the brand of the portal. It was my first time working with a premade component kit and it managed to speed the design process up.
Final Designs
Sign Up Process
As mentioned previously, the stakeholders did not want us to store the emails of users due to privacy reasons. Such restrictions made account creation a huge challenge as users only sign up for accounts with their emails nowadays. However, we would still want customers to be held liable for their purchases. Therefore, Organization owners have to sign up with their emails while players have to login with a username. Player accounts have to be created by Organization owners once they are subscribed to VTKD services.
User Password Reset
Since players have to login with a username, it would seem impossible for them to retrieve their password if they lose it. I designed the reset password flow such that players have to approach Owners or Game Masters to reset their password using the portal.
Main Screens
The following are the key features that Organization owners can access in the MVP.
Post Project
Summary of Project
1. Created a solution to aid customers in purchasing products from the company. 2. Designed a workaround for the restrictions imposed by stakeholders by letting users log into the portal using usernames. 3. Implemented key features that are desired by both stakeholders and customers.
Reflection
This project allowed me to interact with customers that I was entirely unfamiliar with. Since I have access to my target group, I was glad that I was able to make full use of this opportunity to understand what the customers want from this product. From there, I was able to pinpoint the necessary features required in the portal and was able to make the most of the resources I had. It was the first time that I was faced with a strict restriction from the stakeholders, which required me to think out of the box to make things work.
Key Takeaways
1. Always listen to what users want from the product. 2. Stakeholders tend to impose restrictions in projects and it is okay to think out of the box to make things work. 3. When there is a lack of manpower and a tight timeline, evaluate which is the best course of method to have a working design system.
