iPersona Design System
Project Background
Working as the main designer and front end engineer on the team, I designed and created prototypes for the first version of a gamer privacy service platform for a startup company based in Seattle. From Jan to Aug 2020, I established the Design system, iterated the initial product structure and workflow, and proposed the future structure of our product. Our main target is focused on gamers with privacy concerns of their accounts. This app’s first prototype launch is delayed due to the COVID-19 pandemic.
Full Stack Designer
January - August 2020
Survey, Secondary Research, Competitive Analysis,
Sketch & Prototype, Zeplin Handoff
User Research, UX & UI Design, Prototyping,
Vue JS Framework Programming
Richard Tsao (Owner & Project Manager) Yusi Cheng (Full Stack Designer) Liming Teng (Full Stack Developer) Xin "Michelle" Gao (Full Stack Designer)
Context
The purpose of iPersona is a new gaming platform that helps gamer to develop a new way to keep their virtual identity and branding on the internet. With the development of the gaming and esports industry, gamers consider their gamertag not only as an id for them to enjoy the games, but also as their own personal brand.
For many gaming platforms there can only be one unique gamertag. That means, only one of each gamer tag could exist. We are trying to let our users to have any gamertag that they want with a different way to show the ID number for the gamer tag.
Process
Discover, Define, Design, and Deliver
Our project followed the UCD design process by conducting our user research. We defined the problem after getting insights from our research and jumped right into the ideation. From sketches all the way into web-based working prototype, we gradually created the first version of the application. Right now, the project is put on hold due to COVID-19.
Research
2019 Game Industry Statistics
2020 Video Game Industry Stats
Competitor Analysis
Major Competitor Analysis
Design Problems
Major UX problems to tackle
Based on the design goals, I received an information architecture generated by Richard. I found two outstanding design problems waiting for me to tackle. We need to figure out the sign up process to create a workflow that works best with iPersona. We proposed an initial feature alterID that we focused on during the first period for our registration process. However, while we did create a workflow for alterID, it was difficult to finish the prototype in time with the alterID feature. It is currently put on hold that we will not include this in the initial prototype. Second part we need to consider what we should include in our iPersona user profile and we need to create the entire flow for logging in using iPersona. I need to find out the whole process to lead our users to log in using our iPersona application.
Design Goals
How might we help our fellow gamers to protect their privacy?
How might we help our users to keep their unique online identity?
How might we collect the least user information for account creation to protect user privacy?
User Flow
Users sign up for iPersona just like any other gaming platforms. We are only asking for the basic information from our users. After inputting their personal information and building their own account, they arrive at the main landing page.
Original Onboarding User Flow
Simplified User Flow
Changes and Challenges
During the first round of design, there are a few problems that came up from the original user flow. Users don’t like people ask them for any information other than login credentials. To reduce frictions during the on boarding process, the demographics information questions are removed during the registration.
Design Decisions
#1 Design Color Change:
We worked on this project ®
Later on in this project, I had a small conflict with my PM. He insisted that we should show every photos in full size within each wedding case. However, it would create a really bad user experience for people to scroll all the way down and most likely ignore the rest of the content half way. So I fold and hide the photo in a scrolling showcase on the cover spot. I limit the number of photos to five and allow people to browse all photos by adding a "view all" option at the end. Eventually I convinced my PM by conducting usability testings and learned that sometimes we have to compromise and hide content in order to gain a better experience.
Visual Design Systems
Demos
Reflections
Start up product = more flexibilities but heavier workload
This is the first time working as the core designer creating a startup project. With the collaboration on conducting early stage research with Michelle, I had the ability to explore more design ideas and options. But with a small startup team, that means people are responsible for more different work. Our goal is to create this product fully functional online, even if we have to sacrifice with some details of the product. I practiced not only working on design, also worked with Vue framework and completed all the front end design handoff with the develop team. During this project we also focused on designing flows that are usually ignored in short-term school projects, such as on-boarding, account settings, and profile page flows.